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.效果图：
