Open liuyunzidian opened 2 weeks ago
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
}
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' } ] } ] };
You can set label.alignTo: 'labelLine'
(see doc), then all the labels will display correctly. I will check this bug meanwhile.
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:
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:
Current Behavior
Expected Behavior
Expect the label to display normally
Environment
Any additional comments?
No response