在vue项目中封装echarts的正确姿势 | 您所在的位置:网站首页 › vue3封装Echarts组件 › 在vue项目中封装echarts的正确姿势 |
说明
随着echarts版本的更迭,很多书写方式都有了变化,本文于2021/04/25更新了一次,具体可查看源码:github源码地址 为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记考虑echarts更新数据的特性,以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新,窗口缩放引起echarts图形变形问题 我希望这个echarts组件能设计成什么样 业务数据和样式配置数据分离,我只需要传入业务数据就行了 它的大小要完全由使用者决定 不会因为缩放出现变形问题,而是能很好地自适应 有时候某个图表的样式可能有点不一样,希望能保留自己配置样式的灵活性 无论传入什么数据都能正确地更新视图 如果我传入的数据为空,能展示一个空状态 公共组件结构建议 当你把它书写为一个公共组件时,我我希望它应该是这样:将单独机械的配置表独立成一份文件,暴露一个必要的vue单文件,同时携带一份README说明文档,当然,文档里面需要有关于你写的组件的使用示例和入参含义说明,这在大型项目中非常重要。import { merge } from "lodash";import * as echarts from "echarts";import { BASIC_OPTION } from "./ default_option";import { COLOR_ARRAY } from "../color";import ResizeListener from "element-resize-detector";export default { name: " ChartPie", props: { // 正常的业务数据,对应echarts饼图配置中series[0].data seriesData: { type: Array, required: true, default: () => [], }, // 表示需要特殊定制的配置 // 一般UI会规定一个统一的设计规范(比如颜色,字体,图例格式,位置等) // 但不排除某个图标会和设计规范不同,需要特殊定制样式,所以开放这个配置,增强灵活性 extraOption: { type: Object, default: () => ({}), }, }, data() { return { chart: null, }; }, watch: { seriesData: { deep: true, handler() { this.updateChartView(); }, }, }, mounted() { this.chart = echarts.init(this.$el); this.updateChartView(); window.addEventListener("resize", this.handleWindowResize); this.addChartResizeListener(); }, beforeDestroy() { window.removeEventListener("resize", this.handleWindowResize); }, methods: { /** * 将业务数据加入到基础样式配置中 * @returns {Object} 完整的echart配置 */ assembleDataToOption() { // 这部分的图例formatter取决于UI要求,如果你的项目中不需要,就可以不写formatter // 由于echarts版本的迭代,这里的写法也有稍许改变 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 `${name} ${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(); }, },}; .chart { width: 100%; height: 100%;} index完整代码如下:import { isEmpty } from "lodash";import ChartPie from "./ echart_pie.vue";import { Empty } from "vant";export default { name: " EchartPie", components: { ChartPie, Empty }, props: ChartPie.props, computed: { // 针对饼图数据是不是无效的判断 isSeriesEmpty() { return ( isEmpty(this.seriesData) || this.seriesData.every((item) => !item.value) ); }, },}; 关于源码的说明 在源码中,我用到了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元素尺寸变化的插件。我们已经对窗口缩放做了监听,但是有时候其父级容器的大小也会动态改变的。 我们对父级容器的宽度进行监听,当父级容器的尺寸发生变化时,echart能调用自身的resize方法,保持视图正常。 当然,这个不适用于tab选项卡的情况,在tab选项卡中,父级容器从display:none到有实际的clientWidth,可能会比注册一个resizeDetector先完成,所以等开始监听父级容器resize的时候,可能为时已晚。 在tab选项卡中很容易出现这种场景: 看起来非常的逗,只有一点点大。解决这个问题,最有效的方法还是在切换选项卡时手动去通过ref获取echart实例,并手动调用resize方法,这是最安全的,也是最有效的。 组件使用示例import EchartPie from "@/ components/echart_pie";export default { components: { EchartPie, }, data() { return { dataList: [ { name: " 西瓜", value: 20, }, { name: "橘子", value: 13, }, { name: "杨桃", value: 33, }, ], extraOption: { color: ["#fe883a", "#2d90d1", "#f75981", "#90e2a9"], }, }; },};.echart-pie-wrap { display: flex; justify-content: center; align-items: center; width: 90vw; height: 90vh; margin: 20px auto;} 效果图 当数据正常时,效果如下
这里面提供的封装只是一种大概的思路,实际项目中,可能会与这里出现偏差。软件开发没有银弹可言,非常适合我这个项目的,可能在细节上不太适合看这篇文章的你。但是思路是类似的,可以对照着做一些调整。 |
CopyRight 2018-2019 实验室设备网 版权所有 |