Synchnorized 高阶函数 js快速排序 控制跳转 Markdown ios performance matrix knockoutjs process yii binding vue开发 angularjs教程 etl数据 mysql升序 mysql修改字段值 linux查询文件内容 kubernetes视频 python功能 java编程环境 java开发环境安装 java8时间 java平台 java怎么编程 bat脚本 qq免安装版 c语言指数函数 刷声望 陌陌电脑直播设置教程 深渊碎片 不屑表情包 proteus8 r330不能识别墨盒 骰子gif cdlinux教程 黑客攻防技术宝典 思源黑体 兽之祝福 苹果手机怎么微信双开
当前位置: 首页 > 学习教程  > 编程语言

Echart编写简易信号监控页面

2021/4/19 22:30:31 文章标签:

前端Echart框架学习Echart编写简易信号监控页面Echart官方简介改造官方示例,实时更新数据效果图推荐使用官方例子Echart编写简易信号监控页面 最近需要测试设备的信号数据,经常往返服务器,接口查询来汇总数据,既繁琐又费力&#…

前端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())+":"+String(time.getSeconds())
    if(count==200){
        data.pop()
        count-=2;
    }
    count+=1;
    data.unshift([current,Math.floor(Math.random() * 100)])
    console.log(count)
    var dateList = data.map(function (item) {
        return item[0];
    });
    var valueList = data.map(function (item) {
        return item[1];
    });
    option = {
        // Make gradient line here
        visualMap: [{
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
        }, {
            show: false,
            type: 'continuous',
            seriesIndex: 1,
            dimension: 0,
            min: 0,
            max: dateList.length - 1
        }],

        title: [{
            left: 'center',
            text: '设备心跳数据'
        }],
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [{
            data: dateList
        }],
        yAxis: [{
            splitLine: {show: false}
        }],
        grid: [{
            bottom: '60%'
        }, {
            top: '60%'
        }],
        series: [{
            type: 'line',
            showSymbol: false,
            data: valueList
        }]
        };
        this.myChart.setOption(option)
}
setInterval(() => {
    this.changeData(allHeartData)
}, 100);

效果图

可惜无法录制GIF,实际效果就像心电图。
在这里插入图片描述

推荐使用官方例子

写完后发现官方有类似的例子,推荐使用。
[https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2]


本文链接: http://www.dtmao.cc/news_show_942197.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?