完成的一个需求旭日图，后来产品说二级要和一级的颜色保持一致，不能看着太浅（二级图层继承父级后会有一层浅浅的模糊痕迹，处理这个方法我是直接写的死颜色，进行itemStyle配置）
代码参见如下
如果想看旭日图功能可以看这个链接，旭日图功能项
export const echartsOption = (data: Array<object>, issueTotal:number, titleStr: string) => {let option = {}let seriesData: any = []// 这里配置的颜色是参照返回数据的最大数量设定的，需要提前问下let colors =['#8A53E8','#5383F1','#F95B56','#28E99D','#FF9821','#47C2EF','#5470c6','#91cc75','#fac858','#eee666','#73c0de','#42F0BC','#F8D569','#D486FB','#FF8C88','#82A3F0']data.forEach((ma: any, index) => {let list = ma.children?.map((v:any)=>{return {...v,itemStyle:{color: colors[index]}}})let a = JSON.parse(JSON.stringify(list).replace(/questionNum/g, 'value').replace(/name/g, 'name').replace(/ratio/g, 'radio'))seriesData.push({position0: titleStr === 'Position' ? ma?.position0 : undefined,behavior0: titleStr != 'Position' ? ma?.behavior0 : undefined ,name: ma?.name,radio: ma?.ratio, // 占比realvalue: ma?.questionNum, // 数量children: a,itemStyle:{color: colors[index]}})})if (seriesData && seriesData.length > 0) {option = {// 提示器tooltip: {show: 'true',trigger: 'item',axisPointer: {type: 'shadow'},formatter: function (params: any) {const htmlTooltip = '分类名称:' + params.data.name + '<br/>' + '数量:' + params.data.value+'<br/>'+ '占比:' + params.data.radio + '%'return htmlTooltip}},graphic: [{type: 'text', // 控制内容为文本文字left: "center",top: "46%", // 调整距离盒子高处的位置style: {fill: '#3076FE', // 控制字体颜色text: `${issueTotal}个`, // 控制第一行字显示内容fontSize: '32px',lineHeight: 0}}, {type: 'text',left: "center",top: "53%",z: 10,style: {text: '问题总数',fontSize: '14px',lineHeight: 14,fill: '#262626'}}],series: [{type: 'sunburst',data: seriesData,nodeClick: function (params: any) { // 阻止点击事件向下传播 禁用整体的展开折叠功能return false},radius: [0, '100%'],bottom: 20,emphasis: {focus: 'ancestor' // 祖先},// itemStyle:{// color: function (param: any) {// return ''// }// },label: {overflow: 'truncate', // 设置文本超出时显示省略号truncate: {maxWidth: 50 // 设置最大宽度为50px}},levels: [{},{r0: '20%',r: '49%',label: {width: 64,// rotate: 'tangential',align: 'center',formatter: function (params:any) {if (params.data.value) {return (`${params.data.name}(${params.data.realvalue})`)}},fontSize: 12,color: '#000'},},{r0: '50%',r: '68%',label: {width: 74,position: 'outside',padding: 0,silent: false,show: true,// rotate: 0,color: 'inherit', // 继承颜色formatter: function (params:any) {return (`${params.data.name}(${params.data.value})\n${params.data.radio}%`)}}}]}]}} else {option = {title: {left: 'center',top: 'center',fontSize: 20,subtext: '暂无数据'}}}return option
}
