当环形图设置 padAngle 有间隔时，环形的底部能否增加背景颜色？-灵析社区
应该是最帅的鹅设计稿中环形图的每一块之间设置了间隔，并且在间隔下方还有一个灰色的背景环，请问这个效果如何实现？  
一一在debugSolution
这个效果可以用 VChart 的组合图实现。组合图可以配置两个饼图系列，第一个只有一条数据，用于模拟背景的环形；第二个系列就是常规的饼图系列。需要注意：
* "padAngle"：配置间隔的角度；
* "innerRadius"/"outerRadius"：配置内外半径。两个系列需要配置相同的内外半径；
* 系列之间的顺序不要颠倒，因为后配置的系列层级更高；
* 背景系列建议关闭动画 和 tooltip 交互；
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/221b30db16637af4b88f1af098b00538.png)
代码参考：
const spec = {
type: 'common',
data: [
{
id: 'id0',
values: [
{ type: '0~9', value: '39.12' },
{ type: '10~19', value: '43.01' },
{ type: '20~29', value: '43.91' },
{ type: '30~39', value: '45.4' },
{ type: '40~49', value: '40.89' },
{ type: '50~59', value: '42.48' },
{ type: '60~69', value: '39.63' },
{ type: '70~79', value: '25.17' },
{ type: '80 and over', value: '12.29' }
]
},
{
id: 'id1',
values: [
{ type: '0~9', value: '1' },
]
}
],
series: [
{
type: 'pie',
id: 'background',
dataIndex: 1,
outerRadius: 0.8,
innerRadius: 0.67,
valueField: 'value',
categoryField: 'type',
animation: false,
tooltip: { visible: false },
pie: {
style: {
fill: 'rgb(237,239,242)',
}
}
},
{
type: 'pie',
dataIndex: 0,
outerRadius: 0.8,
innerRadius: 0.67,
valueField: 'value',
padAngle: 2,
categoryField: 'type',
pie: {
style: {
cornerRadius: 20,
},
state: {
hover: {
outerRadius: 0.82,
innerRadius: 0.65,
}
}
}
}
],
title: {
visible: true,
text: 'Population Distribution by Age in the United States, 2021 (in millions)',
textStyle: {
fontFamily: 'Times New Roman'
}
},
legends: {
visible: true,
orient: 'left',
seriesIndex: [1]
}
};
结果展示 Results
在线效果参考："https://codesandbox.io/s/pie-background-with-padangle-365zgm" (https://link.segmentfault.com/?enc=8ZYB%2BuGFoomHZ2YZCOnIWQ%3D%3D.lp1uSBnhqK64OPMffzo9PLSt6mJr15KMegO1TjRI17suM1OUEQvjMrxl08POFGLwjDbKuEiRYlfHSJSOGo6M3g%3D%3D)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/efeec564f0b03df66bede521894aecd5.png)
相关文档 Related Documentation
相关教程："https://visactor.io/vchart/guide/tutorial_docs/Chart_Types/Co..." (https://link.segmentfault.com/?enc=NwAWIWk5KKgolIOz3hKBCA%3D%3D.dnwM0euOJlIyld8G9mxVlwzyiWjH6R5moJ8nGy8tp%2FiGqlcfQMhi%2FiVEY%2BuZpThCryR1lJPuVfaPoCkPr7kSl7MKrUbxMO3yaUu%2BVGDzgNc%3D)
相关 demo："https://visactor.io/vchart/demo/pie-chart/nested-pie?keyword=..." (https://link.segmentfault.com/?enc=XI9WlgcZZk24%2BT9WeASVpA%3D%3D.6yontk5rCU0hQfPp4Fqz0A%2FhwIuEMV%2BH9vLh5clD1SNx4xxPEtQV95UpEyF1s843drpGrCpcmufDerYezuJD7H29sw6eSo5ElHZEQZkLJRc%3D)
github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=PE3BoyUgORG%2BIx5JA1OcbA%3D%3D.hxA2TEXWgB2i8Ltg7T6SzscHaRiUCm3jpdD0TFGO0j3%2BjG8NbEKWyxDZsKn5lboM)