建站
咨詢
售后
建站咨詢
新聞中心
ECharts 線圖
什么是 ECharts 線圖（series[i]-lines）？該圖用于帶有起點(diǎn)和終點(diǎn)信息的線數(shù)據(jù)的繪制，主要用于地圖上的航線，路線的可視化。
專注于為中小企業(yè)提供網(wǎng)站制作、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)定結(jié)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
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)系），通過 xAxisIndex、yAxisIndex指定相應(yīng)的坐標(biāo)軸組件。
- 'geo'（默認(rèn)值）：使用地理坐標(biāo)系，通過 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)的線段，線段可以通過 lineStyle.normal.curveness 配置為曲線。
如果該配置項(xiàng)為 true，則可以在 data.coords 中設(shè)置多于 2 個(gè)的頂點(diǎn)用來繪制多段線，在繪制路線軌跡的時(shí)候比較有用，見示例 北京公交路線，設(shè)置為多段線后 lineStyle.normal.curveness 無效。
effect線特效的配置，見示例 模擬遷徙 和 北京公交路線
注意： 所有帶有尾跡特效的圖表需要單獨(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)一指定。 注意： 這里無法像一般的 symbolSize 那樣通過數(shù)組分別指定高寬。
lineStyle線路圖中的線的樣式設(shè)置
label標(biāo)簽相關(guān)配置。在 polyline 設(shè)置為 true 時(shí)無效。
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 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動(dòng)畫）的組件設(shè)置成一個(gè)單獨(dú)的zlevel。需要注意的是過多的 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í)長，默認(rèn)為 1000，支持回調(diào)函數(shù)，可以通過每個(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ù)，可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫效果。
如下示例：
animationDelay: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
animationDurationUpdate數(shù)據(jù)更新動(dòng)畫的時(shí)長，默認(rèn)為 300。
支持回調(diào)函數(shù)，可以通過每個(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ù)，可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果。
如下示例：
animationDelayUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
當(dāng)前名稱：創(chuàng)新互聯(lián)ECharts教程：ECharts線圖：繪制線數(shù)據(jù)
URL網(wǎng)址：http://m.5511xx.com/article/dpdoeoc.html
