vue3+ts 之echarts 仪表盘 gauge 的使用之让图表动起来的使用以及踩坑记录

本文链接：https://blog.youkuaiyun.com/YZRHANYU/article/details/129640881

文章讲述了在Vue3+TS环境下，利用Echarts的setOption方法和notMerge参数动态更新数据，使仪表盘图表根据实时数据变化展示动画效果。重点在于通过watch监听数据变化，并正确设置setOption参数实现图表的平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3+ts 之echarts的使用之让图表动起来 --- 仪表盘

前言
一、实现效果
二、使用步骤
总结

前言

项目中需要展示一个仪表盘,仪表盘的数据来源是动态获取的,根据获取到的数据变化,仪表盘动态展示当前的数据
在之前的一篇文章中介绍了如何在 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({