vue中使用echarts进行封装使用，提高开发效率

1.封装公用的echarts组件

<template>
  <div class="chart" />
</template>

<script>
import merge from 'lodash/merge'
import * as echarts from 'echarts'
import 'echarts-gl'
import 'echarts-liquidfill'
import { BASIC_OPTION } from './default_option'
import ResizeListener from 'element-resize-detector'

export default {
  name: 'Chart',
  props: {
    // 正常的业务数据，对应echarts饼图配置中series[0].data
    seriesData: {
      type: Array,
      default: () => []
    },
    // 表示需要特殊定制的配置
    extraOption: {
      type: Object,
      default: () => ({})
    },
    timeline: {
      type: Boolean,
      default: false
    },
    useSelf: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    seriesData: {
      deep: true,
      handler() {
        this.updateChartView()
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$el)
    this.updateChartView()
    window.addEventListener('resize', this.handleWindowResize)
    this.addChartResizeListener()
    this.chart.on('click', params => {
      this.$emit('echartClick', params)
    })
    this.chart.on('mouseover', params => {
      this.$emit('echartOver', params)
    })
    this.chart.on('mouseout', params => {
      this.$emit('echartOut', params)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleWindowResize)
    if (this.chart) {
      this.chart.off('click')
    }
  },
  methods: {
    assembleDataToOption() {
      return merge(
        {},
        BASIC_OPTION,
        // { color: COLOR_ARRAY },
        {
          series: this.seriesData
        },
        this.extraOption
      )
    },
    assembleTimelineToOption() {
      return merge(
        {},
        { baseOption: BASIC_OPTION },
        this.extraOption
      )
    },
    assembleAllToOption() {
      return merge(
        {},
        BASIC_OPTION,
        this.extraOption
      )
    },
    addChartResizeListener() {
      const instance = ResizeListener({
        strategy: 'scroll',
        callOnAdd: true
      })

      instance.listenTo(this.$el, () => {
        if (!this.chart) return
        this.chart.resize()
      })
    },
    updateChartView() {
      if (!this.chart) return
      let fullOption = this.assembleDataToOption()
      if (this.useSelf) {
        fullOption = this.assembleAllToOption()
      } else if (this.timeline) {
        fullOption = this.assembleTimelineToOption()
      }
      this.chart.setOption(fullOption, true)
    },
    handleWindowResize() {
      if (!this.chart) return
      this.chart.resize()
    },
    getChart() {
      return this.chart
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>

2配置内容（js文件default_option）

const BASIC_OPTION = {
  title: {
    show: false
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  legend: {
    type: 'plain',
    textStyle: {
      color: '#fff'
    }
  },
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(155, 155, 155, 0.50)',
    borderWidth: 0,
    padding: 8,
    textStyle: {
      color: '#fff'
    }
  },
  xAxis: {
    type: 'category',
    show: false,
    axisLine: {
      lineStyle: {
        color: 'rgba(255,255,255, 0.3)'
      }
    },
    axisTick: {
      lineStyle: {
        color: 'rgba(255,255,255, 0.3)'
      }
    },
    axisLabel: {
      color: '#fff'
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    show: false,
    type: 'value',
    axisLine: {
      lineStyle: {
        color: 'rgba(255,255,255, 0.3)'
      }
    },
    axisTick: {
      lineStyle: {
        color: 'rgba(255,255,255, 0.3)'
      }
    },
    axisLabel: {
      color: '#fff'
    },
    splitLine: {
      show: false
    }
  }
}
export {
  BASIC_OPTION
}

3页面使用

    <chart
      ref="chart"
      :series-data="seriesData"
      :extra-option="extraOption"
      @echartClick="echartClick"
    />

  data() {
    return {
      extraOption: {},
      seriesData: [],
    };

echats init中使用
this.extraOption=原来配置的option
this.seriesData=原来配置的series

点击事件与其他事件都有封装可直接使用
echartClick（）{
}