1.吃碗面

這里關(guān)于echarts3 官網(wǎng)的示例我不得不吐槽一下，逼格真高!一小部分示例動(dòng)不動(dòng)數(shù)據(jù)就是國(guó)家統(tǒng)計(jì)局搞出來的，你臉真大。當(dāng)然他們做的示例的確是很好，這一點(diǎn)毫無疑問。當(dāng)我看了echarts3關(guān)于timeline的使用，我就覺得我有必要寫一篇Echarts中timeline組件的使用。這玩意東西時(shí)間久了，真心容易忘，就當(dāng)是做個(gè)備忘吧。

? 這里還是要再說兩句，百度的echarts 官方文檔寫很簡(jiǎn)略，然而事例代碼又比較難，冗長(zhǎng)，看一遍看兩遍基本上不能讓人馬上就會(huì)用，尤其是這個(gè)timeline組件，所以我寫個(gè)事例希望幫助其他人，也能快速上手這個(gè)timeline。

2.官方解釋 Echarts Timeline組件

timeline?組件，提供了在多個(gè) ECharts?option?間進(jìn)行切換、播放等操作的功能。

適用的范圍是：非動(dòng)態(tài)數(shù)據(jù)，坐標(biāo)軸的數(shù)據(jù)已經(jīng)確定好數(shù)據(jù)才便于展示。當(dāng)然要實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)也是可行的。

官方注意的：

使用注意與最佳實(shí)踐：

• 公有的配置項(xiàng)，推薦配置在?baseOption?中。timeline?播放切換時(shí)，會(huì)把?options?數(shù)組中的對(duì)應(yīng)的?option，與?baseOption?進(jìn)行 merge 形成最終的?option。

• options?數(shù)組中，如果某一數(shù)組項(xiàng)中配置了某個(gè)屬性，那么其他數(shù)組項(xiàng)中也必須配置某個(gè)屬性，而不能缺省。否則這個(gè)屬性的執(zhí)行效果會(huì)遺留。

• 復(fù)合 option?中的?options?不支持 merge。

  也就是說，當(dāng)?shù)诙?#xff08;或三、四、五 ...）次?chart.setOption(rawOption)?時(shí)，如果?rawOption?是復(fù)合 option（即包含?options?列表），那么新的rawOption.options?列表不會(huì)和老的?options?列表進(jìn)行 merge，而是簡(jiǎn)單替代。當(dāng)然，rawOption.baseOption?仍然會(huì)正常和老的 option 進(jìn)行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: '企業(yè)',}, ],yAxis: { type: 'value', name: 'Mwh' },series: [{type: 'line',},],tooltip: {}},//變量則寫在options中options:[{xAxis: [{data: ['能化國(guó)際電力股份有限公司', '大唐國(guó)際發(fā)電公司', '北京華夏發(fā)電公司']}],title: {text: '電量使用總計(jì)',subtext: '單位:Mwh'},series: [{data: [120, 450, 140]},]},{xAxis: [{data: ['能化國(guó)際電力股份有限公司', '大唐國(guó)際發(fā)電公司', '北京華夏發(fā)電公司']}],title: {text: '電量使用總計(jì)',subtext: '單位:Mwh'},series: [{data: [530, 130, 780]},]},{xAxis: [{data: ['能化國(guó)際電力股份有限公司', '大唐國(guó)際發(fā)電公司', '北京華夏發(fā)電公司']}],title: {text: '電量使用總計(jì)',subtext: '單位:Mwh'},series: [{data: [560, 350, 180]},]},]} timeline.data?中的每一項(xiàng)，對(duì)應(yīng)于?options?數(shù)組中的每個(gè)?option。

5.示例下載

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

6.總結(jié)：

喝水不忘挖井人，這個(gè)百度echarts團(tuán)隊(duì)做的真心好，向?qū)崒?shí)在在做事的人致敬

作者：張林

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

轉(zhuǎn)載隨意注明出處

轉(zhuǎn)載于:https://www.cnblogs.com/zhangmumu/p/7374779.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。