echarts icon indicating copy to clipboard operation
echarts copied to clipboard

fix(pie): fix some labels may not show

Open liuyunzidian opened this issue 1 year ago • 2 comments

Brief Information

This pull request is in the type of:

  • [x] bug fixing
  • [ ] new feature
  • [ ] others

What does this PR do?

#20070 Missing pie chart label display

Fixed issues

Details

Before: What was the problem?

When set option as:

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

Missing pie chart label display

image

After: How does it behave after the fixing?

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));

image

Document Info

One of the following should be checked.

  • [x] This PR doesn't relate to document changes
  • [ ] The document should be updated later
  • [ ] The document changes have been made in apache/echarts-doc#xxx

Misc

ZRender Changes

  • [ ] This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N.A.

Others

Merging options

  • [ ] Please squash the commits into a single one when merging.

Other information

liuyunzidian avatar Jun 25 '24 09:06 liuyunzidian

Thanks for your contribution! The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

echarts-bot[bot] avatar Jun 25 '24 09:06 echarts-bot[bot]

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-20074@403dce2

github-actions[bot] avatar Jun 25 '24 10:06 github-actions[bot]

We have the same issue. Could that commit to be merged ?

china-zoushuang avatar Jul 15 '24 07:07 china-zoushuang

Congratulations! Your PR has been merged. Thanks for your contribution! 👍

echarts-bot[bot] avatar Jul 18 '24 04:07 echarts-bot[bot]