vue根据获取的数据动态循环渲染多个echart（多个dom节点，多个ID）

//在dom节点加载之后调用渲染echart仪表盘方法，this.$nextTick(function(){ }

<div class="chart">

          <div class="geo" v-for="(dataval, index) in dataVal" :key="index" :id="forId(index)"></div>

</div>

methods: {
 forId:function(index){
    return "geo_" +index
 },

  mapTree() {
      this.$nextTick(function(){
        for(var i=0;i<this.dataVal.length;i++){
           //获取id放入数组中，以便下面渲染echart仪表盘使用
          this.getId.push(this.$echarts.init(document.getElementById('geo_'+i)));
          this.getId[i].setOption({
            title: {
              text: this.dataVal[i].name+'栋',
              textStyle: {
                color: '#00f2f1',
                fontSize: 14
              },
              left: 'center',
              top: 5
            },
            tooltip: {
              formatter: '{a} <br/>{c}'
            },
            series:[
            {
              name: '工作电表数',
              type: 'gauge',
              radius: '80%',
              min: 0,
              max: Number(this.dataVal[i].sum),
              splitNumber: 10,
              axisLine: {            // 座标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.30, '#ff4500'], [0.80, '#1e90ff'], [1, 'lime']],
                    width: 1,
                    shadowColor: '#fff', //默认透明
                }
              },
              axisLabel: {            // 座标轴小标记
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              },
              axisTick: {            // 座标轴小标记
                length: 4,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
              },
              splitLine: {           // 分隔线
                length: 7,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  width: 2,
                  color: '#fff',
                  shadowColor: '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              pointer: {           // 分隔线
                width:4,//指针的宽度
                length:"70%", //指针长度，按照半圆半径的百分比
                shadowColor: '#fff', //默认透明
                shadowBlur: 5
              },
              title: {
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 10,
                  fontStyle: 'italic',
                  color: '#fff',
                  shadowColor: '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              detail: {
                fontSize: 12,
              },
              data: [{value: this.dataVal[i].normalSum, name: ''}]
            }]
          });
        }
      })
   }
}