echarts循环图表

<el-col style="margin-bottom:20px" :span="8" v-for="(item,index) in list" :key="index">
                  <div class="wrapper" > 
                    <div class="roseChart"></div>  
                  </div>
</el-col>

// 遍历饼图
        drawRose(){
          var echarts = require("echarts");
          var roseCharts = document.getElementsByClassName('roseChart'); // 对应地使用ByClassName

          for(var i = 0;i < roseCharts.length;i++ ){ // 通过for循环，在相同class的dom内绘制元素
            var myChart = echarts.init(roseCharts[i]);
            myChart.setOption({
              color: ['#546ef3', '#a6cb09', '#f8bd00'],
              legend: {
                  x: 'left',
                  textStyle: {
                      color: '#fft'
                  }
              },
              tooltip: {
                  show: true,
                  trigger: 'item',
                  // formatter: "{b} : <br/>{d}%",
                  formatter: "{b} : <br/>{c}",
              },
              series: [
                // 一个饼图
                // {
                //     type: 'pie',
                //     selectedMode: 'single',
                //     radius: ['60%', '90%'],
                //     label: {
                //         normal: {
                //             position: 'inner'
                //         }
                //     },
                //     labelLine: {
                //         normal: {
                //             show: false
                //         }
                //     },
                //     center:['50%','60%'],
                //     // roseType: 'area',
                    
                //     data: this.list[i].resData // 渲染每个图表对应的数据
                // }
                // 双环图
                  {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    label: {
                      normal: {
                         position: 'inner',
                         show : false
                      }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    center:['50%','50%'],
                    data: this.list[i].aData // 渲染每个图表对应的数据
                },
                {
                    type: 'pie',
                    radius: ['65%', '80%'],
                    label: {
                      normal: {
                         position: 'inner',
                         show : false
                      }
                    }, 
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    center:['50%','50%'],
                    data: this.list[i].bData // 渲染每个图表对应的数据
                },
              ]
            },true)
          }
        },

 list:[ // 假数据
                {
                  aData:[
                    {
                        name:'故障',
                        value:20,
                        itemStyle: {
                          normal: {
                              color: '#94d96c'
                          }
                      }
                    },
                    {
                      value:40,
                      tooltip: {
                          show: false
                      },
                      itemStyle: {
                        normal: {
                              color: '#393d50',
                              label: {
                                  show: false
                              },
                              labelLine: {
                                  show: false
                              }
                          },
                          emphasis: {
                              color: '#393d50'
                          }
                      },
                    }
                  ],
                  bData:[
                    {
                        name:'目标',
                        value:40,
                        itemStyle: {
                          normal: {
                            color:'#fb734e'
                              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              //     offset: 0,
                              //     color:'#fb734e'
                              // }, {
                              //     offset: 1,
                              //     color: '#e32f46'
                              // }])
                          }
                      }
                    },
                    {
                      value:20,
                      tooltip: {
                          show: false
                      },
                      itemStyle: {
                        normal: {
                              color: '#393d50',
                              label: {
                                  show: false
                              },
                              labelLine: {
                                  show: false
                              }
                          },
                          emphasis: {
                              color: '#393d50'
                          }
                      },
                    }
                  ],
                },
                // {
                //     resData:[
                //       {name:'故障',value:7},
                //       {name:'目标',value:30},
                //     ]
                // }
            ]