如何去除Apache ECharts柱状图标签文本的白色描边

要移除柱状图标签的白色描边并仅显示黑色文本，你需要在series的label配置中添加textStyle属性，通过设置textBorderWidth为0关闭描边，同时指定文本颜色为黑色。

修改后的核心配置片段 #

在你的series->label对象中补充文本样式配置：

label: {
  show: true,
  formatter: (params) => formatMoney(params.value[0]),
  // 新增文本样式配置
  textStyle: {
    color: '#000000', // 设置文本为黑色
    textBorderWidth: 0 // 关闭白色描边
  }
},

完整修改后的配置代码 #

const option = useMemo(() => {
if (data) {
  return {
    dataset: {
      source: data,
    },
    textStyle: {
      fontFamily: "'Open Sans', sans-serif",
    },
    title: {
      text: "AR Aging",
      left: "left",
      textStyle: {
        fontFamily: "'Open Sans', sans-serif",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    color: ["#ff4242", "#ff4242", "#FFA500", "#fddc20", "#209c05"],
    grid: { containLabel: true, height: "70%" },
    xAxis: {
      name: "Amount",
      axisLabel: {
        formatter: (params) => formatMoney(params),
      },
    },
    yAxis: { name: "Period", type: "category" },
    series: [
      {
        type: "bar",
        colorBy: "data",
        legendHoverLink: true,
        label: {
          show: true,
          formatter: (params) => formatMoney(params.value[0]),
          // 新增文本样式配置
          textStyle: {
            color: '#000000',
            textBorderWidth: 0
          }
        },
        labelLayout(params) {
          return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: "middle",
            align: "left",
          };
        },
        encode: {
          x: "Amount",
          y: "Period",
        },
      },
    ],
  };
}
}, [data]);

配置说明 #

• textBorderWidth: 0：直接关闭文本描边效果，彻底移除白色边框
• color: '#000000'：显式指定文本为黑色，确保文本与背景清晰区分

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