您好,欢迎来到六三科技网。
搜索
您的当前位置:首页ECharts3实现动态数据+时间坐标轴的操作

ECharts3实现动态数据+时间坐标轴的操作

来源:六三科技网

对ECharts3官网中动态数据+时间坐标轴实例进行了修改,X轴为当前时间,并数据累积。

可在ECharts3实例中的代码框中粘贴直接查看效果。

function randomData() {
 now = new Date(+now + 1000);
 value = value + Math.random() * 21 - 10; 
 return {
 name: now.toString(),
 value: [
 now, 
 Math.round(value)
 ]
 }
}var data = [];var now = new Date();var value = Math.random() * 1000;

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
 }
 },
 yAxis: {
 type: 'value',
 boundaryGap: [0, '100%'],
 splitLine: {
 show: false
 }
 },
 series: [{
 name: '模拟数据',
 type: 'line',
 showSymbol: false,
 hoverAnimation: false,
 data: data
 }]
};
setInterval(function () {
 //data.shift();
 data.push(randomData());
 myChart.setOption({
 series: [{
 data: data
 }]
 });
}, 1000);

Copyright © 2019- xue63.com.cn 版权所有

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务