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

在数据可视化领域，散点图与边缘直方图的组合（Scatter with Marginal Histogram）是一种经典的多维度数据展示方式。它通过在主图（散点图）的坐标轴边缘叠加直方图，既能展示变量间的相关性，又能直观呈现单变量的分布特征。Apache ECharts 作为强大的可视化库，原生支持通过多坐标系和自定义布局实现这一效果。

核心实现原理

1. 多坐标系布局
   利用 grid 配置项划分主图和边缘图的显示区域。例如：

   • 主散点图占据中心区域（如 grid: {width: '70%', height: '70%'}）
   • X/Y轴边缘直方图分别通过额外的 grid 区域定位（如 left: '75%' 或 top: '75%'）

2. 数据联动
   主散点图与边缘直方图共享同一份数据源，通过 dataset 实现数据绑定。直方图数据可通过 echarts-stat 插件或自定义分箱计算生成。

3. 视觉对齐
   通过调整坐标轴的 scale: true 和 boundaryGap 属性，确保主图与边缘图的刻度对齐，避免视觉偏差。

完整实现示例

option = {
  dataset: { source: [...] }, // 共享数据源
  grid: [
    // 主散点图区域
    { left: '10%', right: '20%', bottom: '20%', top: '10%' },
    // X轴边缘直方图
    { left: '10%', right: '20%', bottom: '5%', height: '15%' },
    // Y轴边缘直方图
    { left: '5%', width: '15%', bottom: '20%', top: '10%' }
  ],
  xAxis: [
    // 主图X轴
    { gridIndex: 0, type: 'value' },
    // 边缘直方图X轴（隐藏）
    { gridIndex: 1, show: false }
  ],
  yAxis: [
    // 主图Y轴
    { gridIndex: 0, type: 'value' },
    // 边缘直方图Y轴（隐藏）
    { gridIndex: 2, show: false }
  ],
  series: [
    // 主散点图
    { type: 'scatter', xAxisIndex: 0, yAxisIndex: 0 },
    // X轴直方图
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1, 
      barWidth: '99%', itemStyle: { opacity: 0.6 } },
    // Y轴直方图（需转置）
    { type: 'bar', xAxisIndex: 2, yAxisIndex: 2, 
      barWidth: '99%', itemStyle: { opacity: 0.6 } }
  ]
};

高级技巧

1. 响应式适配
   通过 resize 事件监听动态计算 grid 尺寸，适配不同屏幕。

2. 交互增强
   添加 brush 组件实现联动筛选，或通过 dataZoom 同步控制显示范围。

3. 样式优化

   • 使用半透明色避免边缘图遮挡主图
   • 为直方图添加渐变填充增强层次感

这种组合图表特别适用于医学统计、金融数据分析等需要同时观察分布特征和相关性的场景。通过 ECharts 灵活的配置体系，开发者可以快速构建出专业级的多维度数据可视化方案。