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.示例下載

代碼下載地址 ?http://download.csdn.net/detail/kebi007/9774736

6.總結：

喝水不忘挖井人，這個百度echarts團隊做的真心好，向實實在在做事的人致敬

作者：張林

標題:echarts中如何使用timeline組件?原文地址:http://blog.csdn.net/kebi007/article/details/53167003

轉載隨意注明出處

轉載于:https://www.cnblogs.com/zhangmumu/p/7374779.html

總結

以上是生活随笔為你收集整理的echarts中如何使用timeline组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。