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: [
        // ... 系列列表
        ]
        // ... 其他配置项
        };