Echarts中timeline组件的使用

最近的实习有涉及数据可视化的工做，须要用到图表库， 这里用的是百度的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]
                        },

                    ]
                },
            ]
        }
    );