Vue 封装echarts公共方法

在使用Echarts在做数据大屏的时候，需要初始化多个图表，每个图表的都要进行初始化对应的DOM元素绑定var myChart = echarts.init(document.getElementById('eleDom'));
所以就想提取公共的初始化方法就有了以下思路，
使用的vue-cli3建立的开发环境，在utils目录下建立echartsInit.js文件，代码如下

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入各种图表，图表后缀都为 Chart
import { BarChart, PieChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
  // GeoCoComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// DIV 宽高变化监听
import { EleResize } from '@/utils/eleResize'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  PieChart,
  CanvasRenderer
])

/** 封装 echart初始化方法，需要传入 绘制图表的dom元素和绘制图表缩需要的相关配置项 *
*   同时还添加了图表自动适应dom的宽高变化的功能，需要引入EleResize.js
*/
function drawChart(dom, option) {
  const $Chart = echarts.init(document.getElementById(dom))
  const resizeDiv = document.getElementById(dom)
  $Chart.setOption(option)
  const listener = function() {
    console.log('divRsize')
    $Chart.resize()
  }
  EleResize.on(resizeDiv, listener)
  return $Chart
}

export { drawChart }

用法
修改 mian.js

import Vue from 'vue'
.....
// 引入封装好的初始化方法
import { drawChart } from '@/utils/echartsInit'
// 在vue的原型上绑上 刚刚封装的方法，将来可以在组件中通过this.$drawChart()来进行调用
Vue.prototype.$drawChart = drawChart

这样，在组件当中使用图表的时候，就很清爽了，只需要关注图表 相关的配置项option即可

<template>
  <div id="barChart" style="height:100%"></div>
</template>

<script>
const domEle = 'barChart'
const option = {
// 图表相关配置省略
}
export default {
  mounted() {
    this.darwChart()
  },
  data() {
    return {
      barChart: null
    }
  },
  methods: {
    darwChart() {
        this.barChart = this.$drawChart(domEle, option)
    }
  }
}
</script>

附 EleResize.js

var EleResize = {
  _handleResize: function(e) {
    var ele = e.target || e.srcElement
    var trigger = ele.__resizeTrigger__
    if (trigger) {
      var handlers = trigger.__z_resizeListeners
      if (handlers) {
        var size = handlers.length
        for (var i = 0; i < size; i++) {
          var h = handlers[i]
          var handler = h.handler
          var context = h.context
          handler.apply(context, [e])
        }
      }
    }
  },
  _removeHandler: function(ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (handlers) {
      var size = handlers.length
      for (var i = 0; i < size; i++) {
        var h = handlers[i]
        if (h.handler === handler && h.context === context) {
          handlers.splice(i, 1)
          return
        }
      }
    }
  },
  _createResizeTrigger: function(ele) {
    var obj = document.createElement('object')
    obj.setAttribute(
      'style',
      'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;'
    )
    obj.onload = EleResize._handleObjectLoad
    obj.type = 'text/html'
    ele.appendChild(obj)
    obj.data = 'about:blank'
    return obj
  },
  _handleObjectLoad: function(evt) {
    this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
    this.contentDocument.defaultView.addEventListener(
      'resize',
      EleResize._handleResize
    )
  }
}
if (document.attachEvent) {
  // ie9-10
  EleResize.on = function(ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (!handlers) {
      handlers = []
      ele.__z_resizeListeners = handlers
      ele.__resizeTrigger__ = ele
      ele.attachEvent('onresize', EleResize._handleResize)
    }
    handlers.push({
      handler: handler,
      context: context
    })
  }
  EleResize.off = function(ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (handlers) {
      EleResize._removeHandler(ele, handler, context)
      if (handlers.length === 0) {
        ele.detachEvent('onresize', EleResize._handleResize)
        delete ele.__z_resizeListeners
      }
    }
  }
} else {
  EleResize.on = function(ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (!handlers) {
      handlers = []
      ele.__z_resizeListeners = handlers

      if (getComputedStyle(ele, null).position === 'static') {
        ele.style.position = 'relative'
      }
      var obj = EleResize._createResizeTrigger(ele)
      ele.__resizeTrigger__ = obj
      obj.__resizeElement__ = ele
    }
    handlers.push({
      handler: handler,
      context: context
    })
  }
  EleResize.off = function(ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (handlers) {
      EleResize._removeHandler(ele, handler, context)
      if (handlers.length === 0) {
        var trigger = ele.__resizeTrigger__
        if (trigger) {
          trigger.contentDocument.defaultView.removeEventListener(
            'resize',
            EleResize._handleResize
          )
          ele.removeChild(trigger)
          delete ele.__resizeTrigger__
        }
        delete ele.__z_resizeListeners
      }
    }
  }
}
export { EleResize }