echart——vue封裝成公共組件

<!-- 自定義Echarts
*    options: Object,//數據
*    theme: String,//主題
*    initOptions: Object,//初始化
*    group: String,//分組
*    autoResize: Boolean,//自適應
*    modules: Array，//模型
 -->
<template>
  <div style="height: 100%;width:100%"></div>
</template>
<script>
  // enumerating ECharts events for now
  const ACTION_EVENTS = [
    'legendselectchanged',
    'legendselected',
    'legendunselected',
    'datazoom',
    'datarangeselected',
    'timelinechanged',
    'timelineplaychanged',
    'restore',
    'dataviewchanged',
    'magictypechanged',
    'geoselectchanged',
    'geoselected',
    'geounselected',
    'pieselectchanged',
    'pieselected',
    'pieunselected',
    'mapselectchanged',
    'mapselected',
    'mapunselected',
    'axisareaselected',
    'brush',
    'brushselected'
  ];
  const MOUSE_EVENTS = [
    'click',
    'dblclick',
    'mouseover',
    'mouseout',
    'mousedown',
    'mouseup',
    'globalout'
  ];
  export default {
    props: {
      options: Object,
      theme: String,
      initOptions: Object,
      group: String,
      autoResize: Boolean,
      modules: Array
    },
    data () {
      return {
        chart: null,
      }
    },
    computed: { // 數據驅動，不更新DOM
      width: {
        cache: false,
        get () {
          return this.chart.getWidth()
        }
      },
      height: {
        cache: false,
        get () {
          return this.chart.getHeight()
        }
      },
      isDisposed: {
        cache: false,
        get () {
          return this.chart.isDisposed()
        }
      }
    },
    watch: {// 通過監聽參數：options、group進行重繪
      options: {
        handler (options) {
          if (!this.chart && options) {
            this.echartInit();
          } else {
            this.chart.setOption(this.options, true);
          }
        },
        deep: true
      },
      group: {
        handler (group) {
          this.chart.group = group
        }
      }
    },
    methods: {
      // 設置數據
      mergeOptions (options) {
        this._delegateMethod('setOption', options)
      },
      // 是否重新繪制
      resize (options) {
        this._delegateMethod('resize', options)
      },
      dispatchAction (payload) {
        this._delegateMethod('dispatchAction', payload)
      },
      convertToPixel (finder, value) {
        return this._delegateMethod('convertToPixel', finder, value)
      },
      convertFromPixel (finder, value) {
        return this._delegateMethod('convertFromPixel', finder, value)
      },
      containPixel (finder, value) {
        return this._delegateMethod('containPixel', finder, value)
      },
      showLoading (type, options) {
        this._delegateMethod('showLoading', type, options)
      },
      hideLoading () {
        this._delegateMethod('hideLoading')
      },
      getDataURL (options) {
        return this._delegateMethod('getDataURL', options)
      },
      getConnectedDataURL (options) {
        return this._delegateMethod('getConnectedDataURL', options)
      },
      clear () {
        this._delegateMethod('clear')
      },
      dispose () {
        this._delegateMethod('dispose')
      },
      _delegateMethod (name, ...args) {
        if (!this.chart) {
          return
        }
        return this.chart[name](...args)
      },
      echartInit () { // 按需引入
        if (this.chart) return false;
        import('echarts').then(({ init }) => {
          const { $el, theme, initOptions, group, options, autoResize, _resizeHanlder } = this
          let chart = init($el, theme, initOptions);
          if (group) {
            chart.group = group
          }
          chart.setOption(options, true);
          // 自定義點擊事件回調
          ACTION_EVENTS.forEach(event => {
            chart.on(event, params => {
              this.$emit(event, params)
            })
          });
          // 自定義鼠標事件回調
          MOUSE_EVENTS.forEach(event => {
            chart.on(event, params => {
              this.$emit(event, params)
            })
          });
          if (autoResize) {
            window.addEventListener('resize', _resizeHanlder, false)
          }
          this.chart = chart;
          console.log('加載成功', chart)
        }).catch(_ => {
          console.log('加載失敗')
        })
      },
      _resizeHanlder () {
        window.setTimeout(() => {
          this.chart.resize()
        }, 100)
      }
    },
    mounted () { // 初始化
      if (this.options) {
        this.echartInit()
      }
    },
    beforeDestroy () {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this._resizeHanlder, false)
      }
      this.dispose()
    },
    connect (group) {
      const { chart } = this;
      if (typeof group !== 'string') {
        group = group.map(chart => chart.chart)
      }
      this.chart.connect(group)
    },
    disconnect (group) {
      this.chart.disConnect(group)
    },
    registerMap (...args) {
      this.chart.registerMap(...args)
    },
    registerTheme (...args) {
      this.chart.registerTheme(...args)
    }
  }
</script>