vue中将Echarts封装成自定义指令v-echarts

当项目中出现大量echarts图表展示时，每个图表都需要进行echarts初始化，引入配置项，会造成大量冗余的重复代码，因此将echarts封装成自定义指定，方便使用；

示例：直接在vue中使用 v-echarts="option"

<template>
    <div v-echarts="option" style="width:100%;height:400px" />
<template>

开始封装

1、创建自定义指令文件 utils/directives/echarts.js

//utils/directives/echarts.js
import * as echarts from 'echarts';
const options = {
  deep: true,
  // 插入父节点时调用
  inserted: function(el, binding) {
    const myChart = echarts.init(el);
    const option = binding.value;
    myChart.showLoading();
    myChart.setOption(option, true);
    myChart.hideLoading();
    window.addEventListener('resize', function() {
      myChart.resize();
    });
  },
  update: function(el, binding) {
    const myChart = echarts.getInstanceByDom(el);
    const option = binding.value;
    myChart.showLoading();
    myChart.setOption(option, true);
    myChart.hideLoading();
    window.addEventListener('resize', function() {
      myChart.resize();
    });
  }

};
export {
  options
};

2、在main.js注册成全局使用

//main.js
import { options } from '@utils/directives/echarts';
Vue.directive('echarts', options);

3、组件中使用

<template>
  <div class="box">
    <div v-echarts="option1" style="width:100%;height:400px" />
  </div>
</template>
<script>
import option from './baseOption';
export default {
  data() {
    return {
      option1: {},
      option: option
    };
  },
  mounted() {
    this.getData1();
  },
  methods: {
    getData1() {
      const option1 = {
        title: { ...this.option.title },
        tooltip: { ...this.option.tooltip },
        legend: { ...this.option.legend, orient: 'horizontal', width: '100%', top: 0, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        xAxis: { ...this.option.xAxis, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        yAxis: { ...this.option.yAxis },
        series: [
          {
            name: '未处理',
            type: 'bar',
            bottom: '10%',
            barWidth: 32,
            color: '#8DCBE3',
            label: { show: true, formatter: '{c}', color: 'inherit', position: 'top' },
            data: [120, 200, 150, 80, 70, 110, 130]
          }
        ]
      };
      this.option1 = option1;
    }
  }
};
</script>

4、抽离出公共的配置项baseOption.js供组件页面中引用

//baseOption.js
export default {
  title: {
    text: '',
    left: 'left',
    textStyle: {
      color: '#666666',
      fontSize: 14,
      fontWeight: 'normal'
    },
    subtext: '',
    subtextStyle: {
      color: '#CCCCCC',
      fontSize: 14,
      fontWeight: 'normal'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 16,
    icon: 'circle',
    orient: 'vertical',
    right: 'right',
    top: '10%',
    textStyle: {
      fontSize: 14,
      color: '#333'
    },
    data: []
  },
  xAxis:
  {
    type: 'category',
    axisTick: { show: false },
    axisLine: {
      lineStyle: {
        color: '#CCCCCC',
        type: 'dashed'
      }
    },
    axisLabel: {
      color: '#666666'
    },
    data: []
  },
  yAxis:
  {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: '#CCCCCC',
        type: 'dashed'
      }
    }
  }
};