echarts.js 动态生成多个图表 使用vue封装组件

echarts.js 动态生成多个图表 使用vue封装组件

 <div v-for="(item,index) in chartList" :key="index" style="width:33.15%;height:50%;color:white;border: 1px solid white;display:flex;">
      <div :id="`chart${index}`" style="width:70%;height:100%;"></div>
 </div>

paintGraphChange(){
   this.chartList.forEach((val, index) => {
   const myChart = echarts.init( document.getElementById(`chart${index}`),'dark')
   this.chartList[index] = {
            title: {top:"3%",position:'center',left:'60%',text: this.chartList[index].skillGroupName,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','rgb(255,0,0)','rgb(146,208,80)','rgb(255,255,0)','rgb(0,176,240)','rgb(0,176,80)','rgb(112,48,160)'];
                        return colorList[params.dataIndex];
                    }
                },}}],
            grid:{left:"10%",right:"0%",top:"15%"}
            }
      //注意this.chartList[index]这是我们后台拼好数据直接set就行了
      myChart.setOption(this.chartList[index])
    })
    },