echarts组件使用参考:https://blog.csdn.net/weixin_50450473/article/details/121510438
图例一:
图例一
let datas = [
{
AvgScore: 4.5,
SumAvdScore: 6.5,
Title: '积极低唤醒',
Children: [
{
AvgScore: 17.6,
SumAvdScore: 6.5,
Title: '满足'
},
{
AvgScore: 17.6,
SumAvdScore: 6.5,
Title: '平静'
},
{
AvgScore: 17.6,
SumAvdScore: 6.5,
Title: '放松'
}
]
},
{
AvgScore: 4.5,
SumAvdScore: 6.5,
Title: '积极高唤醒',
Children: [
{
AvgScore: 17.6,
SumAvdScore: 6.5,
Title: '自豪'
},
{
AvgScore: 15.6,
SumAvdScore: 6.5,
Title: '希望'
},
{
AvgScore: 24.1,
SumAvdScore: 6.5,
Title: '高兴'
}
]
},
{
AvgScore: 4.5,
SumAvdScore: 6.5,
Title: '消极高唤醒',
Children: [
{
AvgScore: 17.6,
SumAvdScore: 6.5,
Title: '羞愧'
},
{
AvgScore: 15.6,
SumAvdScore: 6.5,
Title: '焦虑'
},
{
AvgScore: 24.1,
SumAvdScore: 6.5,
Title: '生气'
}
]
},
{
AvgScore: 4.5,
SumAvdScore: 6.5,
Title: '消极低唤醒',
Children: [
{
AvgScore: 17.6,
SumAvdScore: 6.5,
Title: '无助'
},
{
AvgScore: 15.6,
SumAvdScore: 6.5,
Title: '沮丧'
},
{
AvgScore: 24.1,
SumAvdScore: 6.5,
Title: '厌倦'
},
{
AvgScore: 24.1,
SumAvdScore: 6.5,
Title: '心烦-疲乏'
}
]
}
];
let fatherName = [];
datas.forEach((ma, index) => {
let a = JSON.parse(
JSON.stringify(ma.Children)
.replace(/SumAvdScore/g, 'value')
.replace(/Title/g, 'name')
.replace(/AvgScore/g, 'avg')
);
fatherName.push({
name: ma.Title,
avg: ma.AvgScore,
realvalue: ma.SumAvdScore,
children: a
});
});
option = {
color: ['#326092', '#2c7eeb', '#d5f1ff', '#3dc6c8', '#becae0', '#4d8fc6'],
series: [
{
type: 'sunburst',
radius: [0, '100%'],
itemStyle: {
normal: {
label: {
position: 'inner',
formatter: function (params) {
if (params.data.realvalue) {
return (
params.data.name +
'\n你的得分:' +
params.data.realvalue +
'\n平均得分:' +
params.data.avg
);
} else {
return (
params.data.name +
'\n你的得分:' +
params.data.value +
'\n平均得分:' +
params.data.avg
);
}
},
fontSize: 13,
lineHeight: 20
}
}
},
labelLine: {
// 显示刻度线条
normal: {
show: true,
lineStyle: {
color: '#333'
}
}
},
levels: [
{},
{
r0: '0%',
r: '70%',
label: {
rotate: 0 //旋转角度
// rotate: 'tangential' // 跟随图形旋转角度
}
},
{
r0: '70%',
r: '85%',
label: {
position: 'outside',
padding: 10,
rotate: 0,
silent: false
}
}
],
data: fatherName
}
]
};
希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~