vue根据获取的数据动态循环渲染多个echart(多个dom节点,多个ID)

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



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

  mapTree() {
      this.$nextTick(function(){
        for(var i=0;i{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: ''}]
            }]
          });
        }
      })
   }
}

 

你可能感兴趣的:(vue,js)