象形柱圖hover動(dòng)畫(huà)效果設(shè)置

在ECharts圖表中，通過(guò)hoverAnimation來(lái)控制是否開(kāi)啟 hover 在圖形上的提示動(dòng)畫(huà)效果。默認(rèn)為 false，即不開(kāi)啟，如若需要開(kāi)啟，請(qǐng)將值設(shè)置為true。

此hoverAnimation可以被設(shè)置在系列的根部，表示對(duì)此系列中所有數(shù)據(jù)都生效；也可以被設(shè)置在 data 中的每個(gè)數(shù)據(jù)項(xiàng)中，表示只對(duì)此數(shù)據(jù)項(xiàng)生效。

例如：

series: [{
    hoverAnimation: ... // 對(duì) data 中所有數(shù)據(jù)項(xiàng)生效。
    data: [23, 56]
}]

或者：

series: [{
    data: [{
        value: 23
        hoverAnimation: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
    }, {
        value: 56
        hoverAnimation: ... // 只對(duì)此數(shù)據(jù)項(xiàng)生效
    }]
}]

象形柱圖hover動(dòng)畫(huà)效果屬性

animation

是否開(kāi)啟動(dòng)畫(huà)，默認(rèn)為 true。

animationThreshold

是否開(kāi)啟動(dòng)畫(huà)的閾值，默認(rèn)為2000，當(dāng)單個(gè)系列顯示的圖形數(shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫(huà)。

animationDuration

初始動(dòng)畫(huà)的時(shí)長(zhǎng)，默認(rèn)時(shí)長(zhǎng)為1000，支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的初始動(dòng)畫(huà)效果：

animationDuration: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

animationEasing

初始動(dòng)畫(huà)的緩動(dòng)效果，默認(rèn)為 cubicOut。不同的緩動(dòng)效果可以參考 緩動(dòng)示例。

animationDurationUpdate

數(shù)據(jù)更新動(dòng)畫(huà)的時(shí)長(zhǎng)，默認(rèn)為300。

支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫(huà)效果：

animationDurationUpdate: function (idx) {
    // 越往后的數(shù)據(jù)延遲越大
    return idx * 100;
}

animationEasingUpdate

數(shù)據(jù)更新動(dòng)畫(huà)的緩動(dòng)效果。

animationDelay

動(dòng)畫(huà)開(kāi)始之前的延遲，支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫(huà)效果。

如下示例：

animationDelay: function (dataIndex, params) {
    return params.index * 30;
}

或者反向：

animationDelay: function (dataIndex, params) {
    return (params.count - 1 - params.index) * 30;
}

參見(jiàn)下述例子：

點(diǎn)擊編輯實(shí)例 》》

animationDelayUpdate

數(shù)據(jù)更新動(dòng)畫(huà)的延遲，默認(rèn)值為0，支持回調(diào)函數(shù)，可以通過(guò)每個(gè)數(shù)據(jù)返回不同的 delay 時(shí)間實(shí)現(xiàn)更戲劇的更新動(dòng)畫(huà)效果。

如下示例：

animationDelay: function (dataIndex, params) {
    return params.index * 30;
}

或者反向：

animationDelay: function (dataIndex, params) {
    return (params.count - 1 - params.index) * 30;
}

請(qǐng)參考animationDelay屬性中的例子。