echarts散点图搭配时间轴

1.echarts搭配时间轴可以很直观的看到数据的动态变化，那么如何实现呢？请看代码。

2.这次做的散点图是学生的成绩随着时间的变化图，就是学生的成绩随着时间的变化而变化。

x轴是时间，年月日，和时间轴是相同的。

3.具体步骤

1）.需要一个容器，这个上次说过了。

 2）.实现的js

坐标轴的样式，

x轴、y轴和时间轴的实现

option = {
baseOption: {
//时间轴的实现代码
timeline: {
axisType: 'category',
//是否自动播放
autoPlay: true,
inverse: false,
playInterval: 1000,
//时间轴位置设置
left: 20,
bottom: 30,
width: 520,
height: null,
label: {
normal: {
textStyle: {
color: 'white'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
symbol: 'none',
lineStyle: {
color: 'white'

},
checkpointStyle: {
color: '#bbb',
borderColor: '#777',
borderWidth: 2
},
//控制按钮的样式
controlStyle: {
showNextBtn: false,
showPrevBtn: false,
normal: {
color: '#666',
borderColor: '#666'
},
emphasis: {
color: '#aaa',
borderColor: '#aaa'
}
},
data: []
},
top: 323,
backgroundColor: '#404a59',
xAxis: {
type: 'category',
name: '时间',
nameGap: 25,
//由于x轴和时间是一样的，将x轴隐藏起来
show: false,
nameLocation: 'middle',
nameTextStyle: {
fontSize: 10
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
boundaryGap: false,
data: ['2015/11/04', '2016/01/20', '2016/04/28', '2016/05/30', '2016/06/12', '2016/06/26']
},
yAxis: {
type: 'value',
name: '考试成绩',
max: 140,
min: 85,
nameTextStyle: {
color: '#ccc',
fontSize: 8
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
splitLine: {
show: false
},
axisLabel: {
formatter: '{value} 分'
}
},
series: [{
type: 'scatter',
symbolSize: '30',
itemStyle: {
normal: {
color: '#F5A630'
}
},
data: []

}],
animationDurationUpdate: 1000,
animationEasingUpdate: 'quinticInOut'
},
options: []
};
播放的循环控制：

 

需要的data数据：
data = {
"students": ["学生1", "学生2", "学生3", "学生4", "学生5", "学生6"],
"timeline": ['2015/11/04', '2016/01/20', '2016/04/28', '2016/05/30', '2016/06/12', '2016/06/26'],
"series": [
[
['2015/11/04', 122, "学生1"],
['2016/01/20', 130, "学生2"],
['2016/04/28', 126.5, "学生3"],
['2016/05/30', 118.5, "学生4"],
['2016/06/12', 90, "学生5"],
['2016/06/26', 125, "学生6"]

],
[
['2015/11/04', 131.5, "学生1"],
['2016/01/20', 128.5, "学生2"],
['2016/04/28', 133, "学生3"],
['2016/05/30', 127, "学生4"],
['2016/06/12', 117, "学生5"],
['2016/06/26', 122.5, "学生6"]

],
[
['2015/11/04', 133.5, "学生1"],
['2016/01/20', 135.5, "学生2"],
['2016/04/28', 136, "学生3"],
['2016/05/30', 132, "学生4"],
['2016/06/12', 136.5, "学生5"],
['2016/06/26', 121, "学生6"]

],
[
['2015/11/04', 134.5, "学生1"],
['2016/01/20', 134.5, "学生2"],
['2016/04/28', 135, "学生3"],
['2016/05/30', 136.5, "学生4"],
['2016/06/12', 123, "学生5"],
['2016/06/26', 132, "学生6"]

],
[
['2015/11/04', 132.75, "学生1"],
['2016/01/20', 132.75, "学生2"],
['2016/04/28', 129.75, "学生3"],
['2016/05/30', 129, "学生4"],
['2016/06/12', 120.75, "学生5"],
['2016/06/26', 126.75, "学生6"]

],
[
['2015/11/04', 122.5, "学生1"],
['2016/01/20', 131.5, "学生2"],
['2016/04/28', 135, "学生3"],
['2016/05/30', 131.5, "学生4"],
['2016/06/12', 124.5, "学生5"],
['2016/06/26', 126.5, "学生6"]

]
]
}
 
4.效果图：

 

 
posted @ 2017-05-23 17:13  gz_blog  阅读(11498)  评论(0)  编辑  收藏  举报