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

【问题标题】：ECharts: How to specify label for every bar in bar-stack chart?ECharts：如何为条形堆叠图中的每个条形指定标签？
【发布时间】：2022-01-18 04:16:41
【问题描述】：

绿色条的标签是错误的。

我已经指定它们应该是'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>

【问题讨论】：

标签： echarts stacked-chart

【解决方案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>

【讨论】：