如何不使用toolbox默认开启ECharts鼠标框选区域dataZoom功能

完全可以实现你要的效果，不需要依赖toolbox组件，也不会新增底部slider滑块、不会改变原有图表外观，具体配置如下： #

核心配置 #

你只需要在ECharts的option中加入dataZoom和brush相关配置即可：

option = {
  // 你原有的其他配置，比如title、xAxis、yAxis、series等保持不变
  dataZoom: [
    // 内置缩放组件，无可见UI，可选支持滚轮缩放、拖拽平移
    {
      type: 'inside',
      xAxisIndex: 0, // 绑定需要缩放的X轴索引，多轴场景可调整为对应索引或数组
      start: 0,
      end: 100,
      // 如果不需要滚轮缩放，取消下一行注释即可
      // zoomOnMouseWheel: false
    },
    // 框选缩放专用配置，无可见UI
    {
      type: 'select',
      xAxisIndex: 0,
      start: 0,
      end: 100,
      show: false
    }
  ],
  brush: {
    xAxisIndex: 'all', // 限制只能横向框选X轴范围，符合你的需求
    defaultBrushType: 'rect', // 默认开启矩形框选模式，不需要点击toolbox按钮激活
    removeOnClick: true, // 点击空白处即可清除框选状态
    inBrush: {
      opacity: 1
    },
    outOfBrush: {
      opacity: 0.4
    }
  }
}

双击复原补充配置 #

如果需要更稳定的双击复原缩放效果，可在图表实例初始化后绑定双击事件：

// myChart为你的ECharts实例对象
myChart.on('dblclick', () => {
  myChart.dispatchAction({
    type: 'dataZoom',
    start: 0,
    end: 100
  })
})

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