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