如何在ECharts中以堆积条形图显示总数和百分比

Question

我在 fava-dashboard 插件中使用 ECharts 堆叠条形图。我有以下代码可以生成堆积条形图：

      const currencyFormat = new Intl.NumberFormat(undefined, {
        style: 'currency',
        currency: ledger.ccy,
        maximumFractionDigits: 0,
      });
      const years = helpers.iterateYears(ledger.dateFirst, ledger.dateLast);
      
      const amounts = {};
      for (let query of panel.queries) {
        amounts[query.name] = {};
        for (let row of query.result) {
          amounts[query.name][row.year] = -row.value[ledger.ccy];
        }
      }

      return {
        tooltip: {
          valueFormatter: currencyFormat.format,
        },
        xAxis: {
          type: 'category',
          data: years,
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          axisLabel: {
            formatter: currencyFormat.format,
          },
        },
        series: panel.queries.map((query) => ({
          type: 'bar',
          barWidth: '30%',
          name: query.name,
          stack: query.stack,
          data: years.map((year) => amounts[query.name][year] ?? 0),
        })),
        onClick: (event) => {
          const query = panel.queries.find((q) => q.name === event.seriesName);
          if (query) {
            const link = query.link.replaceAll("#", "%23").replace("{year}", event.name);
            window.open(link);
          }
        },
      };

图表看起来不错，但我想做出两点改进：

• 在栏的顶部，我想显示每个栏列的所有堆栈的总和。
• 当我将鼠标悬停在一堆栏上时，它当前会显示该堆栈的金额值。我还想添加占总数的百分比。

例如，如果堆栈有 A、B、C 组件，其值为 100,200,300，我想在顶部显示总共 600 个组件，对于我悬停在其上的每个组件，我想显示 100 (16.67%)、200 (33.33) %) 和 300 (50%)。

查看 Echart 文档，我发现您必须提供一些自定义格式化程序，但我不确定如何进一步进行。任何帮助都会很好。

Answer 1

1. 我能够通过使用使用百度ECharts在堆叠条形图顶部显示数据值的总和

   中的答案来解决显示总和的问题

2. 为了显示百分比，我现在有以下内容：

    tooltip: {        
     trigger: 'axis',     
     formatter: function (params) {
          let total = 0;
          params.forEach(item => { total += item.value; });
          let str1 = `${params[0].axisValueLabel}<br />`;
          let str2 = '';
          params.forEach(item => { str2 += `${item.seriesName} ${currencyFormat.format(item.value)} (${percentFormat.format(item.value / total)})<br />`;  });
          console.log(str1 + str2);
          return str1 + str2;
      },
      valueFormatter: currencyFormat.format,
    },
   

这工作正常，但如何让堆栈颜色图标（“圆圈”）和粗体值显示出来？