如何設(shè)置ECharts線圖的特效

您可以使用 ECharts 線圖的 effect 屬性來貴線特效進(jìn)行配置，可以參考示例 模擬遷徙 和 北京公交路線。

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

特效屬性

show

是否顯示特效，默認(rèn)為 false，即不顯示。

period

特效動畫的時間，單位為 s，默認(rèn)為 4s。

delay

特效動畫的延時，支持設(shè)置成數(shù)字或者回調(diào)，單位：ms。

constantSpeed

配置特效圖形的移動動畫是否是固定速度，單位像素/秒，設(shè)置為大于 0 的值后會忽略 period 配置項。

symbol

特效圖形的標(biāo)記。

ECharts 提供的標(biāo)記類型包括 'circle（默認(rèn)）', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

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

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

上面示例中就是使用自定義 path 的 symbol 表現(xiàn)飛機(jī)的圖形。

Tip: symbol 的角度會隨著軌跡的切線變化，如果使用自定義 path 的 symbol，需要保證 path 圖形的朝向是朝上的，這樣在 symbol 沿著軌跡運動的時候可以保證圖形始終朝著運動的方向。

symbolSize

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

color

特效標(biāo)記的顏色。

trailLength

特效尾跡的長度。取從 0 到 1 的值，默認(rèn)為 0.2，數(shù)值越大尾跡越長。

loop

是否循環(huán)顯示特效，默認(rèn)為 true。