ECharts當(dāng)前項(xiàng)的圖形樣式

2018-10-10 10:12 更新

timeline.checkpointStyle   |   Object

當(dāng)前項(xiàng)(checkpoint)的圖形樣式。

timeline.checkpointStyle.symbol   |   string

[ default: 'circle' ]

timeline.checkpointStyle 標(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.checkpointStyle.symbolSize   |   number, Array

[ default: 13 ]

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

timeline.checkpointStyle.symbolRotate   |   number

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

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

timeline.checkpointStyle.symbolOffset   |   Array

[ default: [0, 0] ]

timeline.checkpointStyle 標(biāo)記相對(duì)于原本位置的偏移。

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

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

timeline.checkpointStyle.color   |   Color

[ default: '#c23531' ]

時(shí)間軸組件中當(dāng)前項(xiàng)(checkpoint)的顏色。

timeline.checkpointStyle.borderWidth   |   number

[ default: 5 ]

時(shí)間軸組件中當(dāng)前項(xiàng)(checkpoint)的邊框?qū)挾取?/p>

timeline.checkpointStyle.borderColor   |    Color

[ default: 'rgba(194,53,49, 0.5)' ]

時(shí)間軸組件中當(dāng)前項(xiàng)(checkpoint)的邊框顏色。

timeline.checkpointStyle.animation   |   boolean

[ default: true ]

時(shí)間軸組件中當(dāng)前項(xiàng)(checkpoint)在 timeline 播放切換中的移動(dòng),是否有動(dòng)畫。

timeline.checkpointStyle.animationDuration   |   number

[ default: 300 ]

時(shí)間軸組件中當(dāng)前項(xiàng)(checkpoint)的動(dòng)畫時(shí)長(zhǎng)。

timeline.checkpointStyle.animationEasing   |   string

[ default: 'quinticInOut' ]

時(shí)間軸組件中當(dāng)前項(xiàng)(checkpoint)的動(dòng)畫的緩動(dòng)效果。不同的緩動(dòng)效果可以參考 緩動(dòng)示例。


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)