echarts中如何使用timeline组件

1.吃碗面

这里关于echarts3 官网的示例我不得不吐槽一下，逼格真高!一小部分示例动不动数据就是国家统计局搞出来的，你脸真大。当然他们做的示例的确是很好，这一点毫无疑问。当我看了echarts3关于timeline的使用，我就觉得我有必要写一篇Echarts中timeline组件的使用。这玩意东西时间久了，真心容易忘，就当是做个备忘吧。

  这里还是要再说两句，百度的echarts 官方文档写很简略，然而事例代码又比较难，冗长，看一遍看两遍基本上不能让人马上就会用，尤其是这个timeline组件，所以我写个事例希望帮助其他人，也能快速上手这个timeline。

2.官方解释 Echarts Timeline组件

timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。

适用的范围是：非动态数据，坐标轴的数据已经确定好数据才便于展示。当然要实现动态数据也是可行的。

官方注意的：

使用注意与最佳实践：

• 公有的配置项，推荐配置在 baseOption 中。timeline 播放切换时，会把 options 数组中的对应的 option，与 baseOption 进行 merge 形成最终的 option。

• options 数组中，如果某一数组项中配置了某个属性，那么其他数组项中也必须配置某个属性，而不能缺省。否则这个属性的执行效果会遗留。

• 复合 option 中的 options 不支持 merge。

  也就是说，当第二（或三、四、五 ...）次 chart.setOption(rawOption) 时，如果 rawOption 是复合 option（即包含 options 列表），那么新的rawOption.options 列表不会和老的 options 列表进行 merge，而是简单替代。当然，rawOption.baseOption 仍然会正常和老的 option 进行merge。

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。

5.示例下载

代码下载地址  echarts使用timeline_echartstimeline,echartstimeline属性-Web开发代码类资源-CSDN下载

6.总结：

喝水不忘挖井人，这个百度echarts团队做的真心好，向实实在在做事的人致敬

作者：张林

标题:echarts中如何使用timeline组件 原文地址:http://blog.csdn.net/kebi007/article/details/53167003

转载随意注明出处

有兴趣的可以关注一下我的微信公众号【dotNET全栈开发】，分享一些前端知识和面试的题目。

​