eCharts.js使用心得
Posted 键盘敲飞
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了eCharts.js使用心得相关的知识,希望对你有一定的参考价值。
前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464
前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464
最近刚刚做了一个项目,需求是使用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使用心得的主要内容,如果未能解决你的问题,请参考以下文章
python测试开发django-149.ECharts 生成柱状图
python测试开发django-147.ECharts 生成饼图