VChart
VChart copied to clipboard
VisActor
[Feature] 优化饼图只有一条数据时的标签展示
What problem does this feature solve?
const spec = {
"type": "pie",
"autoFit": true,
"stack": false,
"outerRadius": 0.8,
"innerRadius": 0.5,
"padAngle": 0.6,
"minAngle": 30,
"categoryField": "label",
"valueField": "value",
"data": {
"values": [
{
"label": "Personal profile",
"value": "10"
}
]
},
"pie": {
"style": {
"cursor": "pointer"
},
"state": {
"hover": {
"outerRadius": 0.9
}
}
},
label: {
visible: true,
line: {
style: {
lineWidth: 2,
},
},
textType: 'rich',
formatMethod: (text, datum) => {
return [
{
text: ${text}\n,
fontSize: 12,
fontWeight: 400,
lineHeight: 20,
fill: '#8a8a8a',
fontFamily: 'TikTokFont',
},
{
text: ${text}\n,//labelFormatMethod(datum),
fontSize: 14,
fontWeight: 500,
lineHeight: 22,
fill: '#121212',
fontFamily: 'TikTokFont',
},
];
},
},
// "tooltip": {
// "mark": {
// "hasShape": false,
// "title": {
// "visible": false
// },
// "content": {},
// "activeType": "mark"
// },
// "style": {
// "offset": {
// "x": 10,
// "y": 10
// },
// "panel": {
// "padding": [
// 8,
// 12
// ],
// "backgroundColor": "#121212",
// "border": {
// "color": "#ffffff",
// "width": 0,
// "radius": 8
// },
// "shadow": {
// "x": 0,
// "y": 4,
// "blur": 12,
// "spread": 0,
// "color": "rgba(33,37,44,0.1)"
// }
// },
// "spaceRow": 4,
// "titleLabel": {
// "fontSize": 12,
// "lineHeight": 20,
// "fontColor": "#ffffff",
// "fontWeight": 400,
// "textAlign": "left",
// "textBaseline": "middle",
// "spacing": 0
// },
// "shape": {
// "size": 6,
// "spacing": 4
// },
// "keyLabel": {
// "fontSize": 12,
// "lineHeight": 24,
// "fontColor": "rgba(255,255,255,.6)",
// "textAlign": "left",
// "textBaseline": "middle",
// "spacing": 6,
// "fontWeight": 400
// },
// "valueLabel": {
// "fontSize": 16,
// "lineHeight": 24,
// "fontColor": "#ffffff",
// "fontWeight": 500,
// "textBaseline": "middle",
// "spacing": 0
// }
// },
// "visible": true,
// "activeType": [
// "mark",
// "dimension"
// ],
// "renderMode": "html",
// "trigger": "hover",
// "className": "vchart-tooltip-element",
// "enterable": false,
// "transitionDuration": 150,
// "triggerOff": "hover",
// "confine": false,
// "parentElement": {}
// },
"height": 240,
"region": [
{}
],
"series": [
{
"outerRadius": 0.8,
"pie": {
"style": {
"fillOpacity": 1,
"cursor": "pointer"
},
"state": {
"hover": {
"outerRadius": 0.9
}
}
},
label: {
visible: true,
line: {
style: {
lineWidth: 2,
},
},
textType: 'rich',
formatMethod: (text, datum) => {
return [
{
text: ${text}\n,
fontSize: 12,
fontWeight: 400,
lineHeight: 20,
fill: '#8a8a8a',
fontFamily: 'TikTokFont',
},
{
text: ${text}\n,//labelFormatMethod(datum),
fontSize: 14,
fontWeight: 500,
lineHeight: 22,
fill: '#121212',
fontFamily: 'TikTokFont',
},
];
},
},
"innerLabel": {
"style": {
"lineWidth": 2
}
},
"labelLine": {},
"innerRadius": 0.5,
"animation": true,
"animationThreshold": 2000,
"type": "pie",
"categoryField": "label",
"valueField": "value",
"padAngle": 0.6,
"minAngle": 30
}
]
};
What does the proposed API look like?
no api
