Vue echarts实例项目商家销量统计图实现详解

<!--针对于/sellerpage 这条路径显示 测试显示组件-->
<template>
<div class="comP1">
  <Seller></Seller>
</div>
</template>
<script>
  import Seller from "@/components/Seller";
  export default {
    name: "SellerPage",
    components:{Seller}
  }
</script>
<style scoped>
</style>

<!-- 显示商家销量统计的图表 -->
<template>
<div class="comP2" ref="seller_1"></div>
</template>
<script>
export default {
data () {
return {}
},
methods: {}
}
</script>
<style lang="less" scoped>
</style>

import {mapState} from "vuex";
computed:{
    ...mapState(['theme'])
},

      methods:{
     // 初始化echarts 实例对象
      initChart(){
        this.chartsInstance = this.$echarts.init(this.$refs.seller_1,this.theme)
        const initOption = {
            title:{
                text:'▎销售业绩统计',
                left:20,
                top:15
            },
            grid:{
                top: '24%',
                left: '3%',
                right:'6%',
                bottom:'3%',
                containLabel: true // 距离是包含坐标轴上的文字
            },
            xAxis:{
                type:'value',
            },
            yAxis:{
                type: 'category',
            },
            tooltip:{
                trigger:'axis',
                axisPointer:{
                    type:'line',
                    z:0,
                    lineStyle:{
                        color:'#2d3443'
                    }
                }
            },
            series:[
                {
                    type:'bar', // 柱状图
                    label:{
                        show:true,// 显示柱内数值
                        position:'right',// 数值显示位置
                        textStyle: {
                            color:'#fff'// 数值显示颜色
                        }
                    },
                    itemStyle:{
                        // 设置渐变 x1,y1,x2,y2(指明渐变的方向) [{指明不同百分比下颜色的值}]
                        color:new this.$echarts.graphic.LinearGradient(0,0,1,0,[
                            {
                                offset:0,
                                color:'#5052ee'
                            },
                            {
                                offset: 1,
                                color: '#ab6ee5'
                            }
                        ])
                    }
                },
            ]
        }
          this.chartsInstance.setOption(initOption)
        // 对图表进行 鼠标移入移出 事件的监听
        this.chartsInstance.on('mouseover',()=>{
            clearInterval(this.timerID)
        })
        this.chartsInstance.on('mouseout',()=>{
            this.startInterval()
        })
      },
}

    data(){
      return{
        chartsInstance:null, 图表的实例对象 初始化后赋值给它
        allData:null, 请求过来的数据
        currentPage:1, 当前页码 定时器进行改变 来截取哪些数据展示
        totalPage:0, 总页数
        timerID:null 定时器的ID 用于启停 
      }
    },

     async getData(){
        const {data:res} = await this.$http.get('seller')
        this.allData = res
        // 对数据进行排序
        this.allData.sort((a,b) =>{
            return a.value - b.value // 从小到大排序
        })
        // 每五个数据 显示一页
        this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : Math.floor(this.allData.length / 5) + 1
        this.updateChart()
        this.startInterval()
      }

     // 更新图表
      updateChart(){
        const start = (this.currentPage - 1) * 5
        const end = this. currentPage * 5
        const showData = this.allData.slice(start,end) // slice 截取 不包括 end
        const sellerNames = showData.map((item) =>{
          return item.name
        })
        const sellerValues = showData.map((item) =>{
          return item.value
        })
        const dataOption = {
            yAxis:{data:sellerNames},
            series:[{data:sellerValues}]
        }
        this.chartsInstance.setOption(dataOption)
      },

      // 开启定时器
      startInterval(){
          if (this.timerID){
              clearInterval(this.timerID)
          }
          this.timerID = setInterval(()=>{
              this.currentPage++
              if (this.currentPage > this.totalPage){
                  this.currentPage = 1
              }
              this.updateChart()
          },3600)
      },

xAxis:{
    type:'value',
    // 细节处理 固定x轴的最大值
    max:this.allData[this.allData.length -1].value
},

mounted() {
  window.addEventListener('resize',this.screenAdapter)
  this.screenAdapter()
},

      // 当浏览器宽度发生变化时
      screenAdapter(){
        const titleFontSize = this.$refs.seller_1.offsetWidth / 100 * 3.6
        // 分辨率改变时更新的配置
        const adapterOption = {
            title:{
                textStyle:{
                    fontSize: titleFontSize
                }
            },
            tooltip:{
                axisPointer:{
                    lineStyle:{
                        width:titleFontSize,
                    }
                }
            },
            series:[
                {
                    type:'bar', // 柱状图
                    barWidth:titleFontSize,// 柱状宽度
                    itemStyle:{
                        barBorderRadius:[0,titleFontSize/2,titleFontSize/2,0],// 柱状的圆角
                    }
                },
            ]
        }
        this.chartsInstance.setOption(adapterOption)
        this.chartsInstance.resize()
      }