前言
项目中需要展示一个仪表盘,仪表盘的数据来源是动态获取的,根据获取到的数据变化,仪表盘动态展示当前的数据
在之前的一篇文章中介绍了如何在 vue3 + ts 的环境中使用 echarts 的图表,图表类型是基础的仪表盘 — gauge
这是相关的文章 vue3+ts 之echarts的使用 以及 echarts 图表初始不渲染,代码改变之后才渲染
一、实现效果
当传给图表组件的数据发生变化,图表组件自行渲染展示动画
二、使用步骤
1.实现思路
在一开始使用的时候展示的是一个固定数据的仪表盘渲染,但是需要让它根据实时数据动起来
起初的想法是 echarts 作为这么完善的一个图表组件库,肯定是有这方面的功能的,所以就去官网开始找相关的 API
在官方找到了关于 数据动态更新 的部分
这里表示可以通过 setOption 来传入新的数据, echarts 拿到数据后会和之前的数据做对比,找到当中的差异并自己通过合适的动画来渲染展示
所以 echarts 来动态展示数据,只需要再获取到新的数据之后再次 setOption 就可以了
2.上代码 ! ~
代码如下：以下是封装的图表子组件 RemainGauge.vue 的代码
<!--这里是关于满仓率的图表-->
<template>
<div ref="chartRef" :style="{ width, height }"></div>
</template>
<script lang="ts" setup>
import {
Ref, ref, watch } from 'vue';
import {
useECharts } from '/@/hooks/web/useECharts';
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
ratio: Number,
});
const chartRef = ref<HTMLDivElement | null>(null);
const {
setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
tooltip: {
formatter: '{a}<br/>{b} : {c}',
},
series: [
{
name: '满仓率',
type: 'gauge',
progress: {
show: true,
itemStyle: {
color: '#165DFF',
},
},
pointer: {
width: 5,
itemStyle: {
color: '#165DFF',
},
},
detail: {
valueAnimation: true,
formatter: function (value) {
if (isNaN(value)) {
return '加载中';
} else{
return value + '%';
}
},
fontSize: 20,
},
data: [
{
value: props.ratio,
},
],
},
],
});
},
{
immediate: true },
);
watch(
() => props.ratio,
() => {
setOptions(
{
series: {
data: [
{
value: props.ratio,
},
],
},
},
false,
);
},
);
</script>
父组件引用子组件位置的代码
<RemainGuage :ratio="panelObj.fullPercent" />
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 特此记录下
总结
以上就是我自己在使用 echarts 的 仪表盘 gauge 图表动态展示数据的相关分析,如有不准确之处,欢迎各位指正吖 ~