南丁格尔玫瑰图又名鸡冠花图、极坐标区域图，它将柱图转化为更美观的饼图形式，是极坐标化的柱图，放大了数据之间差异的视觉效果，适用于对比数据原本差异小的数据。 在ECharts中绘制南丁格尔玫瑰图时，参数与标准饼图类似，但是南丁格尔玫瑰图有一个特殊的参数是roseType，称为南丁格尔玫瑰图模式，可以使用的值有两种：“radius”（半径）和“area”（面积）。 当使用半径模式时，以各个item的值作为扇形的半径，一般情况下，半径模式可能造成较大的失真；当使用面积模式时，以各个item的值作为扇形的面积，一般情况下，面积模式的失真较小。
某高校二级学院学生和教授的人数数据如表所示。
根据某高校二级学院学生和教授的人数数据绘制南丁格尔玫瑰图，如图所示。
尽管在数据可视化作品中随处可见玫瑰图的身影，但是仍有许多用户给它贴上了“华而不实”的标签。事实上和许多图表一样，玫瑰图也有一些不足之处。玫瑰图的使用注意事项如下。 （1）适合展示类目比较多的数据。通过堆叠，玫瑰图可以展示大量的数据。对于类别过少的数据，则显得格格不入，建议使用标准饼图。 （2）展示分类数据的数值差异不宜过大。在玫瑰图中，数值差异过大的分类会非常难以观察，图表整体也会很不协调。这种情况推荐使用条形图。
（3）将数据做排序处理。如果需要比较数据的大小，那么可以事先将数据进行升序或降序处理，避免数据类目较多或数据间差异较小时不相邻的数据难以精确比较。为数据添加数值标签也是一种解决办法，但是在数据较多时难以达到较好的效果。有时对于看起来“头重脚轻”“不太协调”的玫瑰图，也可以手动设置数据的顺序，使图表更美观。不同的数据顺序，玫瑰图的效果也大大不同。 （4）慎用层叠玫瑰图。层叠玫瑰图存在的问题为：堆叠的数据起始位置不同，如果差距不大则难以直接进行比较。
源代码如下：
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title: {
text: '二级学院分布-南丁格尔玫瑰图',
x: 'center', //设置主标题全部居中
backgroundColor: '#B5A642', //设置主标题的背景颜色为黄铜色
textStyle: { //设置主标题
fontSize: 18, //设置主标题的字号大小
fontFamily: "黑体", //设置主标题的字体
color: "#9932CD" //设置主标题的颜色为深兰花色
},
},
tooltip: { //配置提示框组件
trigger: 'item', //设置提示框的触发方式
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: { //配置图例组件
x: 'center',
y: 'bottom',
data: ['计算机', '大数据', '外国语', '机器人', '建工', '机电', '艺术', '财经']
},
toolbox: { //配置工具箱组件
show: true,
x: 600, //设置工具箱的水平位置
y: 18, //设置工具箱的垂直位置
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
series: [ //配置数据系列及格式组件
{ //设置第1个数据系列及格式设置
name: '学生人数(半径模式)',
type: 'pie', //南丁格尔玫瑰图属于饼图中的一种
radius: ['10%', '50%'], //设置半径
center: ['50%', 180], //设置圆心
roseType: 'radius', //设置南丁格尔玫瑰图参数：半径模式
width: '50%', // for funnel 漏斗图
max: 40, // for funnel 漏斗图
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
label: {
show: true
},
labelLine: {
show: true
}
}
},
data: [
{ value: 2000, name: '计算机' },
{ value: 1500, name: '大数据' },
{ value: 1200, name: '外国语' },
{ value: 1100, name: '机器人' },
{ value: 1000, name: '建工' },
{ value: 900, name: '机电' },
{ value: 800, name: '艺术' },
{ value: 700, name: '财经' }
]
},
{ //设置第2个数据系列及格式
name: '学生人数(面积模式)',
type: 'pie', //南丁格尔玫瑰图属于饼图中的一种
radius: ['10%', '50%'], //设置半径
center: ['50%', 180], //设置圆心
roseType: 'area', //设置南丁格尔玫瑰图参数:面积模式
x: '50%', // for funnel 漏斗图
max: 40, // for funnel 漏斗图
sort: 'ascending', // for funnel 漏斗图
data: [
{ value: 2000, name: '计算机' },
{ value: 1500, name: '大数据' },
{ value: 1200, name: '外国语' },
{ value: 1100, name: '机器人' },
{ value: 1000, name: '建工' },
{ value: 900, name: '机电' },
{ value: 800, name: '艺术' },
{ value: 700, name: '财经' }
]
},
{ //设置第3个数据系列及格式
name: '教授人数(面积模式)',
type: 'pie', //南丁格尔玫瑰图属于饼图中的一种
radius: ['10%', '50%'], //设置半径
center: ['50%', 420], //设置圆心
roseType: 'area', //设置南丁格尔玫瑰图参数:面积模式
x: '50%', // for funnel 漏斗图
max: 40, // for funnel 漏斗图
sort: 'ascending', // for funnel 漏斗图
data: [
{ value: 25, name: '计算机' },
{ value: 15, name: '大数据' },
{ value: 12, name: '外国语' },
{ value: 10, name: '机器人' },
{ value: 8, name: '建工' },
{ value: 7, name: '机电' },
{ value: 6, name: '艺术' },
{ value: 4, name: '财经' }
]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
