echarts二次封装

目录结构

基础echarts代码（BaseCharts.vue）

<template>
  <div :class="className" :style="{ height: chartData.height, width: chartData.width }" />
</template>

<script>
import echarts from 'echarts';
import 'echarts/theme/macarons';
import resize from './mixins/resize';

export default {
  name: 'BaseChart',
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    chartData: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },
  mixins: [resize],
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler() {
        this.initChart();
      },
    },
  },
  mounted() {
    this.initChart();
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.setOptions(this.chartData);
    },
    setOptions({ series, grid, yAxis, xAxis, legend, tooltip, radar } = {}) {
      this.chart.setOption({
        tooltip,
        grid,
        xAxis,
        yAxis,
        series,
        legend,
        radar,
      });
    },
  },
};
</script>

mixins文件代码

import _ from 'lodash';

export default {
  data() {
    return {
      $_sidebarElm: null,
      $_resizeHandler: null,
    };
  },
  mounted() {
    this.initListener();
  },
  activated() {
    if (!this.$_resizeHandler) {
      // avoid duplication init
      this.initListener();
    }

    // when keep-alive chart activated, auto resize
    this.resize();
  },
  beforeDestroy() {
    this.destroyListener();
  },
  deactivated() {
    this.destroyListener();
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.$_resizeHandler();
      }
    },
    initListener() {
      this.$_resizeHandler = _.debounce(() => {
        this.resize();
      }, 100);
      window.addEventListener('resize', this.$_resizeHandler);

      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0];
      this.$_sidebarElm &&
        this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler);
    },
    destroyListener() {
      window.removeEventListener('resize', this.$_resizeHandler);
      this.$_resizeHandler = null;

      this.$_sidebarElm &&
        this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler);
    },
    resize() {
      const { chart } = this;
      chart && chart.resize();
    },
  },
};

页面使用封装的 echarts

页面中引用：chartThreeData 为封装后传入的数据

this.chartThreeData = {
        width: '100%',
        height: 'calc(100% - 50px)',
        textStyle,
        grid: {
          top: '22%',
          left: '15%',
          right: '10px',
          bottom: '18%',
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#ffffff',
            fontSize,
            fontFamily,
          },
          data: yearList,
        },
        yAxis: {
          splitNumber: 3,
          boundaryGap: [0, '10%'],
          type: 'value',
          ...nameInfo,
          name: '单位（次）',
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: '#ffffff',
            fontSize,
            fontFamily,
          },
        },
        series: [
          {
            name: '数据专线业务数',
            type: 'line',
            data: specialLine,
            itemStyle: {
              color: '#8c3633',
            },
          },
        ],
        tooltip: {
          show: true,
          trigger: 'axis',
          padding: 15,
          textStyle,
          formatter: renderTooltip,
        },
      };