在vue项目中封装echarts的正确姿式

时间  2021-08-13 标签 vue 数组 安全 app echarts less dom ide 函数

为何须要封装echarts

  • 每一个开发者在制做图表时都须要从头至尾书写一遍完整的option配置，十分冗余
  • 在同一个项目中，各种图表设计十分类似，甚至是相同，不必一直作重复工做
  • 可能有一些开发者忘记考虑echarts更新数据的特性，以及窗口缩放时的适应问题。这样致使数据更新了echarts视图却没有更新，窗口缩放引发echarts图形变形问题

我但愿这个echarts组件能设计成什么样

  • 业务数据和样式配置数据分离，我只须要传入业务数据就好了
  • 它的大小要彻底由使用者决定
  • 不会由于缩放出现变形问题，而是能很好地自适应
  • 有时候某个图表的样式可能有点不同，但愿能保留本身配置样式的灵活性
  • 不管传入什么数据都能正确地更新视图
  • 若是我传入的数据为空，能展现一个空状态

公共组件结构建议

  • 当你把它书写为一个公共组件时，我我但愿它应该是这样：将单独机械的配置表独立成一份文件，暴露一个必要的vue单文件，同时携带一份README说明文档，固然，文档里面须要有关于你写的组件的使用示例和入参含义说明，这在大型项目中很是重要。

vue单文件代码

  • echart_pie完整代码以下：
<div class="chart">div>template><script>import { merge } from 'lodash';
import echart from 'echarts';
import { BASIC_OPTION } from './default_option';
import { COLOR_ARRAY } from '../color';
import ResizeListener from 'element-resize-detector';

export default {
  name: 'ChartPie',
  props: {
    seriesData: {
      type: Array,
      required: true,
      default: () => []
    },
    extraOption: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    seriesData: {
      deep: true,
      handler() {
        this.updateChartView();
      }
    }
  },
  mounted() {
    this.chart = echart.init(this.$el);
    this.updateChartView();
    window.addEventListener('resize', this.handleWindowResize);
    this.addChartResizeListener();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleWindowResize);
  },
  methods: {
    /**
     * 将业务数据加入到基础样式配置中
     * @returns {Object} 完整的echart配置
     */
    assembleDataToOption() {
      const formatter = name => {
        const total = this.seriesData.reduce((acc, cur) => acc + cur.value, 0);
        const data = this.seriesData.find(item => item.name === name) || {};
        const percent = data.value
          ? `${Math.round((data.value / total) * 100)}%`
          : '0%';

        return `{a|${name}}{b|${percent}}`;
      };

      return merge(
        {},
        BASIC_OPTION,
        { color: COLOR_ARRAY },
        {
          legend: { formatter },
          series: [{ data: this.seriesData }]
        },
        this.extraOption
      );
    },

    /**
     * 对chart元素尺寸进行监听，当发生变化时同步更新echart视图
     */
    addChartResizeListener() {
      const instance = ResizeListener({
        strategy: 'scroll',
        callOnAdd: true
      });

      instance.listenTo(this.$el, () => {
        if (!this.chart) return;
        this.chart.resize();
      });
    },

    /**
     * 更新echart视图
     */
    updateChartView() {
      if (!this.chart) return;

      const fullOption = this.assembleDataToOption();
      this.chart.setOption(fullOption, true);
    },

    /**
     * 当窗口缩放时，echart动态调整自身大小
     */
    handleWindowResize() {
      if (!this.chart) return;
      this.chart.resize();
    }
  }
};script><style lang="less" scoped>.chart {  width: 100%;  height: 100%;
}style>
  • index完整代码以下：
<van-empty v-if="isSeriesEmpty" />
  <chart-pie v-else v-bind="$props" />template><script>import { isEmpty } from 'lodash';import ChartPie from './echart_pie.vue';export default {  name: 'EchartPie',  components: { ChartPie },  props: ChartPie.props,  computed: {
    isSeriesEmpty() {      return (
        isEmpty(this.seriesData) || this.seriesData.every(item => !item.value)
      );
    }
  }
};script>

关于源码的说明

  • 在源码中，我用到了lodash的一个公共函数merge,它表示递归合并来源对象自身和继承的可枚举属性到目标对象。后续的来源对象属性会覆盖以前同名的属性
  • 另一个有幸被我宠幸的函数是isEmpty，当我传入的业务数据为空时，好比空数组[]、undefined、null时，都会被认为这是一个无数据的状况，这时候咱们就展现一个空状态的组件，它可能由一张背景图构成；
  • 在绑定到具体的DOM元素时，我没有用querySelector选择器去选择一个类或者是用Math.random生成的id，由于这二者都不是绝对可靠的，我直接使用当前vue示例关联的根DOM 元素$el
  • 我监听窗口大小的变化，并为这种状况添加对应的事件处理函数--echarts自带的resize方法，使echarts图形不会变形
  • 将对应DOM的宽高设为100%，让其大小彻底由使用者提供的容器控制
  • setOption方法的第二个参数表示传入的新option是否不与以前的旧option进行合并，默认竟然是false，即合并。这显然不行，咱们须要每次的业务配置都是彻底独立的
  • 命名很是语义化，一看就懂
  • 保留了本身须要单独配置一些定制样式的灵活性，即extraOption

default_option.js应该包括哪些内容

  • 正常状况下暴露一个基础配置BASIC_OPTION就能够了

element-resize-detector是干啥的？

这是一个用于监听DOM元素尺寸变化的插件。咱们已经对窗口缩放作了监听，可是有时候其父级容器的大小也会动态改变的。vue

咱们对父级容器的宽度进行监听，当父级容器的尺寸发生变化时，echart能调用自身的resize方法，保持视图正常。数组

固然，这个不适用于tab选项卡的状况，在tab选项卡中，父级容器从display:none到有实际的clientWidth，可能会比注册一个resizeDetector先完成，因此等开始监听父级容器resize的时候，可能为时已晚。安全

在tab选项卡中很容易出现这种场景：app

看起来很是的逗，只有一点点大。解决这个问题，最有效的方法仍是在切换选项卡时手动去经过ref获取echart实例，并手动调用resize方法，这是最安全的，也是最有效的。echarts

组件使用示例

<div class="echart-pie-wrap">
  <echart-pie :series-data="dataList" :extra-option="extraOption" />div>template><script>import EchartPie from '@/components/echarts/echart_pie';export default{  components: { EchartPie },
  data() {    return {      dataList: [
        {          name: "西瓜",          value: 20
        },
        {          name: "橘子",          value: 13
        },
        {          name: "杨桃",          value: 33
        }
      ],      extraOption: {          color: [ '#fe883a', '#2d90d1','#f75981', '#90e2a9']
      }
    }
  }
}script><style lang="less" scoped>.echart-wrapper {  width: 300px;  height: 300px;  margin: 10px auto;
}style>

效果图

  • 当数据正常时，效果以下 less

  • 当无数据时，效果以下dom

关于灵活性

这里面提供的封装只是一种大概的思路，实际项目中，可能会与这里出现误差。软件开发没有银弹可言，很是适合我这个项目的，可能在细节上不太适合看这篇文章的你。可是思路是相似的，能够对照着作一些调整。ide

联系我们 沪ICP备13005482号-10