<!-- 傳入對(duì)應(yīng)的數(shù)據(jù)給子組件 -->
   <charts
    :options="item.select" 
    :id='"charts" +index'
    :index="index"
    style="width: 900px;height:400px;"
   ></charts>
   <!-- 傳入對(duì)應(yīng)的數(shù)據(jù)給子組件 end -->

 <!-- 圖表組件 -->
 <template>
  <div></div>
 </template>
 <!-- 圖表組件 end -->

Vue.component('charts', {
  template: '#charts',  
  // 傳入對(duì)應(yīng)的數(shù)值與動(dòng)態(tài)index
  props: ['options', 'index'],
  methods: {
   initOption() {
   var that = this
   var arr1 = [] // x軸刻度
   var arr2 = [] // y軸數(shù)據(jù)值
 
    // 取出需要的數(shù)據(jù)
   this.options.forEach(element => {
    arr1.push(element.selectedTopic)
    arr2.push(element.peopleNum)
   })
 
   // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
   var myChart = echarts.init(
    document.getElementById('charts' + this.index)
   )
 
   // 指定圖表的配置項(xiàng)和數(shù)據(jù)
   var option = {
    color: ['#3582F8'],
    tooltip: {
    trigger: 'axis',
    axisPointer: {
     // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
     type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
    }
    },
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    xAxis: [
    {
     type: 'category',
     data: arr1, // X軸的刻度
     axisTick: {
     alignWithLabel: true
     }
    }
    ],
    yAxis: [
    // y軸的刻度值自動(dòng)調(diào)整
    {
     type: 'value'
    }
    ],
    series: {
    name: 'y軸數(shù)值',
    type: 'bar',
    barWidth: '60%',
    data: arr2 // 具體選擇數(shù)值
    }
   }
 
   // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
   myChart.setOption(option)
   }
  },
  mounted() {
   this.initOption()
  },
  created() {}
  })

<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放入數(shù)組中，以便下面渲染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: '工作電表數(shù)',
       type: 'gauge',
       radius: '80%',
       min: 0,
       max: Number(this.dataVal[i].sum),
       splitNumber: 10,
       axisLine: {      // 坐標(biāo)軸線
        lineStyle: {    // 屬性lineStyle控制線條樣式
          color: [[0.30, '#ff4500'], [0.80, '#1e90ff'], [1, 'lime']],
          width: 1,
          shadowColor: '#fff', //默認(rèn)透明
        }
       },
       axisLabel: {      // 坐標(biāo)軸小標(biāo)記
        color: '#fff',
        shadowColor: '#fff', //默認(rèn)透明
        shadowBlur: 10
       },
       axisTick: {      // 坐標(biāo)軸小標(biāo)記
        length: 4,    // 屬性length控制線長(zhǎng)
        lineStyle: {    // 屬性lineStyle控制線條樣式
          color: 'auto',
          shadowColor: '#fff', //默認(rèn)透明
          shadowBlur: 10
        }
       },
       splitLine: {      // 分隔線
        length: 7,     // 屬性length控制線長(zhǎng)
        lineStyle: {    // 屬性lineStyle（詳見lineStyle）控制線條樣式
         width: 2,
         color: '#fff',
         shadowColor: '#fff', //默認(rèn)透明
         shadowBlur: 10
        }
       },
       pointer: {      // 分隔線
        width:4,//指針的寬度
        length:"70%", //指針長(zhǎng)度，按照半圓半徑的百分比
        shadowColor: '#fff', //默認(rèn)透明
        shadowBlur: 5
       },
       title: {
        textStyle: {    // 其余屬性默認(rèn)使用全局文本樣式，詳見TEXTSTYLE
         fontWeight: 'bolder',
         fontSize: 10,
         fontStyle: 'italic',
         color: '#fff',
         shadowColor: '#fff', //默認(rèn)透明
         shadowBlur: 10
        }
       },
       detail: {
        fontSize: 12,
       },
       data: [{value: this.dataVal[i].normalSum, name: ''}]
      }]
     });
    }
   })
  }
}