前言

项目中需要展示一个仪表盘,仪表盘的数据来源是动态获取的,根据获取到的数据变化,仪表盘动态展示当前的数据
在之前的一篇文章中介绍了如何在 vue3 + ts 的环境中使用 echarts 的图表,图表类型是基础的仪表盘 — gauge
这是相关的文章 vue3+ts 之echarts的使用以及 echarts 图表初始不渲染,代码改变之后才渲染

一、实现效果

当传给图表组件的数据发生变化,图表组件自行渲染展示动画
在这里插入图片描述

二、使用步骤

1.实现思路

在一开始使用的时候展示的是一个固定数据的仪表盘渲染,但是需要让它根据实时数据动起来
起初的想法是 echarts 作为这么完善的一个图表组件库,肯定是有这方面的功能的,所以就去官网开始找相关的 API

在官方找到了关于数据动态更新的部分
在这里插入图片描述

这里表示可以通过 setOption 来传入新的数据, echarts 拿到数据后会和之前的数据做对比,找到当中的差异并自己通过合适的动画来渲染展示
所以 echarts 来动态展示数据,只需要再获取到新的数据之后再次 setOption 就可以了

2.上代码 ! ~

代码如下：以下是封装的图表子组件 RemainGauge.vue 的代码

父组件引用子组件位置的代码

3.代码分析

在以上子组件代码中通过 watch 来监听传过来的数据 ratio 是否有变化,如果有变化就执行 setOption

setOptions({series: {data: [{value: props.ratio, },],},},false,);

因为仪表盘中需要改变的数据仅仅只有一个,那就是 series.data.value 所以再次 setOption 的时候只需要将这一个数据传过去就好了
其中 setOption 的参数官网是如下图介绍的
在这里插入图片描述
大多数场景下使用 setOption 都是只用了第一个参数
而让 echart 动起来的关键在于再次执行 setOption 的时候的第二个参数 – notMerge (这是我自己在本次使用踩坑过程中的理解,如果有误,欢迎大家指正 ~ )

根据官网描述 , notMerge 为 false 会和之前的组件进行差异对比,ECharts找到两组数据之间的差异然后通过合适的动画去表现数据的变化。这也就是我所期望的
如果为 true 会将之前的组件删除,重新根据新的 option 创建新的组件
当时这里我遇到一个问题 : 官方描述 notMerge 不设置的时候默认为 false ,我所需要的也正是 notMerge = false 但是我实际使用过程中,不对 notMerge 进行设置的时候却报错了
在这里插入图片描述
在设置为 false 之后,就一切正常了,在这小小的踩了个坑 TAT 特此记录下