如何禁用ECharts树形图(Treemap)的缩放与动画效果?
解决Treemap固定位置、禁用滚轮缩放及取消点击动画的问题
以下是针对需求的具体配置调整方案:
1. 固定位置并禁用鼠标滚轮缩放
你之前设置的zoomLock: true是全局配置,无法直接控制Treemap自身的交互行为。正确做法是在Treemap系列配置中设置roam: false,该参数专门控制树形图是否允许缩放、拖拽等交互,设为false后即可固定位置并禁用滚轮缩放。
2. 取消点击分区的动画效果
全局animation: false可能无法覆盖Treemap点击时的更新动画,需在系列配置中补充两项设置:
animation: false:关闭系列的初始渲染动画animationDurationUpdate: 0:将点击触发的分区更新动画时长设为0,彻底取消过渡效果
完整配置示例(修改原示例的series部分)
series: [ { type: 'treemap', data: [/* 原示例数据 */], // 固定位置,禁用滚轮缩放、拖拽交互 roam: false, // 关闭系列所有动画 animation: false, // 确保点击分区时无过渡动画 animationDurationUpdate: 0 } ]
内容的提问来源于stack exchange,提问作者cheeseGrater02
相关产品推荐
相关产品推荐

