建站
咨詢
售后
建站咨詢
新聞中心
ECharts 中時間軸組件包含了可以在多個 ECharts option 間進行切換、播放等操作的功能。ECharts 時間軸組件適用的范圍是：非動態(tài)數(shù)據(jù)，坐標軸的數(shù)據(jù)已經(jīng)確定好數(shù)據(jù)才便于展示，當(dāng)然要實現(xiàn)動態(tài)數(shù)據(jù)也是可行的。那么如何才能快速上手 ECharts 時間軸組件呢？讓我們先來看一個示例。
示例效果如下：
點擊編輯實例 》》
timeline 和其他組件有些不同，它需要操作“多個option”。 假設(shè)，我們把 ECharts 的傳統(tǒng)的 option 稱為 “原子 option”，那么使用 timeline 時，傳入 ECharts 的 option 就成為了一個集合多個原子 option 的復(fù)合option。如下示例：
// 如下，baseOption 是一個 『原子option』，options 數(shù)組中的每一項也是一個 『原子option』。
// 每個『原子option』中就是本文檔中描述的各種配置項。
myChart.setOption(
{
baseOption: {
timeline: {
...,
data: ['2002-01-01', '2003-01-01', '2004-01-01']
},
title: {
subtext: '數(shù)據(jù)來自國家統(tǒng)計局'
},
grid: {...},
xAxis: [...],
yAxis: [...],
series: [
{ // 系列一的一些其他配置
type: 'bar',
...
},
{ // 系列二的一些其他配置
type: 'line',
...
},
{ // 系列三的一些其他配置
type: 'pie',
...
}
]
},
options: [
{ // 這是'2002-01-01' 對應(yīng)的 option
title: {
text: '2002年統(tǒng)計值'
},
series: [
{data: []}, // 系列一的數(shù)據(jù)
{data: []}, // 系列二的數(shù)據(jù)
{data: []} // 系列三的數(shù)據(jù)
]
},
{ // 這是'2003-01-01' 對應(yīng)的 option
title: {
text: '2003年統(tǒng)計值'
},
series: [
{data: []},
{data: []},
{data: []}
]
},
{ // 這是'2004-01-01' 對應(yīng)的 option
title: {
text: '2004年統(tǒng)計值'
},
series: [
{data: []},
{data: []},
{data: []}
]
}
]
}
);在上例中，timeline.data 中的每一項，對應(yīng)于 options 數(shù)組中的每個 option。
使用注意與最佳實踐：
- 公有的配置項，推薦配置在 baseOption 中。timeline 播放切換時，會把 options 數(shù)組中的對應(yīng)的 option，與 baseOption 進行 merge 形成最終的 option。
- options 數(shù)組中，如果某一數(shù)組項中配置了某個屬性，那么其他數(shù)組項中也必須配置某個屬性，而不能缺省。否則這個屬性的執(zhí)行效果會遺留。
- 復(fù)合 option 中的 options 不支持 merge。也就是說，當(dāng)?shù)诙ɑ蛉?、四、?...）次 chart.setOption(rawOption) 時，如果 rawOption 是復(fù)合 option（即包含 options 列表），那么新的 rawOption.options 列表不會和老的 options 列表進行 merge，而是簡單替代。當(dāng)然，rawOption.baseOption 仍然會正常和老的 option 進行merge。
與 ECharts 2 的兼容性：
- ECharts 3 中不再支持 timeline.notMerge 參數(shù)，也就是不支持 notMerge 模式。如果遇到這種場景需要使用，可在外部進行option管理，并用 setOption(option, true) 這樣的notMerge方式設(shè)置。
- ECharts 3 和 ECharts 2 相比，timeline 屬性的定義位置有所不同，移到了 baseOption 中，統(tǒng)一作為一個普通的組件看待。但是，仍然兼容 ECharts2 的 timeline 定義位置，只是不再推薦這樣寫。
timeline.show | boolean
[ default: true ]
是否顯示時間軸組件。如果設(shè)置為 false，不會顯示，但是功能還存在。
timeline.type | string
[ default: 'slider' ]
這個屬性目前只支持為 slider，不需要更改。
timeline.axisType | string
[ default: 'time' ]
軸的類型?？蛇x值為：
- 'value' 數(shù)值軸，適用于連續(xù)數(shù)據(jù)。
- 'category' 類目軸，適用于離散的類目數(shù)據(jù)。
- 'time' 時間軸，適用于連續(xù)的時序數(shù)據(jù)，與數(shù)值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據(jù)跨度的范圍來決定使用月，星期，日還是小時范圍的刻度。
timeline.currentIndex | number
[ default: 0 ]
表示當(dāng)前選中項是哪項。比如，currentIndex 為 0 時，表示當(dāng)前選中項為 timeline.data[0]（即使用 options[0]）。
timeline.autoPlay | boolean
[ default: false ]
表示是否自動播放。
timeline.rewind | boolean
[ default: false ]
表示是否反向播放。
timeline.loop | boolean
[ default: true ]
表示是否循環(huán)播放。
timeline.playInterval | number
[ default: 2000 ]
表示播放的速度（跳動的間隔），單位毫秒（ms）。
timeline.realtime | boolean
[ default: true ]
拖動圓點的時候，是否實時更新視圖。
timeline.controlPosition | string
[ default: 'left' ]
表示『播放』按鈕的位置。可選值：'left'、'right'。
timeline.zlevel | number
[ default: 0 ]
所有圖形的 zlevel 值。
zlevel 用于 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設(shè)置成一個單獨的zlevel。
需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大，在手機端上需要謹慎使用以防崩潰。zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
timeline.z | number
[ default: 2 ]
時間軸組件的所有圖形的z值?？刂茍D形的前后順序。z值小的圖形會被z值大的圖形覆蓋。
z 相比 zlevel 優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。timeline.left | string, number
[ default: 'auto' ]
時間軸組件離容器左側(cè)的距離。
left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'left', 'center', 'right'。
如果 left 的值為'left', 'center', 'right'，組件會根據(jù)相應(yīng)的位置自動對齊。
timeline.top | string, number
[ default: 'auto' ]
時間軸組件離容器上側(cè)的距離。
top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。
如果 top 的值為'top', 'middle', 'bottom'，組件會根據(jù)相應(yīng)的位置自動對齊。
timeline.right | string, number
[ default: 'auto' ]
時間軸組件離容器右側(cè)的距離。
right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。
默認自適應(yīng)。
timeline.bottom | string, number
[ default: 'auto' ]
時間軸組件離容器下側(cè)的距離。
bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。
默認自適應(yīng)。
timeline.padding | number, Array
[ default: 5 ]
時間軸組件的內(nèi)邊距，單位為 px，默認各方向內(nèi)邊距為 5px，接受數(shù)組分別設(shè)定上右下左邊距。
使用示例：
// 設(shè)置內(nèi)邊距為 5
padding: 5
// 設(shè)置上下的內(nèi)邊距為 5，左右的內(nèi)邊距為 10
padding: [5, 10]
// 分別設(shè)置四個方向的內(nèi)邊距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]timeline.orient | string
[ default: 'horizontal' ]
擺放方式，可選值有：
- 'vertical'：豎直放置。
- 'horizontal'：水平放置。
timeline.inverse | boolean
[ default: false ]
- 是否反向放置 timeline，反向則首位顛倒過來。
timeline.symbol | string
[ default: 'emptyCircle' ]
timeline 標記的圖形。
ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
也可以通過 'image://url' 設(shè)置為圖片，其中 url 為圖片的鏈接，或者 dataURI。
可以通過 'path://' 將圖標設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因為縮放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會自適應(yīng)調(diào)整為合適的大小。路徑的格式參見 SVG PathData。可以從 Adobe Illustrator 等工具編輯導(dǎo)出。
timeline.symbolSize | number, Array
[ default: 10 ]
timeline 標記的大小，可以設(shè)置成諸如 10 這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
timeline.symbolRotate | number
timeline 標記的旋轉(zhuǎn)角度。
注意在 markLine 中當(dāng) symbol 為 'arrow' 時會忽略 symbolRotate 強制設(shè)置為切線的角度。timeline.symbolOffset | Array
[ default: [0, 0] ]
timeline 標記相對于原本位置的偏移。默認情況下，標記會居中置放在數(shù)據(jù)對應(yīng)的位置，但是如果 symbol 是自定義的矢量路徑或者圖片，就有可能不希望 symbol 居中。這時候可以使用該配置項配置 symbol 相對于原本居中的偏移，可以是絕對的像素值，也可以是相對的百分比。
例如 [0, '50%'] 就是把自己向上移動了一半的位置，在 symbol 圖形是氣泡的時候可以讓圖形下端的箭頭對準數(shù)據(jù)點。
分享文章：創(chuàng)新互聯(lián)ECharts教程：快速上手ECharts時間軸組件
當(dāng)前網(wǎng)址：http://m.5511xx.com/article/dhosdcd.html
