元件只做了簡單的傳值處理，記錄開發思路及echarts簡單使用。

這裡預設所有圖表樣式一致，都為柱狀圖，如需其他型別，可查閱echarts官網文件，再動態傳值即可。

vue 使用元件 ------在外層用v-for 迴圈，傳不同值進charts 即可

   <!-- 傳入對應的資料給子元件 -->
   <charts
    :options="item.select" 
    :id='"charts" +index'
    :index="index"
    style="width: 900px;height:400px;"
   ></charts>
   <!-- 傳入對應的資料給子元件 end -->

vue建立子元件-----初始化空模板

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

主要部分 ------ 初始化echarts.js

Vue.component('charts',{
  template: '#charts',// 傳入對應的數值與動態index
  props: ['options','index'],methods: {
   initOption() {
   var that = this
   var arr1 = [] // x軸刻度
   var arr2 = [] // y軸資料值
 
    // 取出需要的資料
   this.options.forEach(element => {
    arr1.push(element.selectedTopic)
    arr2.push(element.peopleNum)
   })
 
   // 基於準備好的dom，初始化echarts例項
   var myChart = echarts.init(
    document.getElementById('charts' + this.index)
   )
 
   // 指定圖表的配置項和資料
   var option = {
    color: ['#3582F8'],tooltip: {
    trigger: 'axis',axisPointer: {
     // 座標軸指示器，座標軸觸發有效
     type: 'shadow' // 預設為直線，可選為：'line' | 'shadow'
    }
    },grid: {
    left: '3%',right: '4%',bottom: '3%',containLabel: true
    },xAxis: [
    {
     type: 'category',data: arr1,// X軸的刻度
     axisTick: {
     alignWithLabel: true
     }
    }
    ],yAxis: [
    // y軸的刻度值自動調整
    {
     type: 'value'
    }
    ],series: {
    name: 'y軸數值',type: 'bar',barWidth: '60%',data: arr2 // 具體選擇數值
    }
   }
 
   // 使用剛指定的配置項和資料顯示圖表。
   myChart.setOption(option)
   }
  },mounted() {
   this.initOption()
  },created() {}
  })

補充知識：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',//預設透明
        shadowBlur: 10
       },axisTick: {      // 座標軸小標記
        length: 4,// 屬性length控制線長
        lineStyle: {    // 屬性lineStyle控制線條樣式
          color: 'auto',//預設透明
          shadowBlur: 10
        }
       },splitLine: {      // 分隔線
        length: 7,// 屬性length控制線長
        lineStyle: {    // 屬性lineStyle（詳見lineStyle）控制線條樣式
         width: 2,color: '#fff',//預設透明
         shadowBlur: 10
        }
       },pointer: {      // 分隔線
        width:4,//指標的寬度
        length:"70%",//指標長度，按照半圓半徑的百分比
        shadowColor: '#fff',//預設透明
        shadowBlur: 5
       },title: {
        textStyle: {    // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
         fontWeight: 'bolder',fontSize: 10,fontStyle: 'italic',detail: {
        fontSize: 12,},data: [{value: this.dataVal[i].normalSum,name: ''}]
      }]
     });
    }
   })
  }
}

以上這篇echarts.js 動態生成多個圖表 使用vue封裝元件操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。