VUE3 dataLabels堆积柱形顶点图

Question

我只想显示最高的总数据标签，但标签是重复的

dataLabels: {
    enabled: true,
    offsetY: -20,
    style: {
      fontSize: "12px",
      colors: ["#304758"],
    },

    formatter: function (value, { seriesIndex, dataPointIndex, w }) {
      return w.globals.stackedSeriesTotals[dataPointIndex];

    },
  },

Answer 1

这是我想出的formatter，应该适用于任何数量的系列

formatter: function (value, { seriesIndex, dataPointIndex, w }) {
  let numberOfSeries = w.config.series.length - 1
  if(seriesIndex == numberOfSeries){
    return w.globals.stackedSeriesTotals[dataPointIndex];
  } else if (seriesIndex<numberOfSeries){
    let sum = 0
    while (seriesIndex < numberOfSeries) {
      seriesIndex++;
      sum+= w.config.series[seriesIndex].data[dataPointIndex] || 0
    }
    if (sum === 0) return w.globals.stackedSeriesTotals[dataPointIndex];
  }
},

VUE3 dataLabels堆积柱形顶点图

VUE3 dataLabels stacked column apex chart

vue.js

vuejs3

apexcharts