在展示周期性数据或视觉冲击力强的类别比例时，夜莺图（也称为极坐标玫瑰图或考克斯康布图）提供了一种引人注目的视觉结构。由弗洛伦斯·南丁格尔创建，用于绘制公共卫生数据，该图表使用扇区半径长度而非角度跨度来编码数据值。通过保持切片角度一致的同时将扇区长度向外延伸，夜莺图将周期性或类别指标转化为独特且具有高冲击力的径向设计。
夜莺图的机制
在 Apache ECharts 中，夜莺图使用标准‘pie’系列类型，并通过设置roseType属性。设置roseType: 'radius'可指示引擎将圆划分为相等的角度段，同时根据每个扇区的数值大小来调整其外半径。
1. 基础设置
要构建一个基本的夜莺图，需在roseType: 'radius'内部设置‘pie’系列对象中，并提供你的数据集：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '半径模式',
type: 'pie',
radius: [20, 140],
center: ['50%', '55%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
data: [
{ value: 40, name: '玫瑰 1' },
{ value: 38, name: '玫瑰 2' },
{ value: 32, name: '玫瑰 3' },
{ value: 30, name: '玫瑰 4' },
{ value: 28, name: '玫瑰 5' },
{ value: 26, name: '玫瑰 6' },
{ value: 22, name: '玫瑰 7' },
{ value: 18, name: '玫瑰 8' }
]
}
]
};
高级结构技术
你可以自定义玫瑰图的显示模式，同时改变角度和半径，或者将中心挖空，形成玫瑰-环形混合图。
1. 面积玫瑰类型（等角度 vs. 缩放角度）
设置roseType: 'area'设置 roseType: ‘area’ 可使所有类别的扇区角度保持相等，同时按面积缩放切片，而非仅缩放半径：
ECharts
Edit ECharts in VPasCode
option = {
legend: {
top: 'bottom'
},
series: [
{
name: '面积模式',
type: 'pie',
radius: [30, 120],
center: ['50%', '45%'],
roseType: 'area',
data: [
{ value: 30, name: '市场推广' },
{ value: 28, name: '销售' },
{ value: 26, name: '开发' },
{ value: 24, name: '支持' },
{ value: 22, name: '设计' },
{ value: 20, name: '运营' }
]
}
]
};
微调布局与样式
为极坐标玫瑰图添加圆滑的外端和清晰的边框，使其在现代网页上呈现出更精致的视觉效果。
1. 圆滑的玫瑰花瓣末端与扇区边框
使用 borderRadius以及白色轮廓边框，以清晰地分隔相邻的径向花瓣：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '部门影响',
type: 'pie',
radius: [40, 150],
center: ['50%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 8,
borderColor: '#ffffff',
borderWidth: 2
},
label: {
show: true,
formatter: '{b}: {c}'
},
data: [
{ value: 1048, name: '工程' },
{ value: 735, name: '产品' },
{ value: 580, name: '市场推广' },
{ value: 484, name: '销售' },
{ value: 300, name: '支持' }
]
}
]
};
战略最佳实践
- 注意视觉失真：由于面积随半径呈指数增长，较大的数值在玫瑰图中会比标准条形图更显视觉主导。当强调视觉冲击力和吸引力时，可优先使用此类图表。
- 保持内半径空洞： 始终设置一个内半径（例如，
[20, 140]），以避免小扇区在中心点收缩成无法辨认的尖锐点。 - 将图例置于非中心位置： 将图例放置在顶部或底部边缘，以防止径向花瓣向外延伸时与文字重叠。