如何在 Apache Echart 中显示堆叠条形图顶部和底部列的正负序列总和值？

Question

我目前在 Angular 15 中使用 Apache Echart（版本 - 15.0.2）。

我创建了一个堆栈条形图，在这里我创建了一系列值的总和，如果我得到的正值能够根据最后一个索引显示顶部，但我得到的负值无法显示底部， 我的预期结果是，如果获得负值需要显示堆栈条形图列的底部，下面我已附加打印屏幕，请执行需要的操作。

我的结果：

**除了结果：**

这里需要为堆积条形图显示负值底部。

源代码

const series = [
    {
      name: 'Bing',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [60, 72, 71, 74, 190, 130, 110],
      avoidLabelOverlap: true
    },
    {
      name: 'Others',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [62, 82, 91, 84, 109, 110, -120],
      avoidLabelOverlap: true
    }
  ];


option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        
        name: 'yAxes',
        nameLocation: 'middle',
        nameGap: 25,
        alignTicks: true,
      },
  yAxis: {
        type: 'value',
        name: 'yAxes',
        nameLocation: 'middle',
        nameGap: 25,
        alignTicks: true,
       
      },
  series: series.map((item:any, index) => Object.assign(item, {
      type: 'bar',
      stack: true,
      label: {
        show: index === series.length - 1 ,
        fontSize: 14,
        color: '#ccc',
        position: 'top',
        formatter: function (param) {
          let sum = 0;
          series.forEach(item => {
            sum += item.data[param.dataIndex];
          });
          return sum

        }.bind(this),
      },
    }))
};

我正在尝试以下步骤，但不起作用。

formatter: function (param) {
          let sum = 0;
          series.forEach(item => {
            sum += item.data[param.dataIndex];
          });
          sum > 0 ? item.label.position = 'top' : item.label.position = 'bottom'

          return sum

        }.bind(this),

**如果获得正值**

   label : { show : true, position : 'top'}

**如果得到负值**

   label : { show : true, position : 'bottom'}

Answer 1

您可以使用

label: {position: 'bottom'}

构建透明辅助栏以达到所需的结果。 示例：

const data = [[60,62],[72,82],[71,91],[74,84],[190,109],[130,110],[110,-120]];
const sums = data.map(row => row.reduce((next, current) => next + current, 0));
const helperBar = sums.map((value, index) => {
  if (value >= 0) {
    return 0;
  }
  return Math.min.apply(null, data[index])
})

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

    name: 'yAxes',
    nameLocation: 'middle',
    nameGap: 25,
    alignTicks: true
  },
  yAxis: {
    type: 'value',
    name: 'yAxes',
    nameLocation: 'middle',
    nameGap: 25,
    alignTicks: true
  },
  series: [
    {
      name: 'Bing',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: data.map(row => row[0]),
      avoidLabelOverlap: true,
    },
    {
      name: 'Others',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: data.map(row => row[1]),
      avoidLabelOverlap: true,
            label: {
        show: true,
        position: 'top',
        formatter: function (param) {
          let sum = sums[param.dataIndex];
          if (sum < 0) {
            return "";
          }
          return sum;
        }
      }
    },
    {
      type: 'bar',
      barGap: -1,
      data: helperBar,
      silent: 'true',
      color: "transparent",
      label: {
        show: true,
        position: 'bottom',
        formatter: function (param) {
          let sum = sums[param.dataIndex];
          if (sum < 0) {
            return sum;
          }
          return "";
        }
      }
    }
  ]
};

或者，您可以根据总和的符号使用两个系列的格式化程序将所有标签放在顶部。 示例：

data = [[60, 72, 71, 74, 190, 130, 110], [62, 82, 91, 84, 109, 110, -120]];

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

    name: 'yAxes',
    nameLocation: 'middle',
    nameGap: 25,
    alignTicks: true
  },
  yAxis: {
    type: 'value',
    name: 'yAxes',
    nameLocation: 'middle',
    nameGap: 25,
    alignTicks: true
  },
  series: [
    {
      name: 'Bing',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: data[0],
      avoidLabelOverlap: true,
      label: {
        show: true,
        position: 'top',
        formatter: function (param) {
          let sum = 0;
          data.forEach(item => {
            sum += item[param.dataIndex];
          });
          if (sum < 0) {
            return sum;
          }
          return "";
        }
      }
    },
    {
      name: 'Others',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: data[1],
      avoidLabelOverlap: true,
            label: {
        show: true,
        position: 'top',
        formatter: function (param) {
          let sum = 0;
          data.forEach(item => {
            sum += item[param.dataIndex];
          });
          if (sum < 0) {
            return "";
          }
          return sum;
        }
      }
    }
  ]
};