最近的实习有涉及数据可视化的工作，需要用到图表库， 这里用的是百度的echarts，琢磨了一段时间API，总体来说不难，但是百度自己的文档用例不丰富， 大多数只有文字描述（配图都没有），更少有栗子?。 echarts的交互组件中(图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline) ，觉得timeline稍微不一样，而官方的API文档说明比较简略，代码又很冗长。这里就顺手做个小栗子，方便大家快速上手，冗长用例代码即使让人明白了逻辑，但实际操作的时候可能会因为一些小疏忽而无法快速实现效果，这时简洁直观的例子对debug是很有帮助的（弄明白官方文档估计得两小时，看我的例子十分钟差不多了?）timeline组件在Echarts3中有所修改，所以使用这些功能对时候多注意下库的版本，这里使用的公共库是里面的3.1.4版本：?http://cdn.cdnjs.net/echarts/
概念
官方文档的解释是：
timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。
需要注意的是，timeline可在多组数据间进行切换和播放，这里的多组数据是指多组确定的数据，也就是在横纵坐标都已经确定好的多组数据，如果是动态的数据（比如股票的实时变化）timeline就难以表现了，PS：动态数据可以使用计时器setInterval()动态添加来实现。
官方文档参考：? timeline
栗子?
这里用了个实习工作的测试栗子，显示人均GDP排名在两个年份间的切换。自我感觉比官方文档的例子简洁多了，timeline组件的使用之所以与其它组件有点区别，是因为它多了个baseOption的配置， 顾名思义，baseOption是个基本框架，数据的固定部分一般都写在这个框架中的，而options里面装的就是变化的数据。
我的DEMO链接：?Echarts-timeline demo
找虐的请看官方DEMO：?mix-timeline-all
代码说明：
var chart_bar = echarts.init(document.getElementsByClassName('chart')[0])
chart_bar.setOption(
{
//timeline基本配置都写在baseoption 中
baseOption: {
timeline: {
//loop: false,
axisType: 'category',
show: true,
autoPlay: true,
playInterval: 1500,
data: ['1990', '1995']
},
grid: {containLabel: true},
xAxis: [{
type: 'value',
name: '万美元',
max: 150000
},],
yAxis: [{
type: 'category',
inverse: true,
}],
series: [
{
type: 'bar',
},
]
},
//变量则写在options中
options: [
//1990
{
yAxis: [{
data: ['瑞士', '卢森堡', '瑞典', '挪威', '丹麦', '阿联酋', '冰岛', '日本', '美国', '(131)中国']
}],
title: {
text: '1990年统计值'
},
series: [
{
data: [38589.18, 33378.44, 29794.08, 28188.52, 26922.44, 26621.51, 25786.94, 25139.58, 23913.76, 343.3]
},
]
},
//1995
{
yAxis: [{
data: ['卢森堡','瑞士', '日本', '丹麦','挪威','德国', '澳大利亚','瑞典', '荷兰', '(126)中国']
}],
title: {
text: '1995年统计值'
},
series: [
{
data: [51189.75, 48712.21, 42516.46, 35477.69, 34793.77, 31709.25, 30307.42, 29882.78, 28910.83, 604.332]
},
]
},
]
}
);