I tried using nested rich to align text to the center of a rich: bg section. But, the nesting doesn't work:
formatter: function(params) {
const nome = params.name;
const valor = params.value;
return ["{bg| {center|"+nome+"}}",
"{c|Content}"].join("\n");
}
If I don't nest, the text appears, but not center aligned.
formatter: function(params) {
const nome = params.name;
const valor = params.value;
return ["{bg|"+nome+"}",
"{c|Content}"].join("\n");
}
Complete code:
document.addEventListener("DOMContentLoaded", function() {
const myChartUse = echarts.init(document.getElementById("myChart"));
option = {
series: [{
type: "pie",
radius: ["70%", "55%"],
padAngle: 5,
itemStyle: {
normal: {
borderRadius: 5
},
emphasis: {
color: "#40bcac"
}
},
label: {
borderWidth: 2,
width: 120,
padding: 2,
borderColor: "#020202",
formatter: function(params) {
const nome = params.name;
const valor = params.value;
return ["{bg| " + nome + "}",
"{c|Content}"
].join("\n");
},
rich: {
bg: {
backgroundColor: "#020202",
color: "#f2f2f2",
height: 20,
width: "100%",
borderRadius: [3, 3, 0, 0],
padding: [0, 10, 0, 10]
},
center: {
align: "center"
},
c: {
color: "#020202"
}
}
},
data: [{
name: "Value 1",
value: 78
},
{
name: "Value2",
value: 22
}
]
}]
}
myChartUse.setOption(option);
})<head>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
</head>
<div id="myChart" style="height: 450px; width: 600px;"></div>Nesting rich text elements doesnt seem to be possible. Doing it like in this official example doesnt quite work either (and I currently dont understand whats different).
Best I could come up with is taking the official approach and adding padding:
label: {
...
formatter: ['{c1| name }{bg|}', '{c2| Content }'].join('\n'),
rich: {
bg: {
backgroundColor: '#020202',
height: 20,
width: '100%',
borderRadius: [3, 3, 0, 0],
padding: [0, 10, 0, 10],
align: 'right'
},
c1: {
padding: [0, 0, 0, 18],
color: '#f2f2f2',
align: 'center'
},
c2: {
color: '#020202',
align: 'center'
}
}
},