Echarts toolbox相关配置 dataZoom缩放

前言:最近开发遇到一个echarts相关问题,需要实现用户鼠标滚动实现图表缩放,或者实现选中某一段区域进行缩放,放大效果;

1.第一个需求就是区域缩放按钮要隐藏掉,用户鼠标放在图表内就默认实现选择效果,并且区域缩放还原按钮不能隐藏,需要在初始化配置这三个属性.

javascript 复制代码
// 假设你已经在某处创建了 ECharts 实例
var myChart = echarts.init(document.getElementById('main'));

// 图表配置
var option = {
  toolbox: {
    feature: {
      dataZoom: {
        show: true,
        yAxisIndex: 'none'
      }
    }
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100,
    }
  ],
  // 其余配置
};

// 设置图表选项
myChart.setOption(option);

// 一旦图表加载完毕,立即触发区域缩放功能
setTimeout(function() {
    myChart.dispatchAction({
        type: 'takeGlobalCursor',
        key: 'dataZoomSelect',
        dataZoomSelectActive: true
    });
}, 0);

2.区域缩放按钮隐藏,区域缩放还原显示

javascript 复制代码
toolbox: {
  feature: {
    dataZoom: {
      show: true,
      yAxisIndex: 'none',
      // 修改图标样式,主要是有zoom 和 back 2个属性
      icon:{

        zoom:'image://http://example.website/a/b.png', //改成不存在路径即可 就不显示
        back:'',// 需要显示就默认不管即可  (而且想换图标样式的也是改这2个属性)
    }
    }
  },
  right: 60,
  top: -5
}

3.关于toolbox 一些详细配置属性

javascript 复制代码
option = {
    toolbox: {
        show: true, // 是否显示工具箱
        orient: 'horizontal', // 工具箱的布局方向,可选值为'horizontal'和'vertical'
        left: 'right', // 当 orient 为 'horizontal' 时,工具箱的左右位置。可选值:'left', 'center', 'right' 或者相应的百分比
        top: 'top', // 当 orient 为 'vertical' 时,工具箱的上下位置。可选值:'top', 'middle', 'bottom' 或者相应的百分比
        feature: {
            mark: {show: true}, // 显示标记点工具,可以通过点击标记点对应的图标进行标记点的选中
            dataView: {show: true, readOnly: false}, // 显示数据视图工具,可以展示当前图表的数据
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']}, // 显示动态类型切换工具,可以切换图表的类型
            restore: {show: true}, // 显示还原工具,可以还原到初始状态
            saveAsImage: {show: true} // 显示保存为图片工具,可以将当前图表保存为图片
            dataZoom:{
            
            title: {
            zoom: '区域缩放' ,
            back: '区域缩放还原' ,
                    }
            icon: {
            zoom ... ,
            back ... ,
                }
            show: true ,
            }
        }
        },
        series: [
        // ... 系列列表
        ]
        // ... 其他配置项
        };
相关推荐
ModyQyW11 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字17 分钟前
Kotlin lazy 委托的底层实现原理
前端
gnip38 分钟前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript