echarts饼图文字重叠问题及解决方法

5 篇文章 0 订阅
1 篇文章 0 订阅

实现前台样式的时候发现饼状图文字部分重合了

文章目录


前言

实现前台样式的时候发现饼状图文字部分重合了如下面所示:
在这里插入图片描述


找了很多方法以下是个人总结的:

1.解决方法

代码如下,添加normal这段代码下面的textstyle控制字体的大小(示例):

series: [{
	name: '类型',
	minAngle: 5,//这个属性可以控制扇形区域的最小值,防止出现区域为0.01%之类的很小的山顶点不到的情况
	//这里还有其余的部分
	normal:{
          formatter(v) {
             let text = Math.round(v.percent)+'%' + '' + v.name
             if(text.length <= 8)
                {
                   return text;
                 }else if(text.length > 8 && text.length <= 16){
                   return text = `${text.slice(0,8)}\n${text.slice(8)}`
                 }else if(text.length > 16 && text.length <= 24){
                   return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`
                 }else if(text.length > 24 && text.length <= 30){
                   return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`
                 }else if(text.length > 30){
                   return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`
                 }
          },

       //宪强加的防止标签覆盖
    textStyle:{
        //字体大小
        fontSize: 12
       }
    }
}]

在这里插入图片描述

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值