brush刷选组件完全指南

📋 概述

**brush（刷选组件）**是ECharts提供的区域选择工具，允许用户通过鼠标框选图表中的特定区域或数据点，实现数据筛选、联动分析、局部放大等功能。它是探索性数据分析的利器。

核心价值

• 区域选择：框选感兴趣的数据区域
• 数据筛选：根据选择过滤和展示数据
• 多图表联动：一个图表的选择影响其他图表
• 交互增强：提升用户对数据的探索能力

---

🎯 核心概念

1. 基础brush配置

option = {
  brush: {
    toolbox: ['rect', 'polygon', 'keep', 'clear'],
    xAxisIndex: 0 // 绑定的x轴
  },
  
  series: [{
    type: 'scatter',
    data: scatterData
  }]
};

2. 刷选类型

类型	说明	用途
rect	矩形选择	常规区域选择
polygon	多边形选择	不规则区域
lineX	横向范围	时间区间选择
lineY	纵向范围	数值区间选择
keep	保持多个选区	多选模式
clear	清除选区	清空操作

---

🔧 详细配置项

完整brush配置

option = {
  brush: {
    // === 工具箱 ===
    toolbox: ['rect', 'polygon', 'keep', 'clear'],
    
    // === 绑定坐标轴 ===
    xAxisIndex: 0, // 绑定的x轴索引
    yAxisIndex: 0, // 绑定的y轴索引
    
    // === 默认启用的工具 ===
    selectedMode: 'multiple', // 'single' | 'multiple'
    
    // === 刷子样式 ===
    brushStyle: {
      borderWidth: 1,
      color: 'rgba(120,140,180,0.3)',
      borderColor: 'rgba(120,140,180,0.8)'
    },
    
    // === 变换手柄样式 ===
    transformHandle: {
      show: true,
      size: 6,
      icon: 'circle'
    },
    
    // === 移除按钮 ===
    removeOnClick: true, // 点击空白处是否移除
    
    // === 节流 ===
    throttleDelay: 0 // 延迟触发（毫秒）
  }
};

---

💡 实战案例

案例1：散点图区域选择

// 生成随机散点数据
const scatterData = Array.from({length: 100}, () => [
  Math.random() * 100,
  Math.random() * 100
]);

option = {
  title: {
    text: '散点图区域选择',
    subtext: '框选查看选中数据'
  },
  
  tooltip: {
    trigger: 'item'
  },
  
  brush: {
    toolbox: ['rect', 'polygon', 'clear'],
    xAxisIndex: 0,
    brushStyle: {
      borderWidth: 2,
      color: 'rgba(84, 112, 198, 0.3)',
      borderColor: '#5470c6'
    }
  },
  
  xAxis: {
    type: 'value',
    min: 0,
    max: 100
  },
  
  yAxis: {
    type: 'value',
    min: 0,
    max: 100
  },
  
  series: [{
    type: 'scatter',
    data: scatterData,
    symbolSize: 8,
    itemStyle: {
      color: '#5470c6'
    }
  }]
};

// 监听刷选事件
chart.on('brushSelected', function(params) {
  const brushed = params.batch[0].selected;
  console.log('选中的数据:', brushed);
});

案例2：多图表联动刷选

// 两个图表共享brush
const option1 = {
  brush: {
    toolbox: ['lineX', 'clear'],
    xAxisIndex: 0,
    brushLink: 'all' // 链接所有图表
  },
  
  xAxis: {
    type: 'category',
    data: dates
  },
  
  series: [{
    type: 'line',
    data: salesData
  }]
};

const option2 = {
  brush: {
    xAxisIndex: 0,
    brushLink: 'all'
  },
  
  xAxis: {
    type: 'category',
    data: dates
  },
  
  series: [{
    type: 'bar',
    data: profitData
  }]
};

// 在两个图表上都应用brush
chart1.setOption(option1);
chart2.setOption(option2);

案例3：编程式控制brush

// 设置选区
chart.dispatchAction({
  type: 'brush',
  areas: [
    {
      brushType: 'rect',
      coordRange: [[10, 20], [30, 40]], // [[x1, y1], [x2, y2]]
      xAxisIndex: 0,
      yAxisIndex: 0
    }
  ]
});

// 清除选区
chart.dispatchAction({
  type: 'takeGlobalCursor',
  key: 'brush',
  brushOption: {
    enable: false
  }
});

---

⚠️ 常见问题

问题1：刷选不生效

解决：

// 确保series支持brush
series: [{
  type: 'scatter', // ✅ 支持
  // type: 'line', // ✅ 支持
  // type: 'bar',  // ✅ 支持
}]

// 检查brush配置
brush: {
  xAxisIndex: 0, // 确保与series使用的轴一致
  yAxisIndex: 0
}

问题2：选区样式不明显

解决：

brush: {
  brushStyle: {
    borderWidth: 3,                    // 增加边框宽度
    color: 'rgba(255, 0, 0, 0.3)',    // 更明显的颜色
    borderColor: 'rgba(255, 0, 0, 1)'  // 实色边框
  }
}

---

🎯 最佳实践

1. 选择合适的刷选类型

// 时间序列：使用lineX
brush: {
  toolbox: ['lineX', 'clear'],
  xAxisIndex: 0
}

// 散点图：使用rect
brush: {
  toolbox: ['rect', 'polygon', 'clear']
}

// 需要多选：添加keep
brush: {
  toolbox: ['rect', 'keep', 'clear']
}

2. 性能优化

brush: {
  throttleDelay: 100, // 节流100ms
  removeOnClick: true
}

3. 响应式配置

const isMobile = window.innerWidth < 768;

brush: {
  toolbox: isMobile ? [] : ['rect', 'clear'], // 移动端禁用
  brushStyle: {
    borderWidth: isMobile ? 3 : 2
  }
}

---

📊 性能指标

配置	影响	建议
简单刷选	<5ms	无限制
大数据量	20-50ms	启用throttleDelay
多图表联动	30-80ms	限制联动数量

---

🔗 相关链接

• toolbox工具箱
• dispatchAction控制

---

💎 总结

brush核心价值：

• ✅ 交互式数据筛选
• ✅ 多图表联动分析
• ✅ 探索性数据研究
• ✅ 编程式控制选区

关键配置原则：

1. 选择合适的type：rect/polygon/lineX/lineY
2. 绑定正确的轴：xAxisIndex/yAxisIndex匹配
3. 样式明显：borderWidth和color要醒目
4. 移动端禁用：小屏幕不适合刷选

掌握brush，让数据探索更灵活！🖌️

数据刷选功能

{
  "title": {
    "text": "数据刷选交互",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis"
  },
  "toolbox": {
    "feature": {
      "brush": {
        "type": [
          "rect",
          "polygon",
          "lineX",
          "lineY",
          "keep",
          "clear"
        ]
      }
    }
  },
  "brush": {
    "xAxisIndex": "all",
    "brushLink": "all"
  },
  "xAxis": {
    "type": "category",
    "data": [
      "周一",
      "周二",
      "周三",
      "周四",
      "周五",
      "周六",
      "周日"
    ]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "type": "bar",
      "data": [
        150,
        230,
        224,
        218,
        135,
        147,
        260
      ],
      "itemStyle": {
        "color": "#5470c6"
      }
    }
  ]
}