Apache ECharts 实现散点图与边缘直方图的组合展示

在数据可视化领域，散点图（Scatter Plot）与边缘直方图（Marginal Histogram）的组合是一种经典的多维度数据展示方式。这种组合能够同时呈现数据的分布特征和变量间的相关性，广泛应用于统计分析、机器学习等领域。Apache ECharts 作为一款强大的可视化库，同样支持这种高级图表组合的实现。

核心思路

实现散点图与边缘直方图组合的关键在于多坐标系（Grid）的协同控制。通过将主坐标系（散点图）与辅助坐标系（直方图）按比例布局，即可形成边缘直方图的视觉效果。具体技术要点如下：

1. 坐标系划分
   使用 grid 配置项定义多个矩形区域：

   • 主 grid 用于散点图，占据中心大部分区域
   • 辅助 grid 用于直方图，紧贴主坐标系的边缘（如顶部/右侧）

2. 数据映射同步
   需确保直方图的 bin 划分与散点图的坐标轴刻度对齐，这需要通过：

   • 手动计算直方图分箱（binning）
   • 或使用 echarts-stat 扩展的 histogram 转换功能

3. 视觉样式协调
   通过统一配色、隐藏冗余坐标轴等方式，使组合图表呈现整体性

实现示例

option = {
  grid: [
    // 主坐标系（散点图）
    {
      right: '15%',
      top: '15%',
      width: '70%',
      height: '70%'
    },
    // 顶部直方图
    {
      right: '15%',
      top: '5%',
      width: '70%',
      height: '10%',
      containLabel: true
    },
    // 右侧直方图
    {
      right: '5%',
      top: '15%',
      width: '10%',
      height: '70%',
      containLabel: true
    }
  ],
  xAxis: [
    // 散点图X轴
    { gridIndex: 0, ... },
    // 顶部直方图X轴（与散点图同步）
    { gridIndex: 1, show: false }
  ],
  yAxis: [
    // 散点图Y轴
    { gridIndex: 0, ... },
    // 右侧直方图Y轴
    { gridIndex: 2, show: false }
  ],
  series: [
    // 散点图系列
    { type: 'scatter', xAxisIndex: 0, yAxisIndex: 0, ... },
    // 顶部直方图系列
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1, ... },
    // 右侧直方图系列
    { type: 'bar', xAxisIndex: 2, yAxisIndex: 2, ... }
  ]
}

进阶技巧

1. 动态响应
   通过 resize 事件监听器自动调整多 grid 的尺寸比例，确保在不同屏幕尺寸下的显示效果

2. 交互联动
   利用 connect 功能实现刷选（brush）等高阶交互：

   echarts.connect([scatterChart, histChart1, histChart2]);
   

3. 性能优化
   对于大数据量场景，建议：

   • 对直方图数据预聚合
   • 启用散点图的渐进渲染（progressive）
   • 使用 WebGL 渲染器（svg-renderer）

适用场景

这种组合图表特别适合以下分析场景：

• 探索性数据分析（EDA）中的变量关系检验
• 聚类结果的可视化验证
• 数据质量检查（离群值识别等）

通过 Apache ECharts 强大的配置能力，开发者可以灵活调整各部分的显示比例、交互方式等参数，打造专业级的数据分析仪表盘。这种实现方式既保持了代码的简洁性，又提供了充分的定制空间。