React使用ApexCharts绘制radialBar图表时图例无法显示

问题根源 #

你的图例配置层级写错了：legend 是options下的一级配置项，和chart、plotOptions、labels属性平级，当前代码把legend写在了chart对象内部，引擎无法读取到图例配置，所以不会渲染。
另外你在组件上单独传了height={170}，和options.chart里配置的350高度冲突，容易出现图例被容器裁切、显示不全的问题。

修复后完整代码 #

import React, { useState } from 'react';
import ReactApexChart  from 'react-apexcharts';
const ChartUserManagement = () => {
    const [state,setData]=useState ({
      series: [44, 55, 67, 83],
            options: {
              chart: {
                height: 350,
                type: 'radialBar',
                toolbar: {
                  show: true
                }
              },
              // 图例配置放在options顶级层级
              legend: {
                show: true,
                position: 'bottom' 
              },
              plotOptions: {
                radialBar: {
                  dataLabels: {
                    name: {
                      fontSize: '22px',
                    },
                    value: {
                      fontSize: '16px',
                    },
                    total: {
                      show: true,
                      label: 'Total',
                      formatter: function (w) {
                        return 249
                      }
                    }
                  }
                }
              },
              labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
            },
    })
    return (<div className='chart-dougnet-2'>
      {/* 高度和chart配置保持一致，避免内容裁切 */}
      <ReactApexChart options={state.options} series={state.series} type="radialBar" height={350} />
    </div>   
    )
}
export default ChartUserManagement

补充说明 #

• 修复后图例会自动匹配labels数组的文本，和每个径向条的颜色一一对应显示在图表底部
• 如果需要调整图例的字号、间距、标记样式、点击交互，直接在顶级legend对象下添加对应配置即可，不要嵌套到其他配置节点下

内容的提问来源于stack exchange，提问作者Ankit Kumar Singh