为什么需要封装echarts
- 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余
- 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作
- 可能有一些开发者忘记考虑echarts更新数据的特性,以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新,窗口缩放引起echarts图形变形问题
我希望这个echarts组件能设计成什么样
- 业务数据和样式配置数据分离,我只需要传入业务数据就行了
- 它的大小要完全由使用者决定
- 不会因为缩放出现变形问题,而是能很好地自适应
- 有时候某个图表的样式可能有点不一样,希望能保留自己配置样式的灵活性
- 无论传入什么数据都能正确地更新视图
- 如果我传入的数据为空,能展示一个空状态
公共组件结构建议
- 当你把它书写为一个公共组件时,我我希望它应该是这样: 将单独机械的配置表独立成一份文件,暴露一个必要的vue单文件,同时携带一份README说明文档,当然,文档里面需要有关于你写的组件的使用示例和入参含义说明,这在大型项目中非常重要。
vue单文件代码
- 完整代码如下:
<template> <div></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> <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>
效果图
-
当数据正常时,效果如下
-
当无数据时,效果如下
可以更进一步优化的地方
- 我这一手封装已经是上乘之作,如果一定说哪里不足的话,我认为在resize的节流方面可以考虑引入lodash中的throttle节流函数,进一步优化性能。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 强大的姿势感知模型用于姿势不变的人脸识别
- 从姿势到图像——基于人体姿势引导的时尚图像生成算法
- 行人重识别告别辅助姿势信息,港中文、商汤等提出姿势无关的特征提取GAN
- 穿越边界的姿势
- 日志打印的正确姿势!
- 修复缺陷的正确姿势
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。