Apache ECharts如何禁用dataZoomSelect默认缩放，拉取服务端数据重绘图表

该需求完全可以实现，核心是通过ECharts内置的brush（刷选）组件替代默认的dataZoom框选缩放逻辑，拦截默认交互行为，监听框选完成事件触发自定义数据请求即可，具体实现思路如下：

1. 基础配置调整 #

• 关闭默认的dataZoom缩放交互，替换为brush组件的框选能力，根据业务需求配置框选范围（仅X轴、仅Y轴、XY轴自由框选均可）。
• 基础配置示例：

const chartOption = {
  // 原有图表其他配置（xAxis、yAxis、series等）保留
  brush: {
    // 配置框选类型为矩形，仅需要X轴范围可改为lineX
    brushType: 'rect',
    // 绑定需要响应框选的坐标轴索引
    xAxisIndex: 0,
    yAxisIndex: 0,
    // 点击空白处自动清除选框痕迹
    removeOnClick: true,
    // 配置工具栏可选框选按钮，不需要手动切换可删除toolbox配置
    toolbox: ['rect', 'clear']
  },
  // 若之前启用了dataZoom组件，禁用默认缩放逻辑
  dataZoom: [
    {
      type: 'inside',
      disabled: true
    },
    {
      type: 'slider',
      disabled: true
    }
  ]
}

2. 监听框选完成事件，触发自定义逻辑 #

给ECharts实例绑定brushselected事件，在回调中拿到选中区域的坐标范围，清除选框痕迹后发起服务端请求，拿到新数据后重绘图表即可。

const myChart = echarts.init(document.getElementById('chart-container'))
myChart.setOption(chartOption)

// 监听框选完成事件
myChart.on('brushselected', (event) => {
  // 获取选中区域的坐标范围，格式为[[x轴最小值, x轴最大值], [y轴最小值, y轴最大值]]
  const selectedArea = event.batch[0].areas[0].coordRange
  const [xRange, yRange] = selectedArea

  // 立刻清除页面上的框选痕迹
  myChart.dispatchAction({
    type: 'brush',
    command: 'clear'
  })

  // 传入范围参数向服务端请求业务数据
  fetch(`/your/api/path?xStart=${xRange[0]}&xEnd=${xRange[1]}&yStart=${yRange[0]}&yEnd=${yRange[1]}`)
    .then(res => res.json())
    .then(data => {
      // 用新数据重绘图表
      myChart.setOption({
        series: [
          {
            data: data.list
          }
        ]
      })
    })
})

3. 可选优化 #

如果需要默认开启框选模式，不需要用户手动点击工具栏的框选按钮，可在图表初始化完成后调用以下代码自动激活全局框选：

myChart.dispatchAction({
  type: 'takeGlobalCursor',
  key: 'brush',
  brushOption: {
    brushType: 'rect'
  }
})

若你的场景仅需要选择X轴时间范围，可将brushType修改为lineX，用户仅能横向拖动框选，交互更贴合时序类图表的使用习惯。

内容的提问来源于stack exchange，提问作者KoreDev