最近的实习有涉及数据可视化的工作,需要用到图表库, 这里用的是百度的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]
},
]
},
]
}
);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。