Apache ECharts 如何在图表加载时默认开启toolbox的brush及多选功能

实现方案 #

你可以通过 ECharts 官方提供的事件调度接口实现需求，无需操作DOM元素，具体步骤如下：

1. 调整基础配置，明确开启多选（keep）模式
   你之前的配置缺少toolbox.feature.brush声明，同时新增brushMode: 'multiple'对应多选keep功能：

let options = {
  toolbox: {
    orient: 'vertical',
    feature: {
      // 显式声明brush工具
      brush: {
        type: ['lineX', 'keep']
      }
    }
  },
  brush: {
    xAxisIndex: backsplashGridIndex,
    brushMode: 'multiple', // 对应keep多选模式，刷选后默认保留已有选区
    // 可自定义刷选框样式
    brushStyle: {
      color: 'rgba(120,140,180,0.3)',
      borderColor: 'rgba(120,140,180,0.8)'
    }
  },
  // 其余原有图表配置...
}

2. 图表渲染完成后主动激活刷选模式
   通过dispatchAction调用takeGlobalCursor接口，激活对应类型的刷选功能：

// 初始化图表实例
const chart = echarts.init(你的DOM容器)
chart.setOption(options)

// 监听首次渲染完成事件，触发默认刷选
chart.on('finished', () => {
  // 取消监听避免重复触发
  chart.off('finished')
  chart.dispatchAction({
    type: 'takeGlobalCursor',
    key: 'brush',
    brushOption: {
      brushType: 'lineX' // 对应你要默认激活的横向刷选类型
    }
  })
})

补充说明 #

• 如果需要默认取消刷选状态，将brushType设为'clear'即可
• takeGlobalCursor是ECharts原生提供的全局光标调度接口，效果和手动点击toolbox对应按钮完全一致

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