codecamp

象形柱图hover动画效果设置

在ECharts图表中,通过hoverAnimation来控制是否开启 hover 在图形上的提示动画效果。默认为 false,即不开启,如若需要开启,请将值设置为true。

此hoverAnimation可以被设置在系列的根部,表示对此系列中所有数据都生效;也可以被设置在 data 中的每个数据项中,表示只对此数据项生效。

例如:

series: [{
    hoverAnimation: ... // 对 data 中所有数据项生效。
    data: [23, 56]
}]

或者:

series: [{
    data: [{
        value: 23
        hoverAnimation: ... // 只对此数据项生效
    }, {
        value: 56
        hoverAnimation: ... // 只对此数据项生效
    }]
}]

象形柱图hover动画效果属性

animation

是否开启动画,默认为 true。

animationThreshold

是否开启动画的阈值,默认为2000,当单个系列显示的图形数量大于这个阈值时会关闭动画。

animationDuration

初始动画的时长,默认时长为1000,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果:

animationDuration: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}
animationEasing

初始动画的缓动效果,默认为 cubicOut。不同的缓动效果可以参考 缓动示例

animationDurationUpdate

数据更新动画的时长,默认为300。

支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果:

animationDurationUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}
animationEasingUpdate

数据更新动画的缓动效果。

animationDelay

动画开始之前的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

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

或者反向:

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

参见下述例子:

象形柱图hover动画效果

点击编辑实例 》》

animationDelayUpdate

数据更新动画的延迟,默认值为0,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

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

或者反向:

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

请参考animationDelay属性中的例子。

ECharts象形柱图属性设置
ECharts象形柱图的提示框浮层设置
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }