如何更改放射状条的样式

Question

我想改善我的放射状图形的视觉效果。我使用假数据来模拟来自12个或更多系列/标签后端的数据到达，我的代码如下：

const chartData = {
    series: [7, 50, 25, 60, 10, 12, 5, 55, 23, 15, 85, 90],
    options: {
      chart: {
        selection: {
          enabled: false
        },
        height: 350,
        type: 'radialBar',
      },
      states: {
        active: {
          filter: {
            type: 'none'
          }
        }
      },
      plotOptions: {
        radialBar: {
          hollow: {
            size: '25%',
          },
          dataLabels: {
            name: {
              fontSize: '15px',
              show: showText
            },
            value: {
              fontSize: '15px',
            },
          },
        },
      },
      labels: ['Retomo', 'uso hold','hola', 'uso', 'llamada', 'buenas', 'usando', 'error','aceptado', 'que', 'corte', 'dos'],
    },
  };

其中呈现以下内容：

<div className="custom-radial-bar">
        <Title level={4}>{data.function_name}</Title>
        <ReactApexChart options={chartData.options} series={chartData.series} type="radialBar" height={chartData.options.chart.height} />
      </div>

.custom-radial-bar {
  background-color: white;
  padding: 10px;
  border-radius: 10px;
}

我想让 350 高度的条形看起来更粗一点，但中间也有一个间隙，用于放置标签和百分比。下面是我迄今为止所实现的渲染的屏幕截图。预先非常感谢您的帮助！

Answer 1

您可以通过添加“track”值并为其指定宽度和边距来更改轨道的

width

和

margin

。

plotOptions: {
radialBar: {
  track: {
    width: 200,
    margin: 15,
  },
  hollow: {
    size: '25%',
  },
  dataLabels: {
    name: {
      fontSize: '15px',
      show: showText
    },
    value: {
      fontSize: '15px',
    },
  },
},