前端Echart框架学习 Echart编写简易信号监控页面 Echart官方简介 改造官方示例,实时更新数据 效果图 推荐使用官方例子 Echart编写简易信号监控页面 最近需要测试设备的信号数据,经常往返服务器,接口查询来汇总数据,既繁琐又费力,索性动手开发一个网页版的数据监控界面,省点摸鱼时间。 Echart官方简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 改造官方示例,实时更新数据 开发思路:生成数据,并限制数据长度,使用Array对象的unshift()和pop()方法模拟先进先出,去除陈旧数据,并更新最新数据源。并通过计数方式限制图形显示长度。并通过setInterval()来setOption,达到实时更新的效果,代码非常简单。 var myChart =echarts.init(document.getElementById('main')); var singal var allHeartData=[] var current="" var count=0 function changeData(data){ var time=new Date() current=String(time.getMinutes())+&#