最近刚刚做了一个项目,需求是使用eCharts实现实时监控,可以动态的增加和删除数据,可以全屏展示,趁着现在还没忘干净,整理一下使用过程中出现的问题和经验。可能有分析的不到位的地方,不喜勿喷!

一、图表的配置,配置方面没什么好说的,参数官方文档中都有解释,时间轴的生成也是参考的官方实例,只是增加了一个刷新频率cycle参数,项目中要求的。

option = {
backgroundColor: '#f0f0f0',
animation: false,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {
data:legendData
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
saveAsImage: {}
}
},
dataZoom: {
show: true,
start: 0,
end: 100
},
xAxis: {
type: 'category',
boundaryGap: false,
data: (function (){
var now = new Date();
var res = [];
var len = 100;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 1000 * cycle);
}
return res;
})()
},
yAxis: [
{
type: 'value',
scale: true,
boundaryGap: [0, '100%'],
name: unit,
splitLine: {
show: true
}
}
],
series: (function(){
var serie = [];
for(i=0; i<testData.length; i++){
var item = {
name: testData[i].name,
type: 'line',
showSymbol: false,
data: testData[i].data
}
serie.push(item);
}
return serie;
})()
};

二、初始化实例

var myChart = echarts.init(document.getElementById('line-main'));

三、setOption

if (option && typeof option === "object") {
myChart.setOption(option, true);
}

四、下面来说动态增加和删除折线,说是删除图表中的元素,其实本质上都是对数据的操作。

eoUnit.id = eoVal;
eoUnit.name = eoText;
eoUnit.data = eoData;
testData.push(eoUnit);
legendData.push(eoText);

所谓增加折线,其实就是向数组里添加一条数据。

删除也是,将数组中对应的数据删除掉,但是要多执行一步操作

myChart.setOption(optiondel, true);

如果不执行这个的话,图表上的监控折线虽然停止了运动,但是之前的线会留在图上,所以这步操作是必须的,也是值得注意的一点。

五、开始和停止监控,这块没什么好讲的,就是用到了两个定时器,一个负责记录剩余时长,一个用来执行刷新函数。

//开始
timer1 = setInterval(leftTimeFun,1000);//剩余时长
timer = setInterval(monitorFun,1000 * cycle);//监控频率
//停止
clearInterval(timer);
clearInterval(timer1);

六、监控函数,这部分功能应该算是核心功能了(有些变量名改了),其实这个也是对数组的操作,通过定时器定时执行,每次从服务器获取一条最新数据插入到数组,从数组弹出最早的一条数据,形成一个队列式操作,展现在图表上就是实时监控的效果,setOption 中设置的都是有所改变的项,每操作一次,都要 setOption 。

//监测函数
function monitorFun(){
var fdgal = $("#fdgd").val();
$.ajax({
type:"post",
url: "aaaaa.action",
async:false,
timeout:1000,
data:{"aaaaList":aassList,"aaddid":ssssVal},
traditional: true,
dataType: "json",
success: function(data){
var jsonData = eval("("+data+")");
var rightP = $(".datacol p");
for(i=0; i<testData.length; i++){
testData[i].showSymbol = false;
for (var j = 0; j < jsonData.length; j++){
if(jsonData[j].moId == testData[i].id){
testData[i].data.shift();
if(jsonData[j].value==""){
testData[i].data.push(barData[i]);
$(rightP[i]).text(barData[i]);
}else{
testData[i].data.push(jsonData[j].value);
$(rightP[i]).text(jsonData[j].value);
}
}
}
}
}
});
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
myChart.setOption({
legend: {
data:legendData
},
xAxis: {
data: (function (){
var now = new Date();
var res = [];
var len = 100;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 1000 * cycle);
}
return res;
})()
},
series: (function(){
var serie = [];
for(i=0; i<testData.length; i++){
var item = {
name:testData[i].name,
type: 'line',
showSymbol: false,
data:testData[i].data
}
serie.push(item);
}
return serie;
})()
});
option.xAxis.data.shift();
option.xAxis.data.push(axisData);
cycleCount -= cycle;
if(cycleCount < 0){
pause();
}
}

