echarts饼图series里的label超出边界显示不全

问题
  小程序中使用饼图,在分布均匀的情况下label内容不会被遮挡(如图一);如果存在几个小数据分布在一侧的话会出现个别label超出上边界被遮挡(如图二);需要调整使label文字不被遮挡,调整后的(如图三)。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
解决方案:

  1. 推荐修改 startAngle 的起始角度值,让图表重新摆放 label 的位置。
  2. 通过修改echarts饼图角度起始角度位置和生长方向minAngle: 15,//最小角度 startAngle:270, //起始角度

代码:

import * as echarts from '../../../ec-canvas/echarts';
var optionAnalysis1 = {
  animationDuration: 100,
  color: ['#eb6c10', '#cf2306', '#ebd970', '#b1c75b', '#54874e', '#ab4838'],
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}天({d}%)',
  },
  series: [{
    type: 'pie',
    minAngle: 15,//最小角度
    startAngle:270, //起始角度
    radius: '60%',
    center: ['50%', '50%'],
    labelLine:{  
      normal:{  
          length: 5
      }  
    }, 
    label: {
      formatter: '{b}\n{c}天\n{d}%',
      fontSize: 10
    },
    itemStyle: {
      opacity: 0.7
    },
    data: []
  }]
}

参考文章:
饼图label超出边界,label被遮挡,但是labelLine还在
echarts饼图角度起始角度位置和生长方向

  • 10
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值