echarts实现数据刷新时折现随时间变化的动态效果(从右至左移动)
<div id="main" style="height:300px;"></div>var myChart = echarts.init(document.getElementById('main'));var date = [];var randomData = [];for(var i = 0;
·
<div id="main" style="height:300px;"></div>
var myChart = echarts.init(document.getElementById('main'));
var date = [];
var randomData = [];
for(var i = 0; i<30; i++){
date.push('第' + (i+1) + '天');
randomData.push(Math.floor(Math.random()*100));
}
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: date
},
yAxis: {
type: 'value'
},
series: [{
data: randomData,
type: 'line'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
var len = date.length;
setInterval(function(){
randomData.push(Math.floor(Math.random()*100));
randomData.shift();
date.push(len++);
date.shift();
myChart.setOption({
xAxis: {
data: date
},
series: [{
data: randomData
}]
});
}, 2000)

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)