建站
咨詢
售后
建站咨詢
新聞中心
ECharts 線圖
什么是 ECharts 線圖（series[i]-lines）？該圖用于帶有起點和終點信息的線數(shù)據(jù)的繪制，主要用于地圖上的航線，路線的可視化。
專注于為中小企業(yè)提供網(wǎng)站制作、做網(wǎng)站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)定結免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
ECharts 2.x 里會用地圖上的 markLine 去繪制遷徙效果，在 ECharts 3 里建議使用單獨的 lines 類型圖表。
遷徙示例：
點擊編輯實例 》》
線路圖屬性
type此處的 type 值為 'lines'。
name系列名稱，用于 tooltip 的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項時用于指定對應的系列。
coordinateSystem該系列使用的坐標系，可選值如下：
- 'cartesian2d'：使用二維的直角坐標系（也稱笛卡爾坐標系），通過 xAxisIndex、yAxisIndex指定相應的坐標軸組件。
- 'geo'（默認值）：使用地理坐標系，通過 geoIndex 指定相應的地理坐標系組件。
xAxisIndex使用的 x 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。
yAxisIndex使用的 y 軸的 index，在單個圖表實例中存在多個 y軸的時候有用。
geoIndex使用的地理坐標系的 index，在單個圖表實例中存在多個地理坐標系的時候有用。
polyline是否是多段線。
默認為 false，只能用于繪制只有兩個端點的線段，線段可以通過 lineStyle.normal.curveness 配置為曲線。
如果該配置項為 true，則可以在 data.coords 中設置多于 2 個的頂點用來繪制多段線，在繪制路線軌跡的時候比較有用，見示例 北京公交路線，設置為多段線后 lineStyle.normal.curveness 無效。
effect線特效的配置，見示例 模擬遷徙 和 北京公交路線
注意： 所有帶有尾跡特效的圖表需要單獨放在一個層，也就是需要單獨設置 zlevel，同時建議關閉該層的動畫（animation: false）。不然位于同個層的其它系列的圖形，和動畫的標簽也會產(chǎn)生不必要的殘影。
large是否啟用大規(guī)模線圖的優(yōu)化，默認為 false，在數(shù)據(jù)圖形特別多的時候（>=5k）可以開啟。
開啟后配合 largeThreshold 在數(shù)據(jù)量大于指定閾值的時候?qū)L制進行優(yōu)化。
缺點：優(yōu)化后不能自定義設置單個數(shù)據(jù)項的樣式，不能啟用 effect。
largeThreshold開啟繪制優(yōu)化的閾值，默認為 2000。
symbol線兩端的標記類型，可以是一個數(shù)組分別指定兩端，也可以是單個統(tǒng)一指定。 具體支持的格式可以參考：標線的 symbol
symbolSize線兩端的標記大小，默認為10，可以是一個數(shù)組分別指定兩端，也可以是單個統(tǒng)一指定。 注意： 這里無法像一般的 symbolSize 那樣通過數(shù)組分別指定高寬。
lineStyle線路圖中的線的樣式設置
label標簽相關配置。在 polyline 設置為 true 時無效。
data[i]線數(shù)據(jù)集。
注： 為了更好點支持多段線的配置，線數(shù)據(jù)的格式在 3.2.0 做了一定調(diào)整，如下：
// 3.2.0 之前
// [{
// // 起點坐標
// coord: [120, 66],
// lineStyle: { normal: {} }
// }, {
// // 終點坐標
// coord: [122, 67]
// }]
// 從 3.2.0 起改為如下配置
{
coords: [
[120, 66], // 起點
[122, 67] // 終點
... // 如果 polyline 為 true 還可以設置更多的點
],
// 統(tǒng)一的樣式設置
lineStyle: {
normal: {}
}
}markPoint圖表的標注。
markLine圖表的標線。
markArea圖表標域，常用于標記圖表中某個范圍的數(shù)據(jù)，例如標出某段時間投放了廣告。
zlevel線圖所有圖形的 zlevel 值。
zlevel用于 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大，在手機端上需要謹慎使用以防崩潰。
zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
z線圖組件的所有圖形的 z 值，默認值為 2?？刂茍D形的前后順序。z值小的圖形會被z值大的圖形覆蓋。
z 相比 zlevel 優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。
silent圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。
animation是否開啟動畫，默認為 true。
animationThreshold是否開啟動畫的閾值，默認為 2000，當單個系列顯示的圖形數(shù)量大于這個閾值時會關閉動畫。
animationDuration初始動畫的時長，默認為 1000，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果：
animationDuration: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}animationEasing初始動畫的緩動效果，默認為 cubicOut。不同的緩動效果可以參考 緩動示例。
animationDelay初始動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果。
如下示例：
animationDelay: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
animationDurationUpdate數(shù)據(jù)更新動畫的時長，默認為 300。
支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果：
animationDurationUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}animationEasingUpdate數(shù)據(jù)更新動畫的緩動效果，默認為 cubicOut。
animationDelayUpdate數(shù)據(jù)更新動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果。
如下示例：
animationDelayUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
文章題目：創(chuàng)新互聯(lián)ECharts教程：ECharts線圖：繪制線數(shù)據(jù)
標題鏈接：http://m.fisionsoft.com.cn/article/dpdoeoc.html
