Solution
The pie chart label supports the formatting method. In the formatting method, we can switch the label to rich text by setting type: rich
in the return object; rich text supports common line breaks, ICONS, and image displays.
Code Examples
const spec = {
type: 'pie',
data: [
{
id: 'id0',
values: [
{ type: 'oxygen', value: '26.60' },
{ type: 'silicon', value: '27.72' },
{ type: 'aluminum', value: '8.13' },
{ type: 'iron', value: '5' },
{ type: 'calcium', value: '3.63' },
]
}
],
outerRadius: 0.8,
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
}
}
},
title: {
visible: true,
text: 'Statistics of Surface Element Content'
},
legends: {
visible: true,
orient: 'left'
},
label: {
visible: true,
formatMethod: (label, datum) => {
return {
type: 'rich',
text: [{
text: `${label}\n`,
fontSize: 12,
fill: '#8a8a8a',
lineHeight: 20,
fontWeight: 400
}, {
text: `${datum._percent_}%`,
fill: '#121212',
fontSize: 14,
fontWeight: 500,
lineHeight: 22,
}]
}
}
},
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;
Top comments (0)