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

网友投稿 1205 2022-05-28

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

需要注意在有些项目中仪表盘可能无法正常显示,这是因为你在项目中引入的 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 名的容器,样式自定。

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

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

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 图表动起来?定时器解决它 —— 大屏展示案例(动态仪表盘、动态柱状图)

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

animationDuration: 1020

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

四、完整代码+详细注释

大数据 容器

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:207_mysql_innodb_5_Innodb_redo1
下一篇:GaussDB(DWS) 数据库智能监控系统告警框架上线啦!
相关文章