Vue?echarts實例項目商家銷量統(tǒng)計圖實現(xiàn)詳解

更新時間：2022年09月23日 17:09:07 作者：benlalagang

Echarts，它是一個與框架無關(guān)的?JS?圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，因為我的習(xí)慣，每次新嘗試做一個功能的時候，總要新創(chuàng)建個小項目，做做Demo

組件結(jié)構(gòu)設(shè)計

SellerPage.vue

<!--針對于/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>

Seller.vue

<!-- 顯示商家銷量統(tǒng)計的圖表 -->
<template>
<div class="comP2" ref="seller_1"></div>
</template>
<script>
export default {
data () {
return {}
},
methods: {}
}
</script>
<style lang="less" scoped>
</style>

接下來就在 Seller.vue 搞事情了

在mounted生命周期中初始化 echartsInstance 對象

因為在組件掛載到頁面上 echarts 才能找到具體的DOM渲染

methods 里定義 initChart 方法this.$refs.seller_1 找到具體盒子

this.theme 主題來自于 Vuex 使用映射快捷引入

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

然后就是設(shè)置配置項在之前的基礎(chǔ)都有講到過

新增了柱狀圖漸變設(shè)置可以詳看注釋

鼠標(biāo)移入和移出時間用來停止和開啟定時器后面會用到

      methods:{
     // 初始化echarts 實例對象
      initChart(){
        this.chartsInstance = this.$echarts.init(this.$refs.seller_1,this.theme)
        const initOption = {
            title:{
                text:'▎銷售業(yè)績統(tǒng)計',
                left:20,
                top:15
            },
            grid:{
                top: '24%',
                left: '3%',
                right:'6%',
                bottom:'3%',
                containLabel: true // 距離是包含坐標(biāo)軸上的文字
            },
            xAxis:{
                type:'value',
            },
            yAxis:{
                type: 'category',
            },
            tooltip:{
                trigger:'axis',
                axisPointer:{
                    type:'line',
                    z:0,
                    lineStyle:{
                        color:'#2d3443'
                    }
                }
            },
            series:[
                {
                    type:'bar', // 柱狀圖
                    label:{
                        show:true,// 顯示柱內(nèi)數(shù)值
                        position:'right',// 數(shù)值顯示位置
                        textStyle: {
                            color:'#fff'// 數(shù)值顯示顏色
                        }
                    },
                    itemStyle:{
                        // 設(shè)置漸變 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)
        // 對圖表進(jìn)行 鼠標(biāo)移入移出 事件的監(jiān)聽
        this.chartsInstance.on('mouseover',()=>{
            clearInterval(this.timerID)
        })
        this.chartsInstance.on('mouseout',()=>{
            this.startInterval()
        })
      },
}

發(fā)送請求獲取對應(yīng)的數(shù)據(jù)并進(jìn)行相應(yīng)操作

使用到的data:

    data(){
      return{
        chartsInstance:null, 圖表的實例對象 初始化后賦值給它
        allData:null, 請求過來的數(shù)據(jù)
        currentPage:1, 當(dāng)前頁碼 定時器進(jìn)行改變 來截取哪些數(shù)據(jù)展示
        totalPage:0, 總頁數(shù)
        timerID:null 定時器的ID 用于啟停 
      }
    },

直接使用注冊的 axios =>$http.get 來獲取并通過 async await 簡化解構(gòu)出來

進(jìn)行 sort 排序操作

計算出每頁顯示5條信息的情況下總頁數(shù)是多少能被5整除就直接用整除不了就再加一頁

     async getData(){
        const {data:res} = await this.$http.get('seller')
        this.allData = res
        // 對數(shù)據(jù)進(jìn)行排序
        this.allData.sort((a,b) =>{
            return a.value - b.value // 從小到大排序
        })
        // 每五個數(shù)據(jù) 顯示一頁
        this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : Math.floor(this.allData.length / 5) + 1
        this.updateChart()
        this.startInterval()
      }

數(shù)據(jù)和頁碼轉(zhuǎn)存到 data 里了可以更新設(shè)置把圖表渲染出來

當(dāng)期頁碼默認(rèn)是1 就截取 0-5的索引

在使用 map 生成新的數(shù)組用于 x軸和 y軸

最后更新配置項配置項會自動整合

     // 更新圖表
      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)
      },

當(dāng)?shù)谝豁摰臄?shù)據(jù)展示出來時就可以開啟定時器了

開始之前先清除之前的定時器（來回切換頁面后回到最初的數(shù)據(jù)）

頁碼累計相加到最大值再返回到1

改變當(dāng)前頁的同時調(diào)用更新圖表數(shù)據(jù)的方法

鼠標(biāo)移入移出啟停定時器的方法在注冊實例的時候已經(jīng)添加

      // 開啟定時器
      startInterval(){
          if (this.timerID){
              clearInterval(this.timerID)
          }
          this.timerID = setInterval(()=>{
              this.currentPage++
              if (this.currentPage > this.totalPage){
                  this.currentPage = 1
              }
              this.updateChart()
          },3600)
      },

小細(xì)節(jié)

xAxis:{
    type:'value',
    // 細(xì)節(jié)處理 固定x軸的最大值
    max:this.allData[this.allData.length -1].value
},

當(dāng)窗口尺寸發(fā)生變化時的操作

自己定義一個合適簡易的 rem ：當(dāng)前窗口柵格化100份 * 3.6

根據(jù)這個數(shù)據(jù) 設(shè)定標(biāo)題大小提示文字大小柱狀圖的寬度和圓角尺寸

初始化頁面時調(diào)用一次之后跟隨窗口事件調(diào)用

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

      // 當(dāng)瀏覽器寬度發(fā)生變化時
      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()
      }

到此這篇關(guān)于Vue echarts實例項目商家銷量統(tǒng)計圖實現(xiàn)詳解的文章就介紹到這了,更多相關(guān)Vue 銷量統(tǒng)計圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: