欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在vue项目中怎么封装echarts图表控件

程序员文章站 2022-06-19 10:34:41
为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记考虑echarts更新数据的特性,以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没 ......

为什么需要封装echarts

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

我希望这个echarts组件能设计成什么样

  • 业务数据和样式配置数据分离,我只需要传入业务数据就行了
  • 它的大小要完全由使用者决定
  • 不会因为缩放出现变形问题,而是能很好地自适应
  • 有时候某个图表的样式可能有点不一样,希望能保留自己配置样式的灵活性
  • 无论传入什么数据都能正确地更新视图
  • 如果我传入的数据为空,能展示一个空状态

公共组件结构建议

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

在vue项目中怎么封装echarts图表控件

vue单文件代码

  • 完整代码如下:
<template>
  <div class="chart"></div>
</template>

<script>
import { merge, isempty } from "lodash";
import echart from "echarts";
import { basic_option, empty_option } from "./default_option";

export default {
  props: {
    // 业务数据
    datalist: {
      type: array,
      default: () => []
    },
    // 特殊的样式定制
    extraoption: {
      type: object,
      default: () => ({})
    }
  },
  data() {
    return {
      chart: null
    };
  },
  methods: {
    /**
     * 将业务数据加入到基础样式配置中
     * @returns {object} 完整的echart配置
     */
    assembledatatooption() {
      return merge(
        {},
        basic_option,
        {
          series: [{ data: this.datalist }]
        },
        this.extraoption
      );
    },

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

      const fulloption = isempty(this.datalist)
        ? empty_option
        : this.assembledatatooption();
      this.chart.setoption(fulloption, true);
    },

    /**
     * 当窗口缩放时,echart动态调整自身大小
     */
    handlewindowresize() {
      if (!this.chart) return;
      this.chart.resize();
    }
  },
  watch: {
    datalist: {
      deep: true,
      handler: () => this.updatechartview
    }
  },
  mounted() {
    this.chart = echart.init(this.$el);
    this.updatechartview();
    window.addeventlistener("resize", this.handlewindowresize);
  },
  beforedestroy() {
    window.removeeventlistener("resize", this.handlewindowresize);
  }
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>

关于源码的说明

  • 在源码中,我用到了lodash的一个公共函数merge,它表示递归合并来源对象自身和继承的可枚举属性到目标对象。后续的来源对象属性会覆盖之前同名的属性
  • 另外一个有幸被我宠幸的函数是isempty,当我传入的业务数据为空时,比如空数组[]undefinednull时,都会被认为这是一个无数据的情况,这时候我们就选用一个空状态的echarts配置,即empty_option
  • 在绑定到具体的dom元素时,我没有用queryselector选择器去选择一个类或者是用math.random生成的id,因为这两者都不是绝对可靠的,我直接使用当前vue示例关联的根dom 元素$el
  • 我监听窗口大小的变化,并为这种情况添加对应的事件处理函数--echarts自带的resize方法,使echarts图形不会变形
  • 将对应dom的宽高设为100%,让其大小完全由使用者提供的容器控制
  • setoption方法的第二个参数表示传入的新option是否不与之前的旧option进行合并,默认居然是false,即合并。这显然不行,我们需要每次的业务配置都是完全独立的
  • 命名非常语义化,一看就懂
  • 保留了自己需要单独配置一些定制样式的灵活性,即extraoption
  • 关于datalist和extraoption的具体含义,使用示例,都放在readme.md文件做详细说明,使用者一看文档就能上手

default_option.js应该包括哪些内容

  • 应该包括两部分:正常情况下的基础配置basic_option,异常情况下(数据为空)的empty_option,如下:

在vue项目中怎么封装echarts图表控件

组件使用示例

<template>
  <div class="echart-wrapper">
    <chart-pie :data-list="piedata" :extra-option="option" />
  </div>
</template>

<script>
import chartpie from "@/components/echarts/echart_pie/echartpie.vue";

export default {
  name: "home",
  data() {
    return {
      // 业务数据
      piedata: [
        {
          name: "西瓜",
          value: 20
        },
        {
          name: "橘子",
          value: 13
        },
        {
          name: "杨桃",
          value: 33
        }
      ],
      // 定制化配置覆盖默认配置
      option: {
        color: ["#e033f7", "#15c28e", "#2267e6"]
      }
    };
  },
  components: {
    chartpie
  }
};
</script>

<style lang="less" scoped>
.echart-wrapper {
  width: 300px;
  height: 300px;
  margin: 10px auto;
}
</style>

效果图

  • 当数据正常时,效果如下 在vue项目中怎么封装echarts图表控件

  • 当无数据时,效果如下 在vue项目中怎么封装echarts图表控件

可以更进一步优化的地方

  • 在resize的节流方面可以考虑引入lodash中的throttle节流函数,进一步优化性能。
  • 内容转自:https://www.cnblogs.com/zhangnan35/p/12680038.html