框选放大

• 高级
• father::ECharts, 常见的前端业务需求
• 能直接在图表内部中框选的只有toolbox.feature.dataZoom
• 但默认它只能由用户点击操作
• 且直接设置show：false会导致功能失效，只能通过图标隐藏

最佳实践

const activateZoom = (instance: EChartsInstance) => {
  
  instance.dispatchAction({
    type: 'takeGlobalCursor',
    key: 'dataZoomSelect',
    dataZoomSelectActive: true,
  }) // 模拟点击按钮，默认启用框选功能
  instance.setOption({
    toolbox: {
      show: false,
    },
  })
}
/** 
* 注意使用该功能会导致又一次触发监听器（循环调用），必须搭配防抖使用
*/
const resetDataZoom = () => {
  if (!echartsInstance) return
  echartsInstance.dispatchAction({
    type: 'dataZoom',
    // 指定要操作的 dataZoom 组件，0 表示第一个
    dataZoomIndex: 0,
    // 数据窗口范围的起始百分比
    start: 0,
    // 数据窗口范围的结束百分比
    end: 100,
  })
}
 
const handleDataZoom = (params: {
  batch?: { startValue: number; endValue: number }[]
  startValue?: number
  endValue?: number
}) => {
  resetDataZoom() // 可选，用于自定义放大功能
 
  echartsInstance.setOption({
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          icon: {
            zoom: 'path://', //隐藏原图标，并且不影响功能
            back: 'path://',
          },
        },
        restore: {
          show: true, // 只在放大的时候，显示还原按钮
        },
      },
    },
  })