vue2.x-echarts公共组件封装--简易篇（3d柱状图，炫酷仪表盘，折线，曲线图）

更新一下之前写的echarts简单图表公共组件的封装，该组件可以实现自适应展示效果

废话不多说，上代码：

vue-echarts通用组件

下面的一个混入文件是用来实现，窗口改变echarts自适应的js文件：

// 混入代码 resize-mixins.js
import { debounce } from '@/utils/index';
const resizeChartMethod = '$__resizeChartMethod';

export default {
  data() {
    // 在组件内部将图表init的引用映射到chart属性上
    return {
      chart: null,
    };
  },
  created() {
    window.addEventListener('resize', this[resizeChartMethod], false);
  },
  beforeDestroy() {
    window.removeEventListener('reisze', this[resizeChartMethod]);
  },
  methods: {
    // 通过lodash的防抖函数来控制resize的频率
    [resizeChartMethod]: debounce(function() {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100),
  },
};

接下来是debounce.js

export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result;

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp;

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

下面直接上代码：父组件调用+展示效果

截图：

下面是一个仪表盘的效果：请看代码：

看图：

 请注意：

简单说明一下，仪表盘本身就是一组数据，也就是series这个数组里面只有一项，但是如果如上图所示，要显示两个刻度盘，所以我们就要用了两组数据，第一组把刻度值修改成文字，第二组显示刻度值，第二组数据通过位置偏移来调节，图中的指针我是用的官方给的svg矢量图，这个是必须要用矢量图

下面是3d柱状图：

请看图：

 补充一下：我没有显示底部切片，是因为如果数值为0时，底部切片和顶部切片会显示，效果不是很好，所以我选择了不显示底部切片，如果小伙伴有更好的解决办法，欢迎留言，共同进步o

说明：

为什么series里面每一类会有重复的数据，因为我们要实现的是3d柱状图，简单理解一下，就是：我们把3d柱状图一分为三份，第一份就是底部的切片，第二份就是中间的柱子，第三份就是顶部的切片，这样就是三份数据

今天的分享就到这里把，如果小伙伴有更好的解决办法，欢迎留言，共同进步o