如何在echarts-for-react的柱状图顶部显示数值？

echarts-for-react本质是对原生ECharts的封装，所以只需在ECharts配置项（option）的柱状图series中添加标签配置即可实现需求，具体步骤如下：

核心配置示例 #

import ReactECharts from 'echarts-for-react';

const BarChart = () => {
  const option = {
    xAxis: {
      type: 'category',
      data: ['类别1', '类别2', '类别3']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '数值',
        type: 'bar',
        data: [30000, 25000, 40000],
        // 开启柱子顶部的数值标签
        label: {
          show: true,
          position: 'top', // 固定标签在柱子顶部
          formatter: (params) => params.value.toLocaleString() // 格式化数值为千分位格式，如30,000
        }
      }
    ]
  };

  return <ReactECharts option={option} />;
};

export default BarChart;

关键配置说明 #

• label.show: true：开启数值标签的显示
• label.position: 'top'：指定标签渲染在柱子的顶部位置
• label.formatter：自定义数值格式，示例中用toLocaleString()快速实现千分位分隔，若需要其他格式（如保留小数、单位转换），可自定义逻辑，例如：

  formatter: (params) => {
    // 转换成带单位的格式，如3.0万
    return `${(params.value / 10000).toFixed(1)}万`;
  }
  

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