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]
                        },

                    ]
                },
            ]
        }
    );