ECharts：如何为条形堆叠图中的每个条指定标签？

Question

绿条的标签有误。

我指定它们应该是 'oranges' 和 'inkpens'。

那么为什么他们显示的是 'apples' 和 'pencils'？

<!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>

Answer 1

这可以通过以下 formatter 函数实现，索引到具有 dataIndex 和 componentIndex 子属性的二维标签数组：

function formatter(params) {
    const { dataIndex: x, componentIndex: y } = params;
    return [
      ['apples', 'oranges'],
      ['pencils', 'inkpens']
    ][x][y];
  }

例如：

<!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">
      const dom = document.getElementById("container");
      const myChart = echarts.init(dom);
      const app = {};
      function formatter(params) {
        const { dataIndex: x, componentIndex: y } = params;
        return  [
        ['apples', 'oranges'],
        ['pencils', 'inkpens']
        ][x][y];
      }
      const option = {
        grid: {
          containLabel: true
        },
        yAxis: {
          type: 'value',
          show: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['apples', 'pencils']
          },
          {
            type: 'category',
            data: ['oranges', 'inkpens']
          }
        ],
        series: [
          {
            name: 'bottom-row',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              formatter
            },
            data: [3, 4]
          },
          {
            name: 'top-row',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              formatter
            },
            data: [1, 2]
          }
        ]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>

ECharts：如何为条形堆叠图中的每个条指定标签？

ECharts: How to specify label for every bar in bar-stack chart?

stacked-chart

echarts