如何调整Radial Bar样式：增粗条形并保留中心空隙

针对你用12+系列数据构建的径向条形图，在保持350px高度的前提下，可通过以下方式实现需求：

1. 加粗径向条核心调整 #

通过修改径向条的内外半径差值来控制粗细，以ECharts为例，调整radius配置：

series: [{
    type: 'bar',
    coordinateSystem: 'polar',
    // 增大内外半径差，让条形更粗；内半径留足够空间放中心内容
    radius: ['25%', '85%'],
    data: seriesData,
    // 可选：调整条形圆角优化视觉
    itemStyle: {
        borderRadius: 8
    }
}]

原理：内半径越小、外半径越大，条形的径向宽度就越宽，同时内半径保留的空间足够放置中心标签和百分比。

2. 保留中心空隙展示内容 #

用title组件直接在中心放置总标签和百分比，无需额外组件：

title: {
    text: '整体完成率',
    subtext: '92%',
    left: 'center',
    top: 'center',
    textStyle: {
        fontSize: 16,
        color: '#666'
    },
    subtextStyle: {
        fontSize: 28,
        fontWeight: 'bold',
        color: '#333'
    }
}

如果需要展示单条数据的标签，调整标签位置避免被粗条形遮挡：

series: [{
    // ...其他配置
    label: {
        show: true,
        // 把标签放在条形外侧，避免被遮挡
        position: 'outside',
        offset: [0, -5],
        fontSize: 10
    }
}]

3. 适配12+系列的布局优化 #

当系列数量较多时，调整角度轴的分布和标签样式，避免拥挤：

angleAxis: {
    type: 'category',
    data: labels,
    // 从顶部开始分布条形，更直观
    startAngle: 90,
    axisLabel: {
        fontSize: 9,
        // 标签跟随角度旋转，避免重叠
        rotate: 0
    },
    // 隐藏轴线和刻度，让视觉更简洁
    axisLine: { show: false },
    axisTick: { show: false }
}

4. 固定350高度的保障 #

确保图表容器的CSS设置为固定高度：

#radial-chart {
    width: 100%;
    height: 350px;
}

初始化图表时直接绑定该容器，无需在图表配置中设置height，让图表自适应容器高度即可。

内容的提问来源于stack exchange，提问作者Francisco.js