echarts 旭日图 层级嵌套 子级完全继承父级颜色

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值