vue之elementUI中根据后台数据循环渲染echars

记录：
直接贴代码
# html部分
js 方法部分：

forEchars(){
      for(var i=0; i<this.CharsData.length;i++){
          
           console.log('22222222222222',document.getElementById('bar'+i))

              var myChart2 = echarts.init(document.getElementById('bar'+i));
        var data = [
            // {value:264272, name:'待解决告警'},
            // {value:126797, name:'已解决告警'},
        ];
        var option = {
            color: [ '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
              grid: {
                                left: '4%',
                                top: '15%',
                                right: '4%',
                                bottom: '15%',
                                containLabel: true
                            },
                xAxis: {
                    type: 'category',
                    data:this.CharsData[i].option.clock,
                     axisLine: {
                    lineStyle: {
                        color: "#D7F0FF",
                    }
                }
                },
                yAxis: {
                    type: 'value',
                        axisLine: {
                    lineStyle: {
                        color: "#D7F0FF",
                    }
                }
                },
                series: [{
                    data: this.CharsData[i].option.series[0].data,
                    type: this.CharsData[i].type,
                    // areaStyle: {}
                },
                ]
            };
        window.onresize = function() {
            myChart2.resize();
        };
       
        myChart2.setOption(option);
     console.log('1111111111111111111111')
      }
    //   console.log('1111111111111111111111',this.$refs)
     },

在getData中调用，不要去mounted中调用，会报错；可以加延时器，获取容器最好使用getId 使用vue的refs有时候会提示获取不到问题
···
成品图：

注意：如果echars 展示出来的是半个容器的宽度的话，不要急，这个问题是因为dom 渲染顺序导致的，可以给渲染echars 的函数加个延时器，可以解决这个问题