UI 界面的调整

1: 柱状图条目的形成:
   1.1: 宽度   1.2: 文字  1.3: 右边圆角  1.4: 颜色渐变   1.5: 背景

2: 
// 商家销售统计的横向柱状图
<template>
  <div class="com-container">
    <div class="com-charts" ref="seller_ref">
     
    </div>
  </div>
</template>
 
<script>
export default {
   data() {
     return {
       chartsInstance = null,   // 保存chartsInstance 数据
       allData: null,   //  服务器返回的数据
       currentPage: 1,  //  当前显示的页数
       totalPage: 0,    //  一共显示多少页
       timerId: null,   //  定时器的标识
     }
   },
   mounted() {
    this.initCharts(),  
    this.getData(),
   },
   // 组件销毁的时候, 取消定时器
   destroyed() {
     clearInterval(this.timerId)
   },
   methods: {
     // 初始化 chartsInstance 对象
     initCharts () {
       this.chartsInstance = this.$echrts.init(this.$refs.seller_ref);
       // 对图标对象进行鼠标事件的监听
       this.chartInstance.on('mouseover', ()=> {  // 鼠标进入事件清除定时器
         clearInterval(this.timerId)
       })
       this.chartInstance.on('mouseout', ()=> {   // 鼠标离开事件开启定时器
         startInterval(this.timerId)
       })
 
     },
     // 获取服务器的数据
     async getData() {
        // 访问服务器地址对象     // http:// 172.0.0.1:8089/api/seller
        const {data: ret}  await this.$http({
          url: 'seller',
          method: 'get'
        })
       console.log(ret)
       this.allData = ret;
       //  对数组进行排序的操作
       this.allData.sort((a, b)=> {
          return a.value < b.value   // 从小到大的排序
       })
       // 每五个元素显示一页
       this.totalPage = this.allData.lemgth % 5 === 0 ? this.allData.lemgth % 5 : 
       this.allData.lemgth % 5 + 1
       this.updateCharts()   // 第一次图标的更新
       this.startInterval();  // 开启定时器
     }
     // 更新图表
     updateCharts() {
       const start = (this.currentPage - 1) * 5;   // 0
       const end =  this.currentPage * 5;     // 5
       const showData = this.allData.slice(start, end)
 
       const sellerNames = showData.map((item)=> {
           return item.name   
       })
       const sellerValues = showData.map((item)=> {
           return item.value
       })
 
       const option = {
         xAis: {
           type: 'value'
         },
         yAxis: {
           type: 'category'
           data: sellerNames
         },
         tooltip: {
           triggle: 'axis',
           axisPointer: {
             type: 'line',
             z: 0,
             lineStyle: {
               width: 66,
               color: '#2D3443'
             }
           }
         },
         series: [
           {
             type: 'bar',
             data: sellerValues,
             barWidth: 66,   // 每一条柱条的宽度 
             lable: {
               show: true,   // 文本的显示
               position: 'right',  // 文字显示的位置(右侧)
               itemStyle: {
                 color: 'white',   // 把文字的颜色设置为白色 
               }
             },
             itemStyle: {
               barBorderRadius: [0, 33, 33, 0],    // 设置圆角边框
               // 指明颜色渐变的方向
               // 指明不同百分比之下的颜色值
               // color: new this.$echarts.graphic.LineGradiend(x1, y1, x2, y2, [])
               color: new this.$echarts.graphic.LineGradiend(0, 0, 1, 0, [
                 // 在百分之0 状态之下的颜色值
                 {
                    offset: 0,
                    color: '#5052EE'
                 },
                 // 在百分之100 状态之下的颜色值
                 {
                    offset: 1,
                    color: '#AB6EE5'
                 }
               ])
             } 
           }
         ]
       },
       this.chartsInstance.setOption(option);
    },
    startInterval () {
      if(this.timerId) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(()=> {
        this.currentPage++;
        if(this.currentPage < this.totalPage) {
           this.currentPage = 1
        }
        this.updateChart();
      }, 5000)   // 间隔5 s 刷新一次
    }
  }
}
</script>

<style lang="less" scope>
</style>