完成的一个需求旭日图,后来产品说二级要和一级的颜色保持一致,不能看着太浅(二级图层继承父级后会有一层浅浅的模糊痕迹,处理这个方法我是直接写的死颜色,进行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
}
文章评论