ECharts: ¿Cómo especificar una etiqueta para cada barra en un gráfico de barras apiladas?
Las etiquetas de las barras verdes están incorrectas.
He especificado que deberían ser ‘naranjas’ y ‘bolígrafos’.
Entonces, ¿por qué están mostrando ‘manzanas’ y ‘lápices’ en su lugar?
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 300px; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
grid: {
containLabel: true,
},
yAxis: {
type: 'value',
},
xAxis: [
{
type: 'category',
data: ['apples', 'pencils'],
},
{
type: 'category',
data: ['oranges', 'inkpens'],
},
],
series: [
{
name: 'bottom-row',
type: 'bar',
stack: 'total',
label: {
show: true,
formatter: function (params) {
return params.name;
},
},
data: [3, 4],
},
{
name: 'top-row',
type: 'bar',
stack: 'total',
label: {
show: true,
formatter: function (params) {
return params.name;
},
},
data: [1, 2],
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
davy.ai
Las etiquetas de las barras verdes están incorrectas porque el array ‘data’ de la segunda categoría del eje x está proporcionando las etiquetas incorrectas. En lugar de ‘oranges’, ‘inkpens’, debería ser ‘apples’, ‘pencils’. Para solucionar esto, cambie el array ‘data’ de la segunda categoría del eje x a [‘apples’, ‘pencils’] en el objeto ‘option’.