怎么让 echarts 图表动起来？定时器解决它 —— 大屏展示案例（动态仪表盘、动态柱状图）

该案例为了实现效果采用的是随机生成数据，比较适用于偏向展示效果的静态页面如门户网站的首页、登录页等等。颜色样式自调。

需要注意在有些项目中仪表盘可能无法正常显示，这是因为你在项目中引入的 echarts 版本太低，需要引入新版本 echarts5。

目录

一、案例效果

二、实现步骤

1.创建页面结构

2.创建方法绘制图表并调用

3.在option设置图表及其样式

三、要点知识总结

四、完整代码+详细注释

一、案例效果

做案例之前正常引入 echarts 图表，echarts 依赖包的下载和安装此处省略，详情可参见文章：

在Vue项目中引入 ECharts 3D 路径图 Flights GL（需安装echarts、echarts-gl、jQuery依赖，已踩坑）_来跟小马一起探讨前端知识吧~-CSDN博客在Vue项目中引入 echarts 3D 路径图 Flights GL；echarts依赖包的下载方式；echarts-gl依赖包的下载方式；jQuery依赖包的下载方式；https://blog.csdn.net/weixin_53072519/article/details/122087289

二、实现步骤

1.创建页面结构

两个带有 id 名的容器，样式自定。

#gauge {width: 8rem;height: 5.5rem;position: absolute;top: 2.55rem;left: 5.7rem;}#bar {width: 8rem;height: 2.2rem;position: relative;top: 2.8rem;left: 5.7rem;}

2.创建方法绘制图表并调用

methods 中分别创建绘制图表的方法，然后在挂载阶段 mounted 中分别调用。

export default {data() {return {};},methods: {//绘制柱状图draw_bar() {let myEchart = this.$echarts.init(document.getElementById("bar"));var option = {};myEchart.setOption(option);},//绘制仪表盘draw_gauge() {let myEchart = this.$echarts.init(document.getElementById("gauge"));var option = {};myEchart.setOption(option);},},mounted() {//调用绘制图表的方法this.draw_bar();this.draw_gauge();},};

3.在option设置图表及其样式

可直接将官网案例的代码复制到 option 处后自行修改。

三、要点知识总结

实现图表动态变化的原理其实就是基于定时器 setInterval() ，它与 setTimeout() 区别是 setInterval() 是周期性的，按照给定的时间周期反复循环的执行包含在它里面的程序，而setTimeout() 是在给定的时间后执行一次程序就结束。

所以我们的做法就是，设置循环定时器，每隔一定的时间便获取一次图表中的数据且数据完全随机，并重新显示图表，然后在设置合适的动画和间隔时间，这样就实现了图表的动态变化。

比如柱状图的定时器设置如下：

setInterval(() => { for (let i = 0; i <= 11; i++) {//定义i确保柱图的每一项都能被刷新 option.series[0].data[i] = (Math.round(Math.random() * 600) + 1); //数据随机取值1-600,不要为0,如果为0的话该柱就会消失 } myEchart.setOption(option, true); //每刷新一次重新显示图表 }, 200);

每隔200毫秒重新定义一次柱状图中的数据(option.series[0].data[i]) ，此处为1-600的随机数，每次数据更新后重新显示图表(myEchart.setOption(option, true))，这样就达到了数据不停变化的效果。

然后就是动画，在echarts官网中配置项文档中有该类属性，可以设置仪表盘指针的变换速度、柱图中的柱变换速度等。

最后将动画时长与定时器间隔时长合理搭配即可实现动态效果。

四、完整代码+详细注释

export default {data() {return {}},methods: {//绘制柱状图draw_bar() {let myEchart = this.$echarts.init(document.getElementById("bar"));var option = {xAxis: {type: 'category',data: ['银宝', '个险', '团险', '银宝', '个险', '团险', '银宝', '个险', '团险', '银宝', '个险', '团险'],axisLine: {show: true,onZero: true,symbol: "none",lineStyle: {color: "#e5e5e5"}},axisTick: {show: false},},yAxis: {show: false,type: 'value',axisTick: {show: false},axisLine: {show: false},axisLabel: {show: false}},//图表与容器的位置关系grid: {left: '3%', // 与容器左侧的距离right: '3%', // 与容器右侧的距离top: '11%', // 与容器顶部的距离bottom: '12%', // 与容器底部的距离},series: [{data: [520, 600, 450, 380, 370, 510, 120, 200, 150, 620, 600, 450,],type: 'bar',backgroundStyle: {color: "rgba(111, 111, 22, 1)"},//坐标轴显示器的文本标签label: {show: true,position: 'top',color: '#e5e5e5'},//柱条颜色itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgba(0,234,223,0.9)' // 0% 处的颜色}, {offset: 1, color: 'rgba(0,234,223,0.3)' // 100% 处的颜色}],global: false // 缺省为 false}},animationEasing: "linear",animationEasingUpdate: "quadraticIn",//数据更新时的缓动效果animationDurationUpdate: 300,//数据更新动画的时长animation: true//开启动画}]};//此处使用定时器setInterval循环刷新柱状图的值,每次刷新数据均不同setInterval(() => {for (let i = 0; i  {option.series[0].data[0].value = (Math.random() * 150).toFixed(2) - 0; //表盘1option.series[1].data[0].value = (Math.random() * 180).toFixed(2) - 0; //表盘2option.series[3].data[0].value = (Math.random() * 8).toFixed(2) - 0; //表盘3myEchart.setOption(option, true); //每次刷新后重新显示图表}, 500);}},mounted() {//调用绘制图表的方法this.draw_bar();this.draw_gauge()}}#gauge {width: 8rem;height: 5.5rem;position: absolute;top: 2.55rem;left: 5.7rem;}#bar {width: 8rem;height: 2.2rem;position: relative;top: 2.8rem;left: 5.7rem;}