echarts 时间曲线图_echarts - 折线图 - 每秒刷新数据并显示
functionrandomData() {now= new Date(+now +oneDay);value= value + Math.random() * 21 - 10;var valueName = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' +now.getDate()+ ' ' + (now.getHours() >
functionrandomData() {
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 = +newDate();var oneDay = 1000;//var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;for (var i = 0; i < 60; i++) {
data.push(randomData());
}
option={
title: {
text:'动态数据 + 时间坐标轴'},
tooltip: {
trigger:'axis',
formatter:function(params) {
params= params[0];var date = newDate(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() {for (var i = 0; i < 1; i++) {
data.shift();
data.push(randomData());
}var temp = 59;//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);
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)