ECharts 5.3.3如何将横向柱状图标签置于图表外部？

要实现横向柱状图的数值标签显示在图表外部，只需调整grid布局和标签的位置配置，具体操作如下：

• 配置grid参数，为图表右侧留出足够容纳标签的空间，避免标签被裁剪
• 调整系列标签的位置，在柱子右侧基础上增加偏移量，使其完全显示在图表区域外
• 确保标签样式清晰可见

修改后的完整代码 #

const options = {
  title: {
    text: "World Populationss",
    show: false
  },
  tooltip: {
    trigger: "axis",
    show: false,
    axisPointer: {
      type: "none"
    }
  },
  legend: { show: false },
  // 关键：设置grid右侧留白，给标签留出位置
  grid: {
    left: '10%',
    right: '15%', // 可根据标签长度调整此值
    top: '10%',
    bottom: '10%',
    containLabel: false // 不强制限制标签在grid范围内
  },
  xAxis: {
    type: "value",
    show: false,
    axisLine: {
      show: false
    },
    z: 2,
    axisTick: {
      show: false
    },
    axisLabel: {
      formatter: "{value}",
      color: "#FFF",
      inside: false,
      show: true
    }
  },
  yAxis: {
    type: "category",
    data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
    show: true,
    position: "left",
    axisLine: {
      show: false
    },
    z: 3,
    axisTick: {
      show: false
    },
    axisLabel: {
      color: "#FFF",
      inside: true,
      show: true
    },
    nameLocation: "start"
  },
  series: [
    {
      name: "2022",
      type: "bar",
      data: [18203, 23489, 29034, 104970, 131744, 630230],
      label: {
        show: true,
        formatter: "{c}",
        // 关键：从柱子右侧再偏移20px，确保在图表外部
        position: ["100%", "50%"],
        offset: [20, 0],
        color: "#FFF", // 确保标签颜色与背景区分开
        align: 'left'
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#008D8E"
            },
            {
              offset: 1,
              color: "#24C1C3"
            }
          ],
          global: false
        },
        borderRadius: 4
      }
    }
  ]
};
const App: React.FC = () => {
  return (
    <ReactECharts
      theme={"dark"}
      style={{ height: 400, width: 400 }}
      option={options}
      opts={{ renderer: "svg" }}
    />
  );
};

export default App;

核心配置说明 #

• grid.right：设置为15%（可根据标签长度灵活调整），让图表区域向左收缩，右侧预留出放置标签的空间
• series.label.offset：设置[20, 0]，让标签从柱子右侧再向右偏移20px，完全脱离柱子区域显示在外部
• grid.containLabel：设为false，取消ECharts强制将标签限制在grid内的默认规则

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