vue实现 【echarts中 “1种” Sunburst旭日图图例】的组件封装及调用

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
    }
  ]
};

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~