-
Notifications
You must be signed in to change notification settings - Fork 199
Open
Labels
enhancementNew feature or requestNew feature or request
Description
What problem does this feature solve?
目前饼图外部标签的布局算法,会将标签分类到左右半圆分别布局,会导致如下的 badcase。
即右侧看似有很大空间,但是顶部的部分标签依然被隐藏了。

图表配置如下:
const spec = {
type: 'pie',
width: 800,
height: 500,
data: [
{
id: 'id0',
values: [
{ type: 'Category1', value: 90 },
{ type: 'Category2', value: 20 },
{ type: 'Category3', value: 18 },
{ type: 'Category4', value: 18 },
{ type: 'Category5', value: 16 },
{ type: 'Category6', value: 14 },
{ type: 'Category7', value: 5 },
{ type: 'Category8', value: 1 },
]
}
],
outerRadius: 0.9,
innerRadius: 0.5,
padAngle: 0.6,
valueField: 'value',
categoryField: 'type',
pie: {
style: {
cornerRadius: 10
},
state: {
hover: {
outerRadius: 0.85,
stroke: '#000',
lineWidth: 1
},
selected: {
outerRadius: 0.85,
stroke: '#000',
lineWidth: 1
}
}
},
legends: {
visible: true
},
label: {
visible: true,
formatMethod: (label, data) => {
return {
type: 'rich',
text: [
{
text: `${data.value}%\n`,
fill: 'rgba(0, 0, 0, 0.92)',
fontSize: 16,
fontWeight: 500,
stroke: false
},
{
text: data.type,
fill: 'rgba(0, 0, 0, 0.55)',
fontSize: 12,
fontWeight: 400,
stroke: false
}
]
};
},
style: {
wordBreak: 'break-word',
maxHeight: 50
}
},
tooltip: {
mark: {
content: [
{
key: datum => datum['type'],
value: datum => datum['value'] + '%'
}
]
}
}
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;What does the proposed API look like?
none
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or request