ECharts線圖：繪制線數(shù)據(jù)

ECharts 線圖

什么是 ECharts 線圖（series[i]-lines）？該圖用于帶有起點(diǎn)和終點(diǎn)信息的線數(shù)據(jù)的繪制，主要用于地圖上的航線，路線的可視化。

ECharts 2.x 里會(huì)用地圖上的 markLine 去繪制遷徙效果，在 ECharts 3 里建議使用單獨(dú)的 lines 類型圖表。

遷徙示例：

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

線路圖屬性

type

此處的 type 值為 'lines'。

name

系列名稱，用于 tooltip 的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。

coordinateSystem

該系列使用的坐標(biāo)系，可選值如下：

• 'cartesian2d'：使用二維的直角坐標(biāo)系（也稱笛卡爾坐標(biāo)系），通過(guò) xAxisIndex、yAxisIndex指定相應(yīng)的坐標(biāo)軸組件。

• 'geo'（默認(rèn)值）：使用地理坐標(biāo)系，通過(guò) geoIndex 指定相應(yīng)的地理坐標(biāo)系組件。

xAxisIndex

使用的 x 軸的 index，在單個(gè)圖表實(shí)例中存在多個(gè) x 軸的時(shí)候有用。

yAxisIndex

使用的 y 軸的 index，在單個(gè)圖表實(shí)例中存在多個(gè) y軸的時(shí)候有用。

geoIndex

使用的地理坐標(biāo)系的 index，在單個(gè)圖表實(shí)例中存在多個(gè)地理坐標(biāo)系的時(shí)候有用。

polyline

是否是多段線。

默認(rèn)為 false，只能用于繪制只有兩個(gè)端點(diǎn)的線段，線段可以通過(guò) lineStyle.normal.curveness 配置為曲線。

如果該配置項(xiàng)為 true，則可以在 data.coords 中設(shè)置多于 2 個(gè)的頂點(diǎn)用來(lái)繪制多段線，在繪制路線軌跡的時(shí)候比較有用，見(jiàn)示例 北京公交路線，設(shè)置為多段線后 lineStyle.normal.curveness 無(wú)效。

effect

線特效的配置，見(jiàn)示例 模擬遷徙 和 北京公交路線

注意： 所有帶有尾跡特效的圖表需要單獨(dú)放在一個(gè)層，也就是需要單獨(dú)設(shè)置 zlevel，同時(shí)建議關(guān)閉該層的動(dòng)畫（animation: false）。不然位于同個(gè)層的其它系列的圖形，和動(dòng)畫的標(biāo)簽也會(huì)產(chǎn)生不必要的殘影。

large

是否啟用大規(guī)模線圖的優(yōu)化，默認(rèn)為 false，在數(shù)據(jù)圖形特別多的時(shí)候（>=5k）可以開啟。

開啟后配合 largeThreshold 在數(shù)據(jù)量大于指定閾值的時(shí)候?qū)L制進(jìn)行優(yōu)化。

缺點(diǎn)：優(yōu)化后不能自定義設(shè)置單個(gè)數(shù)據(jù)項(xiàng)的樣式，不能啟用 effect。

largeThreshold

開啟繪制優(yōu)化的閾值，默認(rèn)為 2000。

symbol

線兩端的標(biāo)記類型，可以是一個(gè)數(shù)組分別指定兩端，也可以是單個(gè)統(tǒng)一指定。 具體支持的格式可以參考：標(biāo)線的 symbol

symbolSize

線兩端的標(biāo)記大小，默認(rèn)為10，可以是一個(gè)數(shù)組分別指定兩端，也可以是單個(gè)統(tǒng)一指定。 注意： 這里無(wú)法像一般的 symbolSize 那樣通過(guò)數(shù)組分別指定高寬。

lineStyle

線路圖中的線的樣式設(shè)置

label

標(biāo)簽相關(guān)配置。在 polyline 設(shè)置為 true 時(shí)無(wú)效。

data[i]

線數(shù)據(jù)集。

注： 為了更好點(diǎn)支持多段線的配置，線數(shù)據(jù)的格式在 3.2.0 做了一定調(diào)整，如下：

// 3.2.0 之前
// [{
//    // 起點(diǎn)坐標(biāo)
//    coord: [120, 66],
//    lineStyle: { normal: {} }
// }, {
//    // 終點(diǎn)坐標(biāo)
//    coord: [122, 67]
// }]

// 從 3.2.0 起改為如下配置
{
    coords: [
        [120, 66],  // 起點(diǎn)
        [122, 67]   // 終點(diǎn)
        ...         // 如果 polyline 為 true 還可以設(shè)置更多的點(diǎn)
    ],
    // 統(tǒng)一的樣式設(shè)置
    lineStyle: {
        normal: {}
    }
}

markPoint

圖表的標(biāo)注。

markLine

圖表的標(biāo)線。

markArea

圖表標(biāo)域，常用于標(biāo)記圖表中某個(gè)范圍的數(shù)據(jù)，例如標(biāo)出某段時(shí)間投放了廣告。

zlevel

線圖所有圖形的 zlevel 值。

zlevel用于 Canvas 分層，不同zlevel值的圖形會(huì)放置在不同的 Canvas 中，Canvas 分層是一種常見(jiàn)的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動(dòng)畫）的組件設(shè)置成一個(gè)單獨(dú)的zlevel。需要注意的是過(guò)多的 Canvas 會(huì)引起內(nèi)存開銷的增大，在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。

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

z

線圖組件的所有圖形的 z 值，默認(rèn)值為 2?？刂茍D形的前后順序。z值小的圖形會(huì)被z值大的圖形覆蓋。

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

silent

圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件，默認(rèn)為 false，即響應(yīng)和觸發(fā)鼠標(biāo)事件。

animation

是否開啟動(dòng)畫，默認(rèn)為 true。

animationThreshold

是否開啟動(dòng)畫的閾值，默認(rèn)為 2000，當(dāng)單個(gè)系列顯示的圖形數(shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫。

animationDuration

初始動(dòng)畫的時(shí)長(zhǎng)，默認(rèn)為 1000，支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫效果：

animationDuration: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

animationEasing

初始動(dòng)畫的緩動(dòng)效果，默認(rèn)為 cubicOut。不同的緩動(dòng)效果可以參考 緩動(dòng)示例。

animationDelay

初始動(dòng)畫的延遲，支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

也可以看該示例

animationDurationUpdate

數(shù)據(jù)更新動(dòng)畫的時(shí)長(zhǎng)，默認(rèn)為 300。

支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果：

animationDurationUpdate: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

animationEasingUpdate

數(shù)據(jù)更新動(dòng)畫的緩動(dòng)效果，默認(rèn)為 cubicOut。

animationDelayUpdate

數(shù)據(jù)更新動(dòng)畫的延遲，支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果。

如下示例：

animationDelayUpdate: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

也可以看該示例