ECharts如何仅显示dataZoom工具的还原按钮隐藏缩放按钮
ECharts 工具栏仅保留dataZoom还原按钮配置方案
仅修改title.zoom为空只会清空缩放按钮的提示文字,无法隐藏按钮本身,可通过以下配置实现单独保留还原(back)功能、隐藏区域缩放(zoom)按钮:
核心配置代码
toolbox: { feature: { dataZoom: { // 将zoom对应图标设为空,直接隐藏缩放按钮 icon: { zoom: "", // back字段可保留默认图标,也可替换为自定义SVG路径 back: "path://M5.3,7.9h6.1c1.8,0,3.3,1.5,3.3,3.3s-1.5,3.3-3.3,3.3H8.4c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h3c2.4,0,4.3-1.9,4.3-4.3 s-1.9-4.3-4.3-4.3H5.3l1.5-1.5c0.2-0.2,0.2-0.5,0-0.7c-0.2-0.2-0.5-0.2-0.7,0L4,7.5c-0.2,0.2-0.2,0.5,0,0.7l2.1,2.1 c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1c0.2-0.2,0.2-0.5,0-0.7L5.3,7.9z" }, title: { back: "还原缩放" // 自定义还原按钮的提示文案 }, // 可选配置:彻底禁用工具栏触发的框选缩放交互,避免误触 brushStyle: { opacity: 0 } } } }
配置说明
- 将
icon.zoom设为空字符串后,区域缩放按钮会直接从工具栏移除,不受dataZoom整体show属性的连带影响,还原按钮可正常显示、点击生效 - 如果你已经通过dataZoom滑块、鼠标滚轮等其他方式实现了图表缩放交互,仅需要工具栏提供一键还原缩放的能力,上述配置可直接使用,点击还原按钮会正常将图表缩放状态重置为初始值
- 可选的
brushStyle配置用于屏蔽残留的框选缩放蒙层,无相关误触问题可以不添加
内容的提问来源于stack exchange,提问作者Bada
相关产品推荐
相关产品推荐

