关于vue.js:vue-同一页面实例化多个echarts对象的封装方法并且自适应

我将 echarts 封装成了一个 全局组件，因为很多其余都用到了，接管一个配置项参数，并且按需引入。

为了让图表可能随着屏幕宽度自适应，通过 element-resize-detector监听 dom 元素的变动。
而且还能随着左侧边栏的膨胀而变动

装置依赖

npm install echarts --save
npm install element-resize-detector  

echarts.vue 文件

this.$el 代表的是以后组件
子组件中不须要实例化 echarts 对象，申请接口的时候通过父组件调用子组件的 init()办法

<template>
  <div></div>
</template>

<script>
import * as echarts from 'echarts'

// 监听 dom 元素的变动
import elementResizeDetectorMaker from 'element-resize-detector'

// echarts 导入相干
import {GridComponent, TitleComponent, TooltipComponent, LegendComponent} from 'echarts/Components'
import {BarChart, PieChart, LineChart} from 'echarts/charts'
import {UniversalTransition} from 'echarts/features'
import {CanvasRenderer} from 'echarts/renderers'

echarts.use([
  GridComponent, 
  TitleComponent,   // 题目
  TooltipComponent, // 鼠标移入提醒
  LegendComponent,  // 图例 
  BarChart,     // 柱状图
  PieChart,     // 饼图
  LineChart,    // 折线图
  UniversalTransition,
  CanvasRenderer
])
export default {
  name:'dyEcharts',
  pops:['option'],

  methods:{init(){const myChart = echarts.init(this.$el)
      myChart.resize()
      this.option && myChart.setOption(this.option)

      // 监听盒子宽度的变动进行重置大小
      let erd = elementResizeDetectorMaker()
      erd.listenTo(this.$el,e => {this.$nextTick(() => {myChart.resize()
        })
      })
    }
  }
}
</script>

页面中应用 echarts 组件

template 中

<template>
  <div>
    <!-- 折线图 -->
    <div class="line">
      <dyEcharts :option='LineOption'
                 ref="line"
                 style="height:300px"></dyEcharts>
    </div>

    <!-- 柱状图 -->
    <div class="Bar">
      <dyEcharts :option='BarOption'
                 ref="bar"
                 style="height:300px"></dyEcharts>
    </div>
  </div>
</template>

script 中

import {lineApi,barApi} from '@/api/echarts'  // 申请接口

data(){
  retutn {lineOption:[],
    barOption:[],}
},
methods:{line(){lineApi({}).then(res=>{
        /* 
        对 echarts 的配置项 option 进行解决
        ......
        */
       
       // 配置好 option 后，执行子组件 echarts 中的 init 办法
       this.$nextTick(() => {this.$refs.line.init()
       })
      })
    }
}