[Bug] Missing pie chart label display

[liuyunzidian]

Version

5.5.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&version=5.5.0

Steps to Reproduce

The configuration information is as follows：

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    data: [
      'Direct',
      'Marketing',
      'Search Engine',
      'Email',
      'Union Ads',
      'Video Ads',
      'Baidu',
      'Google',
      'Bing',
      'Others'
    ]
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '30%'],
      label: {
        position: 'inner',
        fontSize: 14
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1548, name: 'Search Engine' },
        { value: 775, name: 'Direct' },
        { value: 679, name: 'Marketing', selected: true }
      ]
    },
    {
      name: 'Access From',
      type: 'pie',
      radius: ['45%', '60%'],
      labelLine: {
        length: 30
      },
      label: {
        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: [
        { value: 11048, name: 'Baidu' },
        { value: 1335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 251, name: 'Google' },
        { value: 234, name: 'Union Ads' },
        { value: 147, name: 'Bing' },
        { value: 135, name: 'Video Ads' },
        { value: 102, name: 'Others' },
         { value: 335, name: 'Direct1' },
        { value: 310, name: 'Email1' },
        { value: 251, name: 'Google1' },
        { value: 234, name: 'Union Ads1' },
        { value: 147, name: 'Bing1' },
        { value: 135, name: 'Video Ads1' },
        { value: 102, name: 'Others1' }
      ]
    }
  ]
};

Current Behavior

The labels for Direct and Email are not displayed

Expected Behavior

Expect the label to display normally

Environment

- OS:Windows
- Browser:Google Chrome 114.0.5735.198 （64）
- Framework: js

Any additional comments?

No response

[AutumnLeaf1201]

I use the data you provided to render eCharts，it can display all the labels set in the options correctly。I have confirmed that the overlapping label will be hidden when the canvas area is too small。you can set parameters according to the documentation。（ #https://echarts.apache.org/zh/option.html#series-pie.labelLayout）

labelLayout: {
    hideOverlap: false
}

[liuyunzidian]

I have configured this parameter, but still do not display the labels for Direct and Email. There is no Direct label as shown in the figure below：

To visually illustrate the problem, you can add a configuration： emphasis: { focus: 'self', blurScope: 'coordinateSystem' }, there is no "Direct" label:

The complete configuration is as follows： option = { tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, series: [ { name: 'Access From', type: 'pie', radius: ['45%', '60%'], labelLine: { length: 30 }, label: { formatter: '{a|{a}} {abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ', backgroundColor: '#F6F8FC', borderColor: '#8C8D8E', borderWidth: 1, borderRadius: 4, rich: { a: { color: '#6E7079', lineHeight: 22, align: 'center' }, hr: { borderColor: '#8C8D8E', width: '100%', borderWidth: 1, height: 0 }, b: { color: '#4C5058', fontSize: 14, fontWeight: 'bold', lineHeight: 33 }, per: { color: '#fff', backgroundColor: '#4C5058', padding: [3, 4], borderRadius: 4 } } }, labelLayout: { hideOverlap: false }, emphasis: { focus: 'self', blurScope: 'coordinateSystem' }, data: [ { value: 11048, name: 'Baidu' }, { value: 1335, name: 'Direct' }, { value: 310, name: 'Email' }, { value: 251, name: 'Google' }, { value: 234, name: 'Union Ads' }, { value: 147, name: 'Bing' }, { value: 135, name: 'Video Ads' }, { value: 102, name: 'Others' }, { value: 335, name: 'Direct1' }, { value: 310, name: 'Email1' }, { value: 251, name: 'Google1' }, { value: 234, name: 'Union Ads1' }, { value: 147, name: 'Bing1' }, { value: 135, name: 'Video Ads1' }, { value: 102, name: 'Others1' } ] } ] };

[AutumnLeaf1201]

You can set label.alignTo: 'labelLine'(see doc), then all the labels will display correctly. I will check this bug meanwhile.

[liuyunzidian]

This bug was caused here： path: src/chart/pie/labelLayout.ts:92 code: const dx = Math.sqrt((1 - Math.abs(dy * dy / rB2)) * rA2); In the calculation of dx, 1- Math.abs (dy * dy/rB2) * rA2 may be negative, Absolute values should be added here. const dx = Math.sqrt(Math.abs((1 - Math.abs(dy * dy / rB2)) * rA2));

After modification, the display is now normal：