const {
redFlower, // 红花种类
whiteFlower, // 白花种类
lessThanStandardRate, // 小于标准
greaterThanStandardRate, // 大于标准
greaterThanOverallRate, // 大于整体占比
lessThanOverallRate, // 小于整体占比
}
= {
redFlower:17, // 红花种类
whiteFlower:83, // 白花种类
lessThanStandardRate:20.83, // 小于标准
greaterThanStandardRate:79.17, // 大于标准
greaterThanOverallRate:65.52, // 大于整体占比
lessThanOverallRate:17.24, // 小于整体占比
}
option = {
series:[
{
type: 'sunburst',
nodeClick: false, // 是否允许旭日图点击 默认可以点击
center: ['50%', '50%'],
radius: ['50%', '60%'],
sort: 'null',
startAngle: 145,
silent: true, // 不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
labelLayout: {
moveOverlap: 'shiftY',//在标签重叠的时候是否挪动标签位置以防止重叠。shiftY：垂直方向依次位移，在垂直方向对齐时使用
hideOverlap: false,//是否隐藏重叠的标签
},
// 旭日图的分割线 可通过调节圆的大小实现空白间隙
// itemStyle: {
// borderColor: 'transparent',
// borderWidth: 0,
// borderRadius: 0,
// },
data: [
{
name: '白花种类',
value: whiteFlower ?? 0,
itemStyle: { color: '#358EFE' },
// 标签
label: {
show: true,
borderColor: 'transparent',
borderWidth: 1,
padding: 6,
formatter: ['{a|{b}}', '{c|{c}%}'].join(''),//{c} 为数据值
// 给指定标签设置样式
rich: {
a: {
align: 'left',
color: '#4E5969',
fontSize: 14,
fontWeight: 400,
padding: [0, 4, 0, 0],
},
c: {
align: 'left',
color: '#4E5969',
fontSize: 16,
fontWeight: 600,
},
},
},
//标签的视觉引导线配置。
labelLine: {
show: true,
showAbove: true,//是否显示在图形上方
length2: 6,//视觉引导项第二段的长度
minTurnAngle: 0,//通过调整第二段线的长度，限制引导线两端之间最小的夹角，以防止过小的夹角导致显示不美观。可以设置为 0 - 180 度。
},
children: [
{
value: lessThanOverallRate ?? 0,
name: '百合',
itemStyle: { color: 'rgba(53, 142, 254, 0.20)' },
label: {
formatter: ['{a|{b}}', `{b|${lessThanStandardRate ?? 0}%}`, '\n', '{c|(整体占比 {c}%)}'].join(''),
rich: {
a: {
align: 'left',
color: '#4E5969',
fontSize: 14,
fontWeight: 400,
padding: [0, 4, 0, 0],
},
b: {
align: 'left',
color: '#4E5969',
fontSize: 16,
fontWeight: 600,
fontFamily: 'DINAlternate-Bold, DINAlternate',
},
c: {
align: 'left',
color: 'rgba(136, 136, 136, .9)',
fontSize: 12,
fontWeight: 400,
padding: [4, 0, 0, 0],
fontFamily: 'DINAlternate-Bold, DINAlternate',
},
},
},
labelLine: {
show: true,
showAbove: true,
length2: 8,
},
},
{
value: greaterThanOverallRate ?? 0,
name: '茉莉',
itemStyle: { color: 'rgba(53, 142, 254, 0.50)' },
label: {
formatter: ['{a|{b}}', `{b|${greaterThanStandardRate ?? 0}%}`, '\n', '{c|(整体占比 {c}%)}'].join(''),
rich: {
a: {
align: 'left',
color: '#4E5969',
fontSize: 14,
fontWeight: 400,
padding: [0, 4, 0, 0],
},
b: {
align: 'left',
color: '#4E5969',
fontSize: 16,
fontWeight: 600,
fontFamily: 'DINAlternate-Bold, DINAlternate',
},
c: {
align: 'left',
color: 'rgba(136, 136, 136, .9)',
fontSize: 12,
padding: [4, 0, 0, 0],
fontFamily: 'DINAlternate-Bold, DINAlternate',
},
},
},
labelLine: {
show: true,
showAbove: true,
length2: 8,
},
},
],
},
{
name: '红花种类',
value: redFlower ?? 0,
itemStyle: { color: '#12C2C1' },
label: {
show: true,
formatter: ['{a|{b}}', '{c|{c}%}'].join(''),
rich: {
a: {
align: 'left',
color: '#4E5969',
fontSize: 14,
fontWeight: 400,
padding: [0, 4, 0, 0],
},
c: {
align: 'left',
color: '#4E5969',
fontSize: 16,
fontWeight: 600,
fontFamily: 'DINAlternate-Bold, DINAlternate',
},
},
},
labelLine: {
show: true,
showAbove: true,
length2: 6,
},
children: [{ value: parseFloat(100 - lessThanOverallRate - greaterThanOverallRate), name: '', itemStyle: { color: 'rgba(18, 194, 193, 0.60)' } }],
},
],
// 占据的位置 文字设置
// label: {
// rotate: 'tangential', // 文字水平(tangential)竖直(radial)
// color: '#fff',
// fontSize: 14,
// minAngle: 30, // 控制角度文本显示
// },
levels: [
// 这里是设置 每一层的样式，层级低于单独在data里面的
// 第一个空数据是 占据下钻的位置
{},
// 内圈
{
r0: '48%',
r: '63%',
// 鼠标移入高亮设置 设置了slient=true会失效
emphasis: {
focus: 'none',
},
label: {
position: 'outside',//标签的位置
distance: 22,//距离图形元素的距离
rotate: 0, // 文字水平(tangential)竖直(radial)
minAngle: 0,//当某个扇形块的角度小于该值（角度制）时，扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。
//以下三个设置可以让距离比较靠近的label有一定的间距，与html标签样式有点区别的是，这里需要设置一个border后再设置padding，padding内边距才会起效果
borderColor: 'transparent',//
borderWidth: 1,
padding: 4,
},
},
// 外圈
{
r0: '63%',
r: '77%',
label: {
position: 'outside',
distance: 22,
rotate: 0, // 文字水平(tangential)竖直(radial)
alignTo: 'edge',
minAngle: 0,
borderColor: 'transparent',
borderWidth: 1,
padding: 4,
},
// 鼠标移入高亮设置
emphasis: {
focus: 'none',
},
},
],
},
]
};