自定义坐标轴间固定间距设置及相关技术问题咨询

嘿，针对你提到的要在多个左侧坐标轴之间设置20px固定间距，以及对应的两个疑问，我来分享下实际项目里常用的解决方案：

1. 像素设置时，如何获取坐标轴所在区域的高度 #

大部分主流可视化图表库（比如ECharts、Highcharts）都提供了获取内部布局元素尺寸的API，你可以按这个思路来拿到红线标注区域的高度：

• 先获取图表布局信息
  以ECharts为例，调用chart.getLayout()就能拿到图表里所有组件的位置和尺寸数据。左侧坐标轴所在的区域一般对应grid组件，你可以从中提取高度：

  const chart = echarts.init(document.getElementById('your-chart-id'));
  const layout = chart.getLayout();
  // 如果是多个grid，记得对应到你需要的那个索引
  const targetGrid = layout.grid[0];
  const axisAreaHeight = targetGrid.height; // 这就是红线标注区域的高度
  

  要是用Highcharts更直接，chart.plotHeight就是绘图区域（包含坐标轴的区域）的高度，直接用就行。
• 再计算坐标轴的起止位置
  假设你有n个左侧坐标轴，要保证每个之间留20px间距，那每个坐标轴的可用高度就是(axisAreaHeight - 20*(n-1))/n，再结合顶部偏移就能算出每个坐标轴的StartPosition和EndPosition了。

2. 把20px固定间距转换成百分比 #

要转成百分比，核心还是得先拿到坐标轴区域的实际高度（就是上面问题1里的axisAreaHeight），然后用这个公式计算：

间距百分比 = (20 / axisAreaHeight) * 100

举个例子，如果坐标轴区域高度是400px，那20px对应的就是5%的间距。

另外要注意，图表窗口大小变化时，坐标轴区域高度可能跟着变，所以最好在图表的resize事件里重新计算，保证间距始终是20px：

// ECharts的resize事件示例
chart.on('resize', function() {
  const layout = chart.getLayout();
  const targetGrid = layout.grid[0];
  const axisAreaHeight = targetGrid.height;
  const gapPercent = (20 / axisAreaHeight) * 100;
  // 重新设置坐标轴的起止位置
  chart.setOption({
    yAxis: [
      { start: 0, end: 50 - gapPercent/2 }, // 第一个坐标轴
      { start: 50 + gapPercent/2, end: 100 } // 第二个坐标轴
      // 更多坐标轴以此类推调整参数
    ]
  });
});

如果你的图表库没提供直接拿区域高度的API，还有个替代办法：找坐标轴对应的DOM容器，用offsetHeight获取它的实际高度。不过这个得熟悉图表生成的DOM结构，兼容性稍弱，但应急也能用。

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