echarts - 折线图 - 每秒刷新数据并显示
function randomData() { now = new Date(+now + oneDay); value = value + Math.random() * 21 - 10; var valueName = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate() + ' ' + (now.getHours() >= 10 ? now.getHours() : '0' + now.getHours()) + ':' + (now.getMinutes() >= 10 ? now.getMinutes() : '0' + now.getMinutes()) + ':' + (now.getSeconds() >= 10 ? now.getSeconds() : '0' + now.getSeconds()); return { name: now.toString(), value: [ valueName, Math.round(value) ] } } var data = []; var now = +new Date(); var oneDay = 1000; //var oneDay = 24 * 3600 * 1000; var value = Math.random() * 1000; for (var i = 0; i < 60; i++) { data.push(randomData()); } var temp = 59; option = { title: { text: '动态数据 + 时间坐标轴' }, 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 }, triggerEvent: true }, yAxis: { type: 'value', boundaryGap: [0, '100%'], splitLine: { show: false } }, series: [{ name: '模拟数据', type: 'line', showSymbol: false, hoverAnimation: false, markPoint: { data: [ [{ symbol: 'none', x: '95%', yAxis: data[temp].value[1] }, { symbol: 'circle', label: { normal: { position: 'start', formatter: '实时数据\n{c}' } }, name: '实时数据', value: data[temp].value[1], xAxis: data[temp].value[0], yAxis: data[temp].value[1] }] ] }, data: data }] }; setInterval(function() { for (var i = 0; i < 5; i++) { data.shift(); data.push(randomData()); } //alert(data[999].name) myChart.setOption({ series: [{ data: data, markLine: { data: [ [{ symbol: 'none', x: '95%', yAxis: data[temp].value[1] }, { symbol: 'circle', label: { normal: { position: 'start', formatter: '实时数据\n{c}' } }, name: '实时数据', value: data[temp].value[1], xAxis: data[temp].value[0], yAxis: data[temp].value[1] }] ] } }] }); }, 1000);
作者:三小
声明:原创博客请在转载时保留原文链接或者在文章开头加上本人博客地址,如发现错误,欢迎批评指正。凡是转载于本人的文章,不能设置打赏功能,如有特殊需求请与本人联系!