Placing information inside the chart series - echarts

Question

I have the chart bellow and I want to add the percentage to the series body. Like I manipulate the image bellow in red.
how Is this possible?
https://codesandbox.io/s/label-line-adjust-forked-09ukre?file=/index.js
var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false
});
var app = {};
var option;
var datas = [
////////////////////////////////////////
[
{ name: "test1", value: 20 },
{ name: "test2", value: 40 },
{ name: "test3", value: 40 }
]
];
option = {
title: {
text: "test",
left: "center",
textStyle: {
color: "#999",
fontWeight: "normal",
fontSize: 14
}
},
series: datas.map(function (data, idx) {
return {
type: "pie",
radius: [80, 160],
top: "10%",
height: "33.33%",
left: "center",
width: 400,
itemStyle: {
borderColor: "#fff",
borderWidth: 1
},
label: {
alignTo: "edge",
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: "#999"
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
data: data
};
})
};
if (option && typeof option === "object") {
myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);
Thanks

Answer 1

To place information inside the chart, you have to use position: "inside" in the label. Set what is put inside the label with the formatter. (Here, {c} is the value of a data item)
label: {
formatter: "{c}%",
position: "inside"
},
But it seems that it's not possible to have both a label inside AND one outside the same chart (like in your image). However, a workaround can do the job here. Like using 2 identical series except one has the label from your example code, and one has the label code I wrote above. One chart will be on top of the other (wich is a bit messy) but the result will be as you want :