• 实现的效果
  

• 要求
  1、堆叠数据
  2、可以有多个柱子堆叠
  3、要展示每个堆叠柱子的总和

• options配置

const xData = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const morningIncome = [1, 2, 3, 4, 5, 6, 7];
const morningPay = [7, 6, 5, 4, 3, 2, 1];
const afternoonIncome = [9, 8, 7, 6, 5, 4, 3];
const afternoonPay = [1, 3, 5, 7, 9, 10, 12];

const options = {
  title: {
    text: "每日开支💰",
  },
  tooltip: {
    trigger: "axis",
    formatter: (params: any) => {
      const allData = params.map((item: any) => item.data);
      let dataStr = `<p style="font-weight:bold;">${params[0].name}</p>`;
      params.forEach((item: any, index: number) => {
        if (index === 0) {
          dataStr += `上午：<span style="color:#000000;">${allData[0] + allData[1]}</span>`;
        }
        dataStr += `<div>
          <div style="margin: 0 8px;">
            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:50%;background-color:${item.color};"></span>
            <span>${item.seriesName}</span>
            <span style="color:#000000;">${item.data}</span>
          </div>
        </div>`;
        if (index === 1) {
          dataStr += `<br/>下午：<span style="color:#000000;">${allData[2] + allData[3]}</span>`;
        }
      });
      return dataStr;
    },
  },
  grid: {
    left: "1%",
    right: "1%",
    top: "15%",
    bottom: "1%",
    containLabel: true,
  },
  legend: {},
  xAxis: {
    type: "category",
    data: xData,
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "收入",
      type: "bar",
      stack: "stack1", // 重点！！stack值相同的会队叠在一起，后面数在前面的上面
      data: morningIncome,
    },
    {
      name: "支出",
      type: "bar",
      stack: "stack1",
      data: morningPay,
      label: {
        show: true,
        position: "top",
        // 巧妙利用lable，计算并展示总值
        formatter: (params: any) =>
          morningIncome[params.dataIndex] + morningPay[params.dataIndex],
      },
    },
    {
      name: "收入",
      type: "bar",
      stack: "stack2",
      data: afternoonIncome,
    },
    {
      name: "支出",
      type: "bar",
      stack: "stack2",
      data: afternoonPay,
      label: {
        show: true,
        position: "top",
        formatter: (params: any) =>
          afternoonIncome[params.dataIndex] + afternoonPay[params.dataIndex],
      },
    },
  ],
}