vue动态生成多个Echarts图表

vue动态生成多个Echarts图表

首先先动态的获取到id

<div v-for="(item,index) in chartList" :key="index">
  <div :id="`chart${index}`"></div>
</div>

其次获取后端返回的数据

this.chartList = res.data.data.chartList;//从后台获取数据
if (this.chartList.length > 0) {
  this.$nextTick(() => {
    this.initChart()
  })
}

生成echarts图表

initChart() {
    this.chartList.forEach((val, index) => {
      const myChart = this.$echarts.init( document.getElementById(`chart${index}`))
       this.chartList[index] = {
            title: {top:"3%",position:'center',left:'60%',text: this.chartList[index].key,textStyle:{fontSize:'20',textBorderType: [5, 10],textBorderDashOffset: 5,textBorderType: 'solid',color:'#5b9bd5'}},
            xAxis: {type: 'category',data: ['在线', '排队','小休', '示忙','空闲','通话','整理'],nameLocation:'end',splitArea:{show:false},splitLine:{show: false}},
            yAxis: {type: 'value',splitArea:{show:false},splitLine:{show: false}},
            series: [{data:this.chartList[index].list,type: 'bar',barWidth: '20%',color:'#5b9bd5',label:{show:true,position:'top'},//配置样式
            itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['#5b9bd5','red','orange','yellow','green','blue','purple'];
                        return colorList[params.dataIndex];
                    }
                },}}],
            grid:{left:"10%",right:"0%",top:"15%"}
            }
      //注意this.chartList[index]这是我们后台拼好数据直接set就行了
      myChart.setOption(this.chartList[index])
    })
  }
},