vue中循环生成多个相同的echarts图表，但数据动态_vue中根据返回数据动态生成多个echarts饼图

一.需求
需要循环展示多个相同结构样式的echarts，但是每个图表的数据动态，需要根据后端统一返回的数据去填充图表的数据内容

二.效果

三.代码和注释如下

 <div  v-for="(item,index) in indexList" :key="item.id">
    <div class="main3" style="height:360px;"></div>
    //模板里先定义个div盒子，放echarts,这里必须有设置宽或者高，要不然echarts不会展示
 </div>
1
2
3
4

drawChart3(){
    var echarts = require("echarts");
    //先引入echarts
    var roseCharts=document.getElementsByClassName('main3')
    //通过getElementsByClassName获取到所有类名叫main3的div盒子节点 
    for (var i = 0; i < roseCharts.length; i++) {
        //循环所有echarts节点
        var myChart = echarts.init(roseCharts[i])
        //初始化每一个图表
        var option ={//echarts的配置
        tooltip: { //点击环形图每个部分时展示的提示窗
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
          //提示窗的提示内容
        },
        legend: {//图例的样式和内容
          selectedMode:false,
          bottom: '5%',//图例距离整个容器底部的距离
          left: 'center',//图例距离整个容器左边
          data: ['完成', '较好', '一般', '较差', '无进展'],//图例文字内容
          itemHeight: 9,//图例图标的高度
          itemWidth:9,//图例图标的宽度
          itemGap: 25,//图例图标与文字间的间距
          icon: "circle",//设置图例图标的形状为实心圆，这个不填，默认是矩形
          textStyle: {
           fontSize: 12,//图例文字字体大小
           color: '#8A90A3'//图例文字颜色
          },
        },
        color:["#5CA4FC","#7F5EF3","#FBCF36","#42D6CC","#D9DCE4"],
        //环形图内容组成部分的颜色设置
        series: [//数据
          {
            name: 'KR完成比例',//数据名称
            type: 'pie',//饼状图
            radius: ['30%', '50%'],//饼图的半径，一般写一个，若写成有2个半径的数组，则变成了环形图
            label: {//饼状图展示的内容
                formatter: '{per|{d}%}  {ng|{c}}',//饼状图延伸线展示的内容
                backgroundColor: '#fff',//背景色
                rich: {//展示内容的样式控制，需要通过设置变量样式的方式
                    per: {
                        color: 'rgba(133, 138, 155, 1)',
                        padding: [2, 4],
                        borderRadius: 2
                    },
                    ng:{
                      color: 'rgba(92, 164, 252, 1)',
                    }
                }
            },
            data: this.indexList[i].pies
            //后端返回的数据，将每个数组循环填充进echarts的数据源，其中后端返回的每一个数组的数据形式应该约定好，例如：[{value: 12, name: '完成'},{value: 25, name: '较好'},{value: 40, name: '一般'},{value: 15, name: '较差'},{value: 8, name: '无进展'}]
          }
        ]
      }
         myChart.setOption(option)
         //将该echarts用之前配置好的option的配置项进行渲染
         window.addEventListener("resize", function () {
         //监听窗口变动实时渲染
          myChart.resize();
        });
     }
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63