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

为什么需要封装echarts

每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置，十分冗余

在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作

可能有一些开发者忘记考虑echarts更新数据的特性，以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新，窗口缩放引起echarts图形变形问题

 

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

业务数据和样式配置数据分离，我只需要传入业务数据就行了

它的大小要完全由使用者决定

不会因为缩放出现变形问题，而是能很好地自适应

有时候某个图表的样式可能有点不一样，希望能保留自己配置样式的灵活性

无论传入什么数据都能正确地更新视图

如果我传入的数据为空，能展示一个空状态

 

公共组件结构建议

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

 

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，当我传入的业务数据为空时，比如空数组[]、undefined、null时，都会被认为这是一个无数据的情况，这时候我们就选用一个空状态的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，如下：

 

组件使用示例

<template>   <div class="echart-wrapper">     <chart-pie :>="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>

 

效果图

 

当数据正常时，效果如下

 

 

当无数据时，效果如下

 

 

可以更进一步优化的地方

我这一手封装已经是上乘之作，如果一定说哪里不足的话，我认为在resize的节流方面可以考虑引入lodash中的throttle节流函数，进一步优化性能。