[Bug] Pie Chart - setting "minShowLabelAngle" in "media" cause label line artifacts

[j-zielinski]

Version

5.2.2, 5.3.0-rc.1

Link to Minimal Reproduction

https://codesandbox.io/s/recursing-torvalds-tjuxw?file=/src/index.js

Steps to Reproduce

1. Open Codesandbox
2. Resize window below and over 500px width
3. You will notice some label lines are still rendered when they should not

Current Behavior

Expected Behavior

If label is not visible anymore, corresponding line should also disappear.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

Code:

export const options = {
  dataset: {
    dimensions: [
      {
        name: 'Job',
        id: 'job',
      },
      {
        name: 'Candidates',
        id: 'count',
      },
    ],
    source: [
      ['231030', 63],
      ['288230', 41],
      ['424080', 8],
      ['387581', 7],
      ['293479', 6],
      ['__empty__', 6],
      ['244185', 4],
      ['262793', 4],
      ['262635', 3],
      ['297479', 3],
      ['187996', 2],
      ['276594', 2],
      ['355507', 2],
      ['495143', 2],
      ['55342', 1],
      ['59508', 1],
      ['263196', 1],
      ['266390', 1],
      ['266392', 1],
      ['280606', 1],
      ['293256', 1],
      ['324698', 1],
      ['355509', 1],
      ['384268', 1],
      ['424166', 1],
      ['430854', 1],
      ['473469', 1],
      ['490810', 1],
    ],
  },
  series: [
    {
      type: 'pie',
    },
  ],
  media: [
    {
      query: {
        maxWidth: 500,
      },
      option: {
        series: [
          {
            minShowLabelAngle: 8,
          },
        ],
      },
    },
    {
      query: {
        minWidth: 500,
      },
      option: {
        series: [
          {
            minShowLabelAngle: 4,
          },
        ],
      },
    },
  ],
};

[echarts-bot]

@j-zielinski Please provide a demo for the issue either with https://codepen.io/Ovilia/pen/dyYWXWM , or https://codesandbox.io/s/mystifying-bash-2uthz.

[Ovilia]

Sorry I can't open the link you provided. Please save it at the above links mentioned by the bot.
This problem should have been fixed in 5.3.0.

[j-zielinski]

@Ovilia updated link: https://codesandbox.io/s/recursing-torvalds-tjuxw?file=/src/index.js

[j-zielinski]

@Ovilia I just wanted to let you know that this bug still occurs in 5.3.0.

[yangfei4913438]

我也遇到了同样的问题。label消失了，labelLine依然显示在图表上。一开始我以为是设置了show为true的原因，后来取消了show的配置，使用空对象，依然是label消失的时候labelLine不消失。

[yangfei4913438]

抱歉，我无法打开您提供的链接。请将其保存在机器人提到的上述链接中。 这个问题应该已经在 5.3.0 中修复了。

在官网的demo中就可以复现这个问题。

链接： https://echarts.apache.org/examples/zh/editor.html?c=pie-simple

请使用下面的JS代码来复现：

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      // 修改这个值的大小来复现问题
      minShowLabelAngle: 30,
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

@Ovilia

[j-zielinski]

@Ovilia any update on this ?

[j-zielinski]

@Ovilia This problem seems to have been solved here: #17412. So in 5.4.0 it can be considered as fixed. Thanks! :)