如何实现eCharts inverse功能同时保持y轴标题位于顶部

方案1：基于y轴原生标题属性动态适配 #

通过动态匹配inverse的取值设置对应标题位置参数，无需新增额外组件：

// 先定义你的inverse开关值，可根据业务逻辑修改
const yAxisInverse = true;
const yAxisConfig = {
  inverse: yAxisInverse,
  name: '你的Y轴标题内容',
  // 核心适配逻辑：反转时取start、未反转时取end，保证标题始终在坐标轴顶部
  nameLocation: yAxisInverse ? 'start' : 'end',
  // 调整标题与坐标轴间距，数值可按需调整
  nameGap: 20,
  nameTextStyle: {
    // 强制标题左对齐，避免位置偏移
    align: 'left',
    // 可通过padding微调横向偏移，顺序为上、右、下、左
    padding: [0, 0, 0, 10]
  }
  // 其余你原有的yAxis配置项保持不变
}

方案2：自定义固定标题（完全不受坐标轴配置影响） #

如果希望完全规避坐标轴属性变动对标题位置的影响，可以使用ECharts的graphic组件自定义文本，绝对定位到目标位置：

const option = {
  // 你原有的所有配置（grid、xAxis、yAxis、series等）保持不变
  graphic: [{
    type: 'text',
    // 位置数值可根据你的图表布局按需调整
    left: 15,
    top: 10,
    style: {
      text: '你的Y轴标题内容',
      fill: '#333',
      fontSize: 14
    },
    // 保证标题层级在图表上层不会被遮挡
    z: 100
  }]
}

注意事项 #

• 多Y轴场景下，给对应Y轴单独配置上述参数即可，不会互相干扰
• 所有间距、位置数值都可以根据你的实际图表边距、视觉要求调整

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