如何在ECharts中实现与主图价格Y轴同步的右对齐水平Volume Profile（成交量分布）

阿华AIGC实验室

2026-3-31

我明白你想要实现的是右侧固定区域的水平成交量分布（Volume Profile），和主图的价格Y轴完全同步，下面我会一步步帮你修改配置，同时解释每个部分的作用：

核心修改思路

Volume Profile的本质是按价格区间统计的成交量总和，所以需要把原来按时间维度的成交量数据，转换为价格维度的成交量统计数据，同时让右侧图表的Y轴和主图价格Y轴严格对齐，布局上独立在右侧固定宽度区域。

具体配置修改步骤

1. 调整Grid与轴的联动设置

保留双Grid布局，确保右侧Grid宽度固定（比如80px），且和主图Grid高度完全一致，这样Y轴才能精准对齐
让右侧Volume Profile的Y轴与主图价格Y轴强制同步范围，通过函数式配置自动跟随主图的刻度变化
新增右侧Grid专属的X轴，用于表示成交量数值

2. 重构Volume系列的配置

将Volume系列改为水平方向的柱状图，让柱子沿水平方向延伸（对应成交量大小）
关联右侧Grid的X/Y轴，数据结构改为[成交量数值, 价格水平]的格式，确保Y轴对应价格、X轴对应成交量
隐藏右侧轴的冗余元素，只保留必要的视觉提示

3. 优化交互联动

确保axisPointer同时联动所有X/Y轴，鼠标hover时价格刻度同步高亮
自定义tooltip内容，同时显示主图价格和对应价格区间的成交量

完整修改后的配置代码

const config = {
  "toolbox": { "show": false },
  // 双Grid布局：主图区域 + 右侧Volume Profile固定区域
  "grid": [
    { "left": 0, "right": 80, "top": 0, "bottom": 0 }, // 主图留80px给右侧成交量区域
    { "left": "auto", "right": 0, "width": 80, "top": 0, "bottom": 0, "containLabel": false } // 右侧固定宽度的独立区域
  ],
  // 轴指示器联动：鼠标hover时，主图和右侧成交量区的价格刻度同步高亮
  "axisPointer": {
    "link": [
      { "xAxisIndex": "all" },
      { "yAxisIndex": "all" }
    ]
  },
  "tooltip": {
    "trigger": "axis",
    // 自定义tooltip，同时展示价格和对应成交量
    "formatter": function(params) {
      let tipContent = '';
      params.forEach(item => {
        if (item.seriesName === 'Fake Data') {
          tipContent += `${item.seriesName}: ${item.value[1].toFixed(6)}<br/>`;
        } else if (item.seriesName === 'Volume Profile') {
          tipContent += `${item.seriesName}: ${item.value[0].toFixed(2)}`;
        }
      });
      return tipContent;
    }
  },
  "brush": {
    "yAxisIndex": "all",
    "brushLink": "all",
    "outOfBrush": { "colorAlpha": 0.1 }
  },
  "xAxis": [
    // 主图X轴：时间维度
    {
      "type": "category",
      "axisLine": { "show": true },
      "splitLine": { "show": false },
      "axisTick": { "show": false },
      "data": [ "2025-10-11T08:35:59.000+00:00", "2025-10-11T09:35:59.000+00:00", "2025-10-11T10:35:59.000+00:00", "2025-10-11T11:36:23.000+00:00", "2025-10-11T12:36:47.000+00:00", "2025-10-11T13:37:11.000+00:00", "2025-10-11T14:37:35.000+00:00", "2025-10-11T15:37:47.000+00:00", "2025-10-11T16:38:35.000+00:00", "2025-10-11T17:38:59.000+00:00" ],
      "gridIndex": 0
    },
    // 右侧Volume Profile的X轴：成交量维度
    {
      "type": "value",
      "scale": true,
      "axisLine": { "show": false },
      "splitLine": { "show": false },
      "axisTick": { "show": false },
      "axisLabel": { "show": true, "fontSize": 10 },
      "gridIndex": 1
    }
  ],
  "yAxis": [
    // 主图Y轴：价格维度
    {
      "type": "value",
      "scale": true,
      "splitLine": { "show": false },
      "axisLabel": { "show": true, "fontSize": 10 } // 显示价格刻度，方便和右侧对齐
    },
    // 右侧Volume Profile的Y轴：与主图价格轴完全同步
    {
      "type": "value",
      "scale": true,
      "splitLine": { "show": false },
      "axisLabel": { "show": false },
      "axisLine": { "show": false },
      "axisTick": { "show": false },
      "position": "left", // 在右侧区域内，Y轴放在左侧，和主图Y轴对齐
      "gridIndex": 1,
      "min": (value) => value.min, // 自动同步主图Y轴最小值
      "max": (value) => value.max  // 自动同步主图Y轴最大值
    }
  ],
  "dataZoom": [
    { "type": "inside", "xAxisIndex": 0 } // 只对主图时间轴做缩放
  ],
  "series": [
    // 主图价格线
    {
      "name": "Fake Data",
      "type": "line",
      "symbol": "none",
      "data": [ [ "2025-10-11T08:35:59.000+00:00", 1.2155066393580016 ], [ "2025-10-11T09:35:59.000+00:00", 1.2154868909655494 ], [ "2025-10-11T10:35:59.000+00:00", 1.2154729901909682 ], [ "2025-10-11T11:36:23.000+00:00", 1.2154630966833069 ], [ "2025-10-11T12:36:47.000+00:00", 1.2157154516009998 ], [ "2025-10-11T13:37:11.000+00:00", 1.215828837107522 ], [ "2025-10-11T14:37:35.000+00:00", 1.2158148080704236 ], [ "2025-10-11T15:37:47.000+00:00", 1.215785284344764 ], [ "2025-10-11T16:38:35.000+00:00", 1.2157795439485928 ], [ "2025-10-11T17:38:59.000+00:00", 1.215747809495948 ] ],
      "xAxisIndex": 0,
      "yAxisIndex": 0
    },
    // 右侧Volume Profile水平柱状图
    {
      "name": "Volume Profile",
      "type": "bar",
      "barDirection": "horizontal", // 设置为水平柱状图
      "barWidth": 8, // 调整柱子宽度，适配右侧区域
      "xAxisIndex": 1, // 关联右侧成交量X轴
      "yAxisIndex": 1, // 关联同步价格的Y轴
      // 注意：这里数据是[成交量, 价格]格式，需要提前按价格区间统计好总成交量
      "data": [
        [410, 1.2155],
        [360, 1.2156],
        [520, 1.2157],
        [960, 1.2158],
        [610, 1.2159]
      ],
      "itemStyle": {
        "color": "#5470c6" // 自定义柱子颜色
      }
    }
  ]
};

关键注意事项

数据格式转换：你需要把原来按时间点的成交量数据，通过分组统计（比如按价格区间求和）转换成[成交量, 价格]的格式，代码中的Volume Profile数据是示例，记得替换成自己的统计结果。
Y轴同步细节：右侧Y轴通过函数式的min/max配置，自动跟随主图价格轴的刻度变化，即使主图缩放、平移，右侧也会精准对齐。
样式自定义：可以根据需求调整barWidth、itemStyle.color、轴标签字体大小等，让图表更贴合你的设计风格。
交互扩展：如果需要添加成交量的分组区间提示，还可以给tooltip补充价格区间说明，或者在右侧轴添加辅助线。

如果还有细节需要调整，随时提出来，我再帮你优化～