eCharts.js使用心得

使用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();}}

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

转载于:https://www.cnblogs.com/TigerZhang-home/p/7239877.html

eCharts.js使用心得相关推荐

echarts.js 做图表的插件
<scripttype="text/javascript"src="{uiurl()}echarts/echarts.js"></script ...
ECharts.js学习（三）
2019独角兽企业重金招聘Python工程师标准>>> ECharts.js 交互组件 ECharts.js有很多的交互组件,一般经常用到的组件有这些: title:标题组件,包 ...
php k线图 echarts,利用ECharts.js画K线图的方法示例
前言最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比较简单,不过数据这块需要在后 ...
echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.
1.错误描述 echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 2.错误原因 <!DOCTYPE html>& ...
ECharts.js学习（二）动态数据绑定
Echarts 数据绑定简单的统计表已经可以生成,不过之前图标数据都是直接写在参数里面的,而实际使用中,我们的数据一般都是异步读取的.EChart.js对于数据异步读取这块提供了异步加载的方法. 绑 ...
Echarts.js+jquery.js+china.js实现中国疫情地图
目录一.程序代码二.源码下载一.程序源码 <!DOCTYPE html> <html lang="en"><head><meta c ...
利用百度Echarts.js生成雷达图
一.下载地址:http://echarts.baidu.com/ 二.看文档(必须的).可选择的看,先完成想要的功能,再扩展. 三.使用推荐的模块化单文件引入. 在在dist文件夹下会有 echa ...
echarts.js 官网
echarts.js 官网 http://echarts.baidu.com/ 效果: 代码: updated:function(){this.$nextTick(function () {/**** ...
全国省份GDP动态统计图表echarts.js插件
下载地址echarts.js插件实现的全国宏观经济指标可视化图表,js全国省份GDP动态统计图表插件. dd:

eCharts.js使用心得

eCharts.js使用心得相关推荐

最新文章

热门文章