apache / apache/echarts

[Bug] Sunburst displaying radian error when the value is extremely small

Open
#19,451 0 comments 0 reactions 0 assignees View on GitHub
bug en
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.4.3

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=G4QwTgBA9gDgLgSygOwgXggbwFAQgYygBsowAuCAbQHIBiAMwGZHqAaCOgBgDZ7qBdVrggBnAKZgEYkRRx48cAJ4wxFaiICuyAEYawIuG2F4AJiDggKlY_Lnz7yEAFtVHAMpi4EAIJH790CINVwBWTnChf3l8AAsEIhMwMWQrGyi7KIdnV2pvAEY_TICQINcAFgBOKsiiiABfGqKM2scXNW8AJkLaiEDgijzGzLq0-UFRhtHmrLb3TwgAIW7_PtDwiNG8WPjE5NSe6czWnIWCoaLVijD18_8RovGoyftH-QQ4MSc3JSJXTAhtKQTBIAOoIExwGIUDrsQFgYFgADCxFIagY9D4sKBEgASiATAgNDIIB16kNfsAxERidZ0s9_P8wJw1GVOABSNgQcgcADsIQ5ZKmXOZvP5nO51AAHOzqPUbPxhCM6gBuIA

### Steps to Reproduce

1. Open this [link](https://echarts.apache.org/examples/en/editor.html?code=G4QwTgBA9gDgLgSygOwgXggbwFAQgYygBsowAuCAbQHIBiAMwGZHqAaCOgBgDZ7qBdVrggBnAKZgEYkRRx48cAJ4wxFaiICuyAEYawIuG2F4AJiDggKlY_Lnz7yEAFtVHAMpi4EAIJH790CINVwBWTnChf3l8AAsEIhMwMWQrGyi7KIdnV2pvAEY_TICQINcAFgBOKsiiiABfGqKM2scXNW8AJkLaiEDgijzGzLq0-UFRhtHmrLb3TwgAIW7_PtDwiNG8WPjE5NSe6czWnIWCoaLVijD18_8RovGoyftH-QQ4MSc3JSJXTAhtKQTBIAOoIExwGIUDrsQFgYFgADCxFIagY9D4sKBEgASiATAgNDIIB16kNfsAxERidZ0s9_P8wJw1GVOABSNgQcgcADsIQ5ZKmXOZvP5nO51AAHOzqPUbPxhCM6gBuIA)
2. Drag the handler and resize the right preview panel
3. While the panel is small enough, the outside circle will change to red.

### Current Behavior

While the panel is small enough, the outside circle will change to red.

That is because the outside circle is a full circle of the A2 value, which is extremely small.

### Expected Behavior

Maintain the same display regardless of the panel size.

### Environment

```markdown
- OS: All
- Browser: All
- Framework: html
```

### Any additional comments?

## The wrong display

### While panel is normal(big) size
image

### While the panel is small
image

The other child items are correct, and we can hover over it to see its size.
image

Only the A2 get an error size.
image

## Reason

Code

```
var option = {
color: ['#f33', '#06f'],
series: {
type: 'sunburst',
data: [
{
name: 'Set A',
value: 5000,
children: [
{
name: 'A1',
value: 4999,
},
{
name: 'A2',
value: 1,
}
],
},
{
name: 'Set B',
value: 50000,
children: [
{
name: 'B1',
value: 50000,
}
],
},
],
itemStyle: { borderWidth: 2, borderColor: '#fff', borderRadius: 2 },
levels: [
{},
{ r0: '40%', r: '75%' },
{ r0: '75%', r: '80%' }
]
}
};

```

- The `value` of the area must be very small, has a very small radian.
- The width of the ring must be thin enough. `levels`
- ItemStyles has a `borderRadius` larger than 0.
- I think it may be due to several reasons that the item that needs to be displayed is very small, such as making the angle infinitely close to 0. At the same time, a certain bug caused this angle to be misunderstood as **0** or a **negative** number, thus making it appear as a complete circle instead.

## Fix

- Simply remove or set the `borderRadius` to zero.
- Adjust the width of the ring by setting a bolder size in the `levels`.
- Calculate and display new data sets for series.data, and display the original in labels and tooltips. Convert minimal values to safe percentages of the total. Although this method may not provide accurate visual representation, but it makes hovering over small values easier.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.