Echarts 饼图(pie) 关于指示线消失了,

Echarts 饼图移入时 指示线消失了

1.指示线长度问题

 labelLine: {  // 统一设置指示线长度
            normal: {
              length: 15 
            }
          },

2.在series里面设置指示线位置,防止重叠了导致另一方不显示了

  series: [
        {
          name: '合计',
          type: 'pie',
          hoverAnimation: false,
          // clockwise: 'true',
          // startAngle: '100',
          radius: '50%',
          center: ['50%', '60%'],
          labelLine: {  // 统一设置指示线长度
            normal: {
              length: 15
            }
          },
          data: this._optionsdata,
          startAngle: 90,
          minAngle: 5, // 设置最小角度
          avoidLabelOverlap: true,
          label: {
            align: 'left',
            normal: {
              show: true, // 设置 指示线 全部显示
              lineHeight: 30,
              textStyle: {fontFamily: 'Microsoft Yahei'},
              // tslint:disable-next-line:typedef
              formatter(v) {  //设置 指示线位置 这个·挺舒服
                let text = 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)}`;
                }
              },
              rich: {
                color1: {
                  color: '#000000',
                  fontSize: 14,
                  lineHeight: 12,
                  fontWeight: 600
                },
                color2: {
                  color: '#848484',
                  fontSize: 12,
                }
              },
            }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                //     shadowOffsetX: 0,
                //     shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
      ]

差不多上面 都可以实现了
如图:在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值