vue echarts 组件封装

echarts组件

vue-echarts.js

import echarts from 'echarts';
//使用ResizeObserver制作响应式Vue组件
import ResizeObserver from 'resize-observer-polyfill';

const loadingOption = {
  text: '努力加载中',
  color: '#409eff',
  textColor: '#04beb4',
  maskColor: 'rgba(255, 255, 255, 0.8)',
  zlevel: 0
};

export default {
  // 传入值
  props: {
    option: Object,//数据
    theme: String,// 主题
    groupId: String,// 分组
  },
  mounted() {
    this.refreshChart();
    this.ro = new ResizeObserver(([entry]) => {
      if (entry.contentRect.width && entry.contentRect.height && this.chart && !this.resizing) {
        this.resizing = true;
        // 动画控制
        requestAnimationFrame(() => {
          if (this.chart) this.chart.resize();//改变图表尺寸
          this.resizing = false;
        });
      }
    });

    this.ro.observe(this.$el);
  },
  destoryed() {
    // 实例销毁后调用
    if (this.chart) {
      this.chart.dispose();
      this.chart = undefined;
    }
    if (this.io) {
      this.ro.disconnect();
      this.ro = undefined;
    }
  },
  watch: {
    theme(value, oldValue) {
      if (oldValue === undefined && value !== undefined) {
        this.refreshChart();
      }
    },
    option(value, oldValue) {
      if (oldValue === undefined && value !== undefined) {
        this.refreshOption();
      }
    },
  },
  methods: {
    refreshOption() {
    //刷新数据
      if (!this.chart) return;
      if (this.option && Object.keys(this.option).length) {
        this.chart.setOption(this.option, true);//设置图表配置项
        if (this.$el.clientHeight) this.chart.resize();//根据元素大小重新配置图表尺寸
        this.chart.hideLoading();//隐藏动画加载的效果
      } else {
        // 没有数据配置，显示loading状态
        this.chart.showLoading('default', loadingOption);
      }

    },
    refreshChart() {
    // 刷新整个图
      if (this.chart) {
        this.chart.dispose();//销毁实例
        this.chart = undefined;
      }
      this.chart = echarts.init(this.$el, this.theme || 'shine');//没有实例，用echarts.init 创建一个新的实例
      this.chart.group = this.groupId;//设置图表的分组，用于联动

      this.refreshOption();


      // http://echarts.baidu.com/api.html#events
      //广播出所有echarts 支持的事件 使得触发父组件的自定义事件
      [
        'click',
        'dblclick',
        'mousedown',
        'mouseup',
        'mouseover',
        'mouseout',
        'globalout',

        'legendselectchanged',
        'legendselected',
        'legendunselected',
        'legendscroll',
        'datazoom',
        'datarangeselected',
        'timelinechanged',
        'timelineplaychanged',
        'restore',
        'dataviewchanged',
        'magictypechanged',
        'geoselectchanged',
        'geoselected',
        'geounselected',
        'pieselectchanged',
        'pieselected',
        'pieunselected',
        'mapselectchanged',
        'mapselected',
        'mapunselected',
        'axisareaselected',
        'focusnodeadjacency',
        'unfocusnodeadjacency',
        'brush',
        'brushselected',
      ].forEach(x => this.chart.on(x, event => this.$emit(x, event, this)));
    }
  }
};

vue-echarts.vue

<template><div class="vue-echarts"></div></template>
<style lang="scss" src="./vue-echarts.scss"></style>
<script src="./vue-echarts.js"></script>

echarts公共配置

getOption（常用的line，bar）也可以分开配置

export default function () {
  return {
    title: {
      text: ''
    },
    $legend: {
      show: true,
      type: 'scroll',
    },
    legend: {},
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        }
      },
    },
    toolbox: {
      right: 30,
      feature: {
        magicType: {
          show: false, type: ['line', 'bar']
        },
        restore: {
          show: false
        },
      }
    },
    grid: {
      left: '4%',
      right: '4%',
      top: 32,
      bottom: 10,
      containLabel: true,
    },
    $themeColor: ['#00C8C1', '#fdd67c'],
    axisPointer: {
      show: true,
      label: {
        backgroundColor: '#777',
      },
    },
    xAxis: {
      show: true,
      type: 'category',
      data: [],
      scale: true,
      minInterval: 1,
      nameTextStyle: {
        fontSize: 13,
        color: 'black',
        align: 'center',
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: '#838383',
        }
      },
      axisLabel: {
        color: '#838383',
      },
      axisPointer: {},
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(0,102,99,0.16)',
        }
      },
      min: 'dataMin',
      max: 'dataMax',
    },
    yAxis: {
      show: true,
      nameLocation: 'end',
      nameGap: 10,
      scale: true,
      minInterval: 0,
      axisLine: {
        onZero: false,
        lineStyle: {
          color: '#838383',
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#00c8c1',
          opacity: 0.2,
        }
      },
      nameTextStyle: {
        fontSize: 13,
        color: 'black',
        align: 'center',
      },
      axisLabel: {
        color: '#838383',
      },
      axisPointer: {
        label: {},
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['#fff', 'rgba(2, 200, 193, 0.03)'],
        }
      }
    },
    dataZoom: [{
      type: 'inside',
    }],
    $series: {
      label: {
        normal: {
          show: false,
          position: 'top',
        }
      },
      stacked: false,
      polar: false,
      connectNulls: true,
    },
    $markPoint: {
      silent: false,
      data: [],
      label: {
        normal: {
          show: false
        }
      },
      itemStyle: {
        normal: {
          color: '#f33206',
        }
      },
      symbol: 'circle',
      symbolSize: 8,
    },
    $themeColors: ['#C1232B', '#27727B', '#FCCE10', '#E87C25', '#B5C334', '#FE8463', '#9BCA63', '#FAD860', '#60C0DD']
  };
}

在要展示echarts的组件中

<vue-echarts :option="option" ref="chart"></vue-echarts>

import VueEcharts from '@/components/global/vue-echarts/vue-echarts.vue';
import getOption from '@/views/charts/commonOption.js';

data: {
    option: null
},
components: {
    VueEcharts
},

getOption是封装的公共echarts配置，然后this.option = getOption() 赋值，并根据不同图的标题，类型等改写对应配置

配置完后刷新数据
setTimeout(() => {
    this.$refs.chart.refreshOption();
});