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() {}
      })