echarts.js 動態生成多個圖表 使用vue封裝組件

組件只做了簡單的傳值處理，記錄開發思路及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() {}
      })