echarts中如何使用timeline組件

時間 2019-12-13

標籤 echarts 如何使用 timeline 組件简体版

原文原文鏈接

1.吃碗麪

這裏關於echarts3 官網的示例我不得不吐槽一下，逼格真高!一小部分示例動不動數據就是國家統計局搞出來的，你臉真大。固然他們作的示例的確是很好，這一點毫無疑問。當我看了echarts3關於timeline的使用，我就以爲我有必要寫一篇Echarts中timeline組件的使用。這玩意東西時間久了，真心容易忘，就當是作個備忘吧。html

這裏仍是要再說兩句，百度的echarts 官方文檔寫很簡略，然而事例代碼又比較難，冗長，看一遍看兩遍基本上不能讓人立刻就會用，尤爲是這個timeline組件，因此我寫個事例但願幫助其餘人，也能快速上手這個timeline。數組

2.官方解釋 Echarts Timeline組件

timeline 組件，提供了在多個 ECharts option 間進行切換、播放等操做的功能。echarts

適用的範圍是：非動態數據，座標軸的數據已經肯定好數據才便於展現。固然要實現動態數據也是可行的。oop

官方注意的：spa

使用注意與最佳實踐：.net

公有的配置項，推薦配置在 baseOption 中。timeline 播放切換時，會把 options 數組中的對應的 option，與 baseOption 進行 merge 造成最終的 option。code
options 數組中，若是某一數組項中配置了某個屬性，那麼其餘數組項中也必須配置某個屬性，而不能缺省。不然這個屬性的執行效果會遺留。htm
複合 option 中的 options 不支持 merge。blog

也就是說，當第二（或3、4、五 ...）次 chart.setOption(rawOption) 時，若是 rawOption 是複合 option（即包含 options 列表），那麼新的rawOption.options 列表不會和老的 options 列表進行 merge，而是簡單替代。固然，rawOption.baseOption 仍然會正常和老的 option 進行merge。seo

3.示例效果圖

4.示例代碼

        var option = {
            //timeline基本配置都寫在baseoption 中
            baseOption: {
                timeline: {
                    //loop: false,        
                    axisType: 'category',
                    show: true,
                    autoPlay: true,
                    playInterval: 1000,
                    data: ['1', '2', '3']
                },
                grid: { containLabel: true },
                xAxis: [{
                    type: 'category',
                    name: '企業',
                }, ],
                yAxis: { type: 'value', name: 'Mwh' },
                series: [
                    {
                        type: 'line',
                    },
                ],
                tooltip: {}
            },
            //變量則寫在options中
            options:[
                {
                    xAxis: [{
                        data: ['能化國際電力股份有限公司', '大唐國際發電公司', '北京華夏發電公司']
                    }],
                    title: {
                        text: '電量使用總計',
                        subtext: '單位:Mwh'
                    },
                    series: [
                        {
                            data: [120, 450, 140]
                        },
                    ]
                },
                {
                    xAxis: [{
                        data: ['能化國際電力股份有限公司', '大唐國際發電公司', '北京華夏發電公司']
                    }],
                    title: {
                        text: '電量使用總計',
                        subtext: '單位:Mwh'
                    },
                    series: [
                        {
                            data: [530, 130, 780]
                        },
                    ]
                },
      {
          xAxis: [{
              data: ['能化國際電力股份有限公司', '大唐國際發電公司', '北京華夏發電公司']
          }],
          title: {
              text: '電量使用總計',
              subtext: '單位:Mwh'
          },
          series: [
              {
                  data: [560, 350, 180]
              },

          ]
      },
            ]
        }

timeline.data 中的每一項，對應於 options 數組中的每一個 option 。