快速上手ECharts時(shí)間軸組件

ECharts 中時(shí)間軸組件包含了可以在多個(gè) ECharts option 間進(jìn)行切換、播放等操作的功能。ECharts 時(shí)間軸組件適用的范圍是：非動(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ù)也是可行的。那么如何才能快速上手 ECharts 時(shí)間軸組件呢？讓我們先來看一個(gè)示例。

示例效果如下：

點(diǎn)擊編輯實(shí)例 》》

timeline 和其他組件有些不同，它需要操作“多個(gè)option”。 假設(shè)，我們把 ECharts 的傳統(tǒng)的 option 稱為 “原子 option”，那么使用 timeline 時(shí)，傳入 ECharts 的 option 就成為了一個(gè)集合多個(gè)原子 option 的復(fù)合option。如下示例：

// 如下，baseOption 是一個(gè) 『原子option』，options 數(shù)組中的每一項(xiàng)也是一個(gè) 『原子option』。
// 每個(gè)『原子option』中就是本文檔中描述的各種配置項(xiàng)。
myChart.setOption(
    {
        baseOption: {
            timeline: {
                ...,
                data: ['2002-01-01', '2003-01-01', '2004-01-01']
            },
            title: {
                subtext: '數(shù)據(jù)來自國家統(tǒng)計(jì)局'
            },
            grid: {...},
            xAxis: [...],
            yAxis: [...],
            series: [
                { // 系列一的一些其他配置
                    type: 'bar',
                    ...
                },
                { // 系列二的一些其他配置
                    type: 'line',
                    ...
                },
                { // 系列三的一些其他配置
                    type: 'pie',
                    ...
                }
            ]
        },
        options: [
            { // 這是'2002-01-01' 對應(yīng)的 option
                title: {
                    text: '2002年統(tǒng)計(jì)值'
                },
                series: [
                    {data: []}, // 系列一的數(shù)據(jù)
                    {data: []}, // 系列二的數(shù)據(jù)
                    {data: []}  // 系列三的數(shù)據(jù)
                ]
            },
            { // 這是'2003-01-01' 對應(yīng)的 option
                title: {
                    text: '2003年統(tǒng)計(jì)值'
                },
                series: [
                    {data: []},
                    {data: []},
                    {data: []}
                ]
            },
            { // 這是'2004-01-01' 對應(yīng)的 option
                title: {
                    text: '2004年統(tǒng)計(jì)值'
                },
                series: [
                    {data: []},
                    {data: []},
                    {data: []}
                ]
            }
        ]
    }
);

在上例中，timeline.data 中的每一項(xiàng)，對應(yīng)于 options 數(shù)組中的每個(gè) option。

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

• 公有的配置項(xiàng)，推薦配置在 baseOption 中。timeline 播放切換時(shí)，會(huì)把 options 數(shù)組中的對應(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ù)诙ɑ蛉?、四、?...）次 chart.setOption(rawOption) 時(shí)，如果 rawOption 是復(fù)合 option（即包含 options 列表），那么新的 rawOption.options 列表不會(huì)和老的 options 列表進(jìn)行 merge，而是簡單替代。當(dāng)然，rawOption.baseOption 仍然會(huì)正常和老的 option 進(jìn)行merge。

與 ECharts 2 的兼容性：

• ECharts 3 中不再支持 timeline.notMerge 參數(shù)，也就是不支持 notMerge 模式。如果遇到這種場景需要使用，可在外部進(jìn)行option管理，并用 setOption(option, true) 這樣的notMerge方式設(shè)置。
• ECharts 3 和 ECharts 2 相比，timeline 屬性的定義位置有所不同，移到了 baseOption 中，統(tǒng)一作為一個(gè)普通的組件看待。但是，仍然兼容 ECharts2 的 timeline 定義位置，只是不再推薦這樣寫。

timeline.show   |   boolean

[ default: true ]

是否顯示時(shí)間軸組件。如果設(shè)置為 false，不會(huì)顯示，但是功能還存在。

timeline.type   |   string

[ default: 'slider' ]

這個(gè)屬性目前只支持為 slider，不需要更改。

timeline.axisType   |   string

[ default: 'time' ]

軸的類型。可選值為：

• 'value' 數(shù)值軸，適用于連續(xù)數(shù)據(jù)。
• 'category' 類目軸，適用于離散的類目數(shù)據(jù)。
• 'time' 時(shí)間軸，適用于連續(xù)的時(shí)序數(shù)據(jù)，與數(shù)值軸相比時(shí)間軸帶有時(shí)間的格式化，在刻度計(jì)算上也有所不同，例如會(huì)根據(jù)跨度的范圍來決定使用月，星期，日還是小時(shí)范圍的刻度。

