如何修改React ApexChart中的默认'series-1'文本？

快速解决方法 #

要替换环形图里默认的'series-1'文本，有两种直接有效的方式：

方式1：通过options.labels定义 #

在图表配置的options里添加labels数组，数组里的文本会自动对应系列的名称：

const chartOptions = {
  chart: { type: 'radialBar' },
  labels: ['你的自定义文本'], // 这里直接替换默认名称
  plotOptions: {
    radialBar: {
      dataLabels: {
        name: {
          show: true, // 必须开启才能显示名称文本
          fontSize: '18px', // 可自定义字号
        }
      }
    }
  }
};

const series = [65]; // 对应的数据值

方式2：在series数组中直接命名 #

如果是多系列场景，或者需要给单个系列单独命名，可以把series定义为对象数组：

const series = [
  { name: '自定义文本1', value: 65 },
  { name: '自定义文本2', value: 35 }
];

const chartOptions = {
  chart: { type: 'radialBar' },
  plotOptions: {
    radialBar: {
      dataLabels: {
        name: { show: true }
      }
    }
  }
};

排查要点 #

• 确认options.plotOptions.radialBar.dataLabels.name.show是true，否则即使配置了名称也不会显示
• 如果使用了dataLabels.formatter，要避免覆盖名称的默认渲染逻辑
• 检查是否有自定义样式或者其他配置项隐藏了名称文本

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