有不明确的地方可以交流一下,随时恭候,不对的地方也请指正,共同进步。

前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464

前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464

eCharts.js使用心得的更多相关文章

  1. echarts.js使用心得--demo

    首先要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术. 废话不多时 , 直接开始. 第一步: 导入echarts.js文件 下载地址:http://e ...

  2. 百度ECHARTS 饼图使用心得 处理data属性

    做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...

  3. echarts3 -arcgis echarts.js修改

     在echarts.js中修改修改 clone 方法    其中 source instance of Array 修改为Object.prototype.toString.call(source)  ...

  4. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  5. echarts.js 做图表的插件

    <scripttype="text/javascript"src="{uiurl()}echarts/echarts.js"></script ...

  6. echarts.js(图表插件)2.0版会导致 ZeroClipboard.js(复制插件)失效,3.0版未知。

    解决方法:ZeroClipboard.js先于echarts.js加载.

  7. 图表工具--- ECharts.js学习(一) 简单入门

    ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...

  8. 关于echarts.js 柱形图

    echarts.js官网: http://www.echartsjs.com/index.html 这是我所见整理最详细echarts.js 柱形图博客: https://blog.csdn.net/ ...

  9. 前端数据可视化echarts.js

    一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...

随机推荐

  1. 保护REST API/Web服务的最佳实践

    在设计REST API或服务时,是否存在处理安全性(身份验证,授权,身份管理)的最佳实践? 在构建SOAP API时,您可以使用WS-Security作为指导,有关该主题的文献很多.我发现了有关保护R ...

  2. maven配置好了之后再次开机找不到命令

    问题: 昨天还运行的好好的,今天突然又报错了, mvn不是内部或外部命令,也不是可运行程序或批处理文件 原因: 环境配置问题,windows7和windows10稍微有一点不一样,对照下面配置看哪里不 ...

  3. jQuery综述

    jQuery是一个轻量级JavaScript库 它可以进行如下操作: 选取HTML元素 对HTML元素进行操作 对CSS进行操作 编写HTML事件函数 JavaScript特效 HTML DOM AJ ...

  4. springboot从入门到精通(三)

    再开始第三节之前,先补充一下第二节里出现的小问题,就是springboot的application.properties,我在文件中添加了server.port=9090这个参数,但是启动项目后并未生 ...

  5. 转:解决Arcsde用户锁定的问题

    采用arcgis平台做GIS应用的人,可能偶尔碰到sde用户锁定(Arccatalog 或应用程序异常退出的时比较多)的问题,往往咱们解决的办法是重启sde服务.如果一个服务器上有多个连接时,重启服务 ...

  6. check_mk raw 1.2.8p17 FAQ

    Q:有没有已经实施的案例 A: http://wiki.lustre.org/Check_MK/Graphite/Graphios_Setup_Guide Q:check-mk-agent怎么安装? ...

  7. ajax异步请求的使用情景

    先上代码 var sysAllowedExts; $.ajax({ url: url+"/getExtSetting", //请求的url地址 dataType: "js ...

  8. 基于FPGA的VGA显示设计(二)

    上一篇:基于FPGA的VGA显示设计(一)     参照 CrazyBingo 的 基于FPGA的VGA可移植模块终极设计代码  的工程代码风格,模块化处理了上一篇的代码,并增加了一点其它图形. 顶层 ...

  9. ListView、DataGrid 不显示列标题

    <!--ListView不显示列标题--> <Style TargetType="{x:Type GridViewColumnHeader}"> <S ...

  10. java Date equals 的坑

    今天在JDK6上做开发,遇到一个很诡异的问题. Domain中一个实体是Date,称为变量 a, 使用Calendar构造出来的Date,称为变量b, 虽然都是同一天,比如 2016-11-11 00 ...