VChart
VChart copied to clipboard
[Feature] optimize the pie label layout for few label
What problem does this feature solve?
- 目前在饼图标签数据较少同时标签内容较大(多行)的情况下,饼图标签的布局效果不佳,需要优化;
- 并且在顶部以及底部的标签容易由于空间不足而无法显示。
example:
const spec = {
type: 'pie',
data: [
{
id: 'id0',
values: [
{ type: 'oxygen', value: '4600.60' },
{ type: 'silicon', value: '27.72' },
{ type: 'aluminum', value: '8.13' },
{ type: 'iron', value: '5' },
{ type: 'calcium', value: '3.63' },
{ type: 'sodium', value: '2.83' },
{ type: 'potassium', value: '2.59' },
{ type: 'others', value: '3.5' }
]
}
],
outerRadius: 0.9,
valueField: 'value',
categoryField: 'type',
label: {
visible: true,
style: {
text: ['aaa', 'aaa', 'aaa', 'aaa', 'aaa']
}
},
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?
null
@purpose233 可以补充一下case