W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
在ECharts圖表中,通過hoverAnimation來控制是否開啟 hover 在圖形上的提示動(dòng)畫效果。默認(rèn)為 false,即不開啟,如若需要開啟,請將值設(shè)置為true。
此hoverAnimation可以被設(shè)置在系列的根部,表示對此系列中所有數(shù)據(jù)都生效;也可以被設(shè)置在 data 中的每個(gè)數(shù)據(jù)項(xiàng)中,表示只對此數(shù)據(jù)項(xiàng)生效。
例如:
series: [{
hoverAnimation: ... // 對 data 中所有數(shù)據(jù)項(xiàng)生效。
data: [23, 56]
}]
或者:
series: [{
data: [{
value: 23
hoverAnimation: ... // 只對此數(shù)據(jù)項(xiàng)生效
}, {
value: 56
hoverAnimation: ... // 只對此數(shù)據(jù)項(xiàng)生效
}]
}]
animation
是否開啟動(dòng)畫,默認(rèn)為 true。
animationThreshold
是否開啟動(dòng)畫的閾值,默認(rèn)為2000,當(dāng)單個(gè)系列顯示的圖形數(shù)量大于這個(gè)閾值時(shí)會關(guān)閉動(dòng)畫。
animationDuration
初始動(dòng)畫的時(shí)長,默認(rèn)時(shí)長為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)示例。
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)效果。
animationDelay
動(dòng)畫開始之前的延遲,支持回調(diào)函數(shù),可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果。
如下示例:
animationDelay: function (dataIndex, params) {
return params.index * 30;
}
或者反向:
animationDelay: function (dataIndex, params) {
return (params.count - 1 - params.index) * 30;
}
參見下述例子:
animationDelayUpdate
數(shù)據(jù)更新動(dòng)畫的延遲,默認(rèn)值為0,支持回調(diào)函數(shù),可以通過每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫效果。
如下示例:
animationDelay: function (dataIndex, params) {
return params.index * 30;
}
或者反向:
animationDelay: function (dataIndex, params) {
return (params.count - 1 - params.index) * 30;
}
請參考animationDelay屬性中的例子。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: