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)'
              }
            }
          }
      ]

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

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