[Bug] Sunburst displaying radian error when the value is extremely small
- 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
### While the panel is small
The other child items are correct, and we can hover over it to see its size.
Only the A2 get an error size.
## 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
Assessment
This issue has not been assessed yet.