Echarts 展示两条动态数据曲线 |
您所在的位置：网站首页 › echarts动态设置series › Echarts 展示两条动态数据曲线 |
Echarts 展示两条动态数据曲线
|
利用Echarts 展示两条动态数据曲线，每1秒刷新一下数据，在echart官网例子基础上修改，修改了仿真数据的生成方式、生成数量，曲线数量，最总效果图如下：
详细代码如下： 遇到的主要问题点， 1，在生成模拟数据时，数据源格式很重要，格式不正确，无法正常显示。 new Date(parseInt(sttimestamp+i*1000)).toLocaleString('chinese',{hour12:false});上述语句 toLocaleString()，显示的结果 2021/8/21 下午4:07:40，若要显示为24小时制，需要添加参数 'chinese',{hour12:false}。 2，数据横轴显示格式，默认会把毫秒显示出来，且不统一：
在横轴的样式里增加格式限制，即可按要求显示： axisLabel:{ formatter:'{HH}:{mm}:{ss}' //显示24小时制，两位分钟，两位秒 }完整代码如下： var data = []; var data2= []; var curtimestamp = Date.parse(new Date()); var sttimestamp = curtimestamp - 100*1000 ; var temptime; var tm = Date.now() // 生成初始数据100条 for (var i = 0; i < 100; i++) { temptime = new Date(parseInt(sttimestamp+i*1000)).toLocaleString('chinese',{hour12:false}); data.push({name:temptime,value:[temptime,Math.random()*10+150]}); data2.push({name:temptime,value:[temptime,Math.random()*10+100]}); } // 显示设置 option = { title: { text: '实时数据展示', left:'5%' }, tooltip: { trigger: 'axis', formatter: function (params) { params = params[0]; var date = new Date(params.name); return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]; }, axisPointer: { animation: false } }, xAxis: { type: 'time', splitLine: { show: false }, minInterval: 5, axisLabel:{ formatter:'{HH}:{mm}:{ss}' } }, yAxis: { axisLine:{ show:true }, type: 'value', boundaryGap: [0, '100%'], splitLine: { show: false } }, series: [{ name: 'LineA', type: 'line', showSymbol: false, hoverAnimation: false, data: data },{ name: 'LineB', type: 'line', color:'#2f4f4f', showSymbol: false, hoverAnimation: false, data: data2 }] }; setInterval(function () { // for (var i = 0; i < 5; i++) { curtimestamp = Date.parse(new Date()); temptime = new Date(parseInt(curtimestamp)).toLocaleString('chinese',{hour12:false}); data.shift(); data.push({name:temptime,value:[temptime,Math.random()*10+150]}); data2.shift(); data2.push({name:temptime,value:[temptime,Math.random()*10+120]}); // } myChart.setOption({ series: [{ data: data },{ data: data2 } ] }); }, 1000);
|
【本文地址】
今日新闻 |
推荐新闻 |