ECharts的布局与定位

grid

yAxis.axisLabel.inside = false

1

如果 yAxis.axisLabel.inside = true，差别就是 grid 左侧不再有 yAxis.axisLabel 的最大宽度这一块区域，而是 grid 直接把 axisLabel 包含进去了。

axis.name

在 AxisBuilder.ts 中：

1
2
3
4
5
6
7
8
9
10
11
const pos = [
  nameLocation === 'start'
    ? extent[0] - gapSignal * gap
    : nameLocation === 'end'
    ? extent[1] + gapSignal * gap
    : (extent[0] + extent[1]) / 2, // 'middle'
  // Reuse labelOffset.
  isNameLocationCenter(nameLocation)
    ? opt.labelOffset + nameDirection * gap
    : 0,
];

nameLocation === “start”：绘图区域起点 - nameGap

nameLocation === “end”：绘图区域终点 + nameGap

nameLocation === “middle/center”：(绘图区域起点 + 绘图区域终点) / 2

注意：绘图区域(轴范围) 不是 数据点范围，一般 绘图区域 > 数据点范围

当没配置 dvPadding(轴两侧的内边距) 时，gridRectBoundingRect.width = xAxisExtent[1]

当配置了 dvPadding 时：
xAxisExtent[0] = dvPadding[0]
xAxisExtent[1] = gridRectBoundingRect.width - dvPadding[1]

nameGap

x 的 nameGap 影响的是 xAxis.name 和 Y 轴的左右位置，不影响和 X 轴的上下位置。

负数往左移动：
1
正数往右移动：
1

y 的 nameGap 影响的是 yAxis.name 和 X 轴的上下位置，不影响和 Y 轴的左右位置。

负数往下移动：
1
正数往上移动：
1

axis.name 相对 grid

padding[2]，即 right，根本不需要考虑 grid，因为默认就是绑定右侧的。
和 axisLabel.inside 没有任何关系！这个耗费我大量时间！

注意：必须明文设置nameGap: 0 ！