Echats折线图原数据基础上动态刷新
简介:
鄙人是对大数据有着浓厚兴趣的小草根码农，大数据少不了的就是数据可视化，最近研究了一下如何动态实时刷新Echats的图表，查了很多资料，并进入的Echats的官网，直接copy人家的动态图表但是不知道为啥什么，放在自己的电脑上就不是动态的，甚至都系显示不出来，只好自己动手研究了，经过自己的努力终于实现了echats动态刷新折线图，直接上代码喽!
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--<script type="text/javascript" src="jquery.js"></script>-->
<script type="text/javascript" src="echarts.js"></script>//引入echats.js包
<body>
<div id="main" style="width: 1000px;height:600px;"></div>
</body>
</html>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));//这个是必须要写的
var ydata = [4,8,1,4,2,3,7,1,7,8];//定义一个ydata数据
option = {
title: {
text: '时刻动态数据',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {
data:['最新成交价', '预购队列']
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
dataZoom: {
show: true,
start: 0,//图表下放的显示数量
end: 100,
// filterMode: 'empty'
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data:
(function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 1000);
}
return res;
})()
}
],
yAxis: [
{
type: 'value',
scale: true,
name: '价格',
max: 30,
min: 0,
boundaryGap: [0.2, 0.2]
}
],
series: [
{
name:'最新成交价',
type:'line',//修改显示图表的类型该类型为折线图
data:ydata//为轴的数值
}
]
};
setInterval(function() {
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');//获取时间将非数字去掉
ydata.shift();//删除掉第一个值
ydata.push((Math.random() * 10 + 5).toFixed(1) - 0);//随机生成一个数添加到末尾
option.xAxis[0].data.shift();//获取x坐标轴的位置数据删除掉第一个值
option.xAxis[0].data.push(axisData);//获取当前的时间将其放置在最后一个位置
myChart.setOption({ //重新对表的一些属性进行修改,下面就是对option重新修改的内容
xAxis: [{
type: 'category',
boundaryGap: true,
data:option.xAxis[0].data}],
series: [{
name:'最新成交价',
type:'line',
data:ydata//为轴的数值
}]
});
}, 3000);//setInterval()方法的使用具体请百度，设置时间每三秒进行数据的更新
myChart.setOption(option); // 使用刚指定的配置项和数据显示图表。
</script>
上面就是代码部分，有不懂得一起学习咨询我，哈哈，网上的资料都不是很全，这方面，也不是都很准确，希望我能给你带来帮助!
效果截图: