ECharts如何实现brush刷选区域透明、未选中区域变暗效果

这个效果可以直接实现，无需修改ECharts源码，通过原生配置+事件监听即可完成。

实现核心逻辑 #

• 关闭brush默认选区的填充色，将其设置为完全透明，避免默认样式遮挡图表
• 监听brush相关事件，实时获取刷选区域的坐标范围
• 通过ECharts的graphic图形组件，在选区外侧的四个方向绘制半透明黑色遮罩，仅留选区位置透出，自然实现未选中区域变暗、选中区域高亮的效果
• 清空刷选时同步移除所有遮罩，恢复图表初始状态

核心实现代码 #

// 初始化图表
const myChart = echarts.init(document.getElementById('chart-container'))
let maskList = [] // 存储生成的遮罩元素

// 基础配置
const option = {
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    type: 'scatter',
    data: [[12,32], [34,23], [56,78], [29,61], [72,44]] // 替换为实际业务数据
  }],
  brush: {
    toolbox: ['rect', 'clear'], // 启用矩形刷选、清空刷选工具
    brushStyle: {
      color: 'rgba(0,0,0,0)', // 选区本身设为全透明
      borderColor: '#fff', // 可选：给选区加白色边框，方便识别选区边界
      borderWidth: 1
    },
    throttleType: 'debounce',
    throttleDelay: 20
  },
  graphic: []
}

myChart.setOption(option)

// 监听刷选事件，实时更新遮罩
myChart.on('brushSelected', (params) => {
  // 先清除历史遮罩
  myChart.setOption({ graphic: [] })
  maskList = []
  const currentArea = params.areas[0]
  if (!currentArea) return

  // 把数据坐标转换为画布像素坐标
  const [xDataMin, xDataMax] = currentArea.coordRange[0]
  const [yDataMin, yDataMax] = currentArea.coordRange[1]
  const xPxMin = myChart.convertToPixel({xAxisIndex: currentArea.xAxisIndex[0]}, xDataMin)
  const xPxMax = myChart.convertToPixel({xAxisIndex: currentArea.xAxisIndex[0]}, xDataMax)
  const yPxMin = myChart.convertToPixel({yAxisIndex: currentArea.yAxisIndex[0]}, yDataMin)
  const yPxMax = myChart.convertToPixel({yAxisIndex: currentArea.yAxisIndex[0]}, yDataMax)
  const chartW = myChart.getWidth()
  const chartH = myChart.getHeight()

  // 生成四个方向的遮罩块，覆盖所有未选中区域
  const masks = [
    // 选区上方遮罩
    { type: 'rect', shape: {x:0, y:0, width: chartW, height: yPxMax}, style: {fill: 'rgba(0,0,0,0.5)'}, z: 999 },
    // 选区下方遮罩
    { type: 'rect', shape: {x:0, y:yPxMin, width: chartW, height: chartH - yPxMin}, style: {fill: 'rgba(0,0,0,0.5)'}, z: 999 },
    // 选区左侧遮罩
    { type: 'rect', shape: {x:0, y:yPxMax, width: xPxMin, height: yPxMin - yPxMax}, style: {fill: 'rgba(0,0,0,0.5)'}, z: 999 },
    // 选区右侧遮罩
    { type: 'rect', shape: {x:xPxMax, y:yPxMax, width: chartW - xPxMax, height: yPxMin - yPxMax}, style: {fill: 'rgba(0,0,0,0.5)'}, z: 999 }
  ]
  myChart.setOption({ graphic: masks })
  maskList = masks
})

// 清空刷选时同步移除遮罩
myChart.on('brushClear', () => {
  myChart.setOption({ graphic: [] })
  maskList = []
})

可调参数说明 #

• 遮罩透明度：修改fill属性里的alpha通道值即可，数值越大未选中区域越暗，推荐0.4-0.6区间视觉效果最好
• 多选区支持：遍历params.areas数组，为每个选区生成对应镂空遮罩即可适配多区域刷选场景
• 一维刷选适配：如果是横向/纵向的条形刷选，只需要保留对应方向的两个遮罩块即可

效果参考：

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