React+Echarts 实时数据监控刷新

import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
// 使用样式
import 'echarts/theme/macarons'
import axios from 'axios'
class edg1 extends React.Component {componentDidMount() {var container = document.getElementById('charts');// 初始化echarts对象var myContainer = echarts.init(container);var base = + new Date();var oneDay = 1000;var date = [];var data = [100];var data1 = [10];var data2 = [30];var now = new Date(base);var day = 30;var a = 10;var b = 100;var c = 10;function addData(shift) {now = [now.getFullYear(), now.getMonth() + 1, now.getDate(), now.getHours()].join('/') + ":" + now.getMinutes() + ":" + now.getSeconds();console.log(now)date.push(now);a = a + 1;b = b - 1;data.push(b);data1.push(a);axios.get('/asd/getJiankongData',).then(function (response) {console.log(response.data.height);c=response.data.height;});data2.push(c);if (shift) {date.shift();data.shift();data1.shift();data2.shift();}now = new Date();}for (var i = 0; i < day; i++) {addData();}//设置图标配置项myContainer.setOption({legend: {data: ['出油油位', '入油油位', '管道油位']},tooltip: {trigger: 'axis'},grid: {left: '0%',right: '5%',bottom: '2%',containLabel: true},title: {text: '油罐油位监控'},xAxis: {type: "category",boundaryGap: false,data: date,name: '时间',axisLabel: {interval: 0,rotate: 90}},yAxis: {boundaryGap: [0, '10%'],type: 'value',name:'油位/m'},series: [{name: '出油油位',type: 'line',smooth: true, //数据光滑过度symbol: 'none', //下一个数据点areaStyle: {normal: {color: 'pink'}},data: data},{name: '入油油位',type: 'line',smooth: true, //数据光滑过度symbol: 'none', //下一个数据点areaStyle: {normal: {color: 'pink'}},data: data1},{name: '管道油位',type: 'line',smooth: true, //数据光滑过度symbol: 'none', //下一个数据点areaStyle: {normal: {color: 'pink'}},data: data2}]})setInterval(function () {addData(true);myContainer.setOption({xAxis: {data: date},series: [{name: '出油油位',data: data},{name: '入油油位',data: data1},{name: '管道油位',data: data2}]});}, 1000)// 绘制图表}render() {return (<div id="charts" style={{ width: '80%', height: '80%' }}></div>)}
}
export default edg1

React+Echarts 实时数据监控刷新相关推荐

爱奇艺在日志实时数据监控的探索与实践
- - 2019年6月爱奇艺会员规模突破1亿,爱奇艺的会员服务业务随之迅速增长,同时也带来了机器集群规模的增加,原有的监控体系也暴露出一些问题.数据监控体系是业务维持稳定服务的基石,会员日志监控体系形 ...
echarts 实时数据展示
echarts 实时数据展示 1. 构建一个web项目完成从后台拉取MySQL的数据到前端的准备工作,我自己是用的ssm框架,这里是属于web的工作,不过多赘述. 2.先写一个简单的echart ...
实时监控后台数据 vue_实时数据监控，快速掌握B站爆款视频热度走向
飞瓜数据B站版的数据监控功能提供对B站UP主监控功能,实时掌握UP主视频热度走向和投放效果. 通过监控输入B站视频链接,设定24/48时长开始对其监控.监控开始后在监控报告中查看对应视频的数据曲线变化 ...
vue echarts动态数据定时刷新
关键代码截图完整代码 <template><div class="block"><div :class="className" ...
智能停车系统实时数据监控
随着新世纪经济持续健康快速发展,以及加入WTO后私人购车高峰期的即将到来,交通需求将显著增加,停车设施的水平直接影响到城市的交通运行效率和生活环境品质.停车设施的过度短缺.布局不合理和管理不规范,都将 ...
视频直播：实时数据可视化分析
作者:spiderwu,腾讯 CSIG 高级工程师 1 解决方案描述 1.1 概述本方案结合腾讯云 CKafka.流计算 Oceanus.私有网络 VPC.商业智能分析 BI 等,对视频直播行业数字 ...
爱奇艺的实时数据架构到底有多牛？
点击"开发者技术前线",选择"星标????" 在看|星标|留言, 真爱文章来源于爱奇艺技术产品团队 0 导语生活在信息爆炸时代的我们越来越清晰的认识到海量 ...
C# ASP.NET MVC 之 SignalR 学习实时数据推送显示配合 Echarts 推送实时图表
本文主要是我在刚开始学习 SignalR 的技术总结,网上找的学习方法和例子大多只是翻译了官方给的一个例子,并没有给出其他一些经典情况的示例,所以才有了本文总结,我在实现推送简单的数据后,就想到了如何 ...
用vert.x与echarts开发实时环境监控
本文旨在用vert.x与echarts开发一个实时环境监控demo. vert.x参看http://vertx.io ehcars参看http://echarts.baidu.com/index.ht ...
livecharts中仪表盘_Vue中使用Echarts仪表盘展示实时数据的实现
在vue中echarts仪表盘实时数据彩笔一枚,简单记录一下. 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中. 第一步: 基于准备好的dom,初始化echarts仪表盘实例. ...

React+Echarts 实时数据监控刷新

React+Echarts 实时数据监控刷新相关推荐

最新文章

热门文章