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

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

废话不多说，上代码：

vue-echarts通用组件

<template>
  <div class="companyList-ctn" :style="{ 'width':'100%','height': '100%' }">
    <div :id="id" :style="{'width':'100%','height': '100%'}"></div>
  </div>
</template>
<script>
let _c = { id: 1 };
import * as echarts from 'echarts';
import echartMixins from "@/utils/resizeMixins";
//引入echart
import 'echarts-gl'
export default {
  mixins: [echartMixins],
  created() {
    _c.id++;
    this.id = "charts_" + _c.id;
  },
  props: {
    echartsData: {
      type: Object,
    },
  },
  data() {
    return {
      myPieChart:'',
      width:'100%',
      height:400+'px'
    };
  },
  computed: {
    heightFun(){
      return this.echartsData.height+'px'
    }
  },
  watch: {
    echartsData:{
         handler(newval, oldVal){
           this.initChart();
         },
         deep:true //true 深度监听
     }
  },
  mounted() {
    // 初始化echarts
    this.$nextTick(()=>{
      this.initChart();
    })
    window.addEventListener('resize',this.initChart,false);
  },
  //vue组件实例销毁之前移除监听事件，避免当我们切换路由时导致vue出现警告：
  //echarts.js?1be7:2160 Uncaught Error: Initialize failed: invalid dom.
  beforeDestroy () {
    window.removeEventListener('resize', this.initChart)
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById(this.id);
      if (this.myPieChart != null && this.myPieChart != "" && this.myPieChart != undefined) {
        this.myPieChart.dispose();//销毁
      }
      this.myPieChart = echarts.init(chartDom);
      this.myPieChart.resize()
      var option=this.echartsData.option
      this.myPieChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.companyList-ctn {
  width: 260px;
  border-radius: 4px;
  // background: white;
  .companyList-oneItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>

下面的一个混入文件是用来实现，窗口改变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;
      }
    }
  };

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

<template>
  <div class="user_protocal_box">
    <!-- 折线图 -->
    <DayLinkRatioCharts :echartsData="dayLinkRatio" />
  </div>
</template>

<script>
import DayLinkRatioCharts from "@/components/charts";
export default {
components: {
    DayLinkRatioCharts 
  },
  data () {
    return {
      dayLinkRatio:{//日环比
        option:{
          tooltip: {
            trigger: "axis",
          },
          legend: {
            //标记属性
            data: ['今日','昨日'],
            orient: "horizontal", //标记排列显示
            top:20, //标记位置
            right:23, //标记位置
            icon:'rect',
            itemWidth: 16,
            itemHeight:3,
            itemGap:16,
            formatter: [//用富文本组件实现图例与文字对齐的关键是富文本的格式转换
              '{a|{name}}'
            ].join('\n'),
            textStyle: {
              color:'rgba(159,216,253,0.6)',
              fontSize:13,
              height:20,//图例字体高度
              lineHeight:22, //图例字体行高
              rich:{//用富文本组件实现图例与文字对齐
                a:{
                  verticalAlign: 'middle'//图例与文字对齐方式
                }
              }
            },
          },
          grid:{
            //绘图区调整
            left:23,
            right:23,
            bottom:20,
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: true,
            data: ["0点","1点","2点","3点","4点","5点","6点","7点","8点","9点","10点","11点","12点","13点","14点","15点","16点","17点","18点","19点","20点","21点","22点","23点"],//x轴数据
            axisLabel: {
              //坐标轴文字显示样式
              lineHeight: 15, //字体行高
              fontSize:13,