timeline.currentIndex   |   number

[ default: 0 ]

表示當(dāng)前選中項(xiàng)是哪項(xiàng)。比如，currentIndex 為 0 時(shí)，表示當(dāng)前選中項(xiàng)為 timeline.data[0]（即使用 options[0]）。

timeline.autoPlay   |   boolean

[ default: false ]

表示是否自動(dòng)播放。

timeline.rewind   |   boolean

[ default: false ]

表示是否反向播放。

timeline.loop   |   boolean

[ default: true ]

表示是否循環(huán)播放。

timeline.playInterval   |   number

[ default: 2000 ]

表示播放的速度（跳動(dòng)的間隔），單位毫秒（ms）。

timeline.realtime   |   boolean

[ default: true ]

拖動(dòng)圓點(diǎn)的時(shí)候，是否實(shí)時(shí)更新視圖。

timeline.controlPosition   |   string

[ default: 'left' ]

表示『播放』按鈕的位置。可選值：'left'、'right'。

timeline.zlevel   |   number

[ default: 0 ]

所有圖形的 zlevel 值。

zlevel 用于 Canvas 分層，不同zlevel值的圖形會(huì)放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動(dòng)畫）的組件設(shè)置成一個(gè)單獨(dú)的zlevel。

需要注意的是過多的 Canvas 會(huì)引起內(nèi)存開銷的增大，在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。

zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。

timeline.z   |   number

[ default: 2 ]

時(shí)間軸組件的所有圖形的z值。控制圖形的前后順序。z值小的圖形會(huì)被z值大的圖形覆蓋。

z 相比 zlevel 優(yōu)先級更低，而且不會(huì)創(chuàng)建新的 Canvas。

timeline.left   |   string, number

[ default: 'auto' ]

時(shí)間軸組件離容器左側(cè)的距離。

left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值為'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對齊。

timeline.top   |   string, number

[ default: 'auto' ]

時(shí)間軸組件離容器上側(cè)的距離。

top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值為'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對齊。

timeline.right   |   string, number

[ default: 'auto' ]

時(shí)間軸組件離容器右側(cè)的距離。

right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。

默認(rèn)自適應(yīng)。

timeline.bottom   |   string, number

[ default: 'auto' ]

時(shí)間軸組件離容器下側(cè)的距離。

bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。

默認(rèn)自適應(yīng)。

timeline.padding   |   number, Array

[ default: 5 ]

時(shí)間軸組件的內(nèi)邊距，單位為 px，默認(rèn)各方向內(nèi)邊距為 5px，接受數(shù)組分別設(shè)定上右下左邊距。

使用示例：

// 設(shè)置內(nèi)邊距為 5
padding: 5
// 設(shè)置上下的內(nèi)邊距為 5，左右的內(nèi)邊距為 10
padding: [5, 10]
// 分別設(shè)置四個(gè)方向的內(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 標(biāo)記的圖形。

ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通過 'image://url' 設(shè)置為圖片，其中 url 為圖片的鏈接，或者 dataURI。

可以通過 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見 SVG PathData?？梢詮?Adobe Illustrator 等工具編輯導(dǎo)出。

timeline.symbolSize   |   number, Array

[ default: 10 ]

timeline 標(biāo)記的大小，可以設(shè)置成諸如 10 這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，例如 [20, 10] 表示標(biāo)記寬為20，高為10。

timeline.symbolRotate   |   number

timeline 標(biāo)記的旋轉(zhuǎn)角度。

注意在 markLine 中當(dāng) symbol 為 'arrow' 時(shí)會(huì)忽略 symbolRotate 強(qiáng)制設(shè)置為切線的角度。

timeline.symbolOffset   |   Array

[ default: [0, 0] ]

timeline 標(biāo)記相對于原本位置的偏移。默認(rèn)情況下，標(biāo)記會(huì)居中置放在數(shù)據(jù)對應(yīng)的位置，但是如果 symbol 是自定義的矢量路徑或者圖片，就有可能不希望 symbol 居中。這時(shí)候可以使用該配置項(xiàng)配置 symbol 相對于原本居中的偏移，可以是絕對的像素值，也可以是相對的百分比。

例如 [0, '50%'] 就是把自己向上移動(dòng)了一半的位置，在 symbol 圖形是氣泡的時(shí)候可以讓圖形下端的箭頭對準(zhǔn)數(shù)據(jù)點(diǎn)。