堆叠柱状图显示具体数据和百分比

堆叠柱状图tooltip同时显示具体数据和百分比，这里要先将数据处理成[{value：123，num：456},{value：123，num：456}]这样的格式。(num可以是随便什么名字)

// 计算百分比
  const setDataValue = (dataOne: any, dataTwo: any) => {
    const res: any = [];
    Object.keys(dataOne).forEach((item) => {
      const total: number | any = Object.values(dataOne).reduce(
        (pre: number, ele: any) => {
          return pre + ele;
        },
        0,
      );
      const totalT: number | any = dataTwo
        ? Object.values(dataTwo).reduce((pre: number, ele: any) => {
            return pre + ele;
          }, 0)
        : 0;
      const tempO = ((dataOne[item] / total) * 100).toFixed(2);
      const tempT = ((dataTwo[item] / totalT) * 100).toFixed(2);
      // 保证所有数据加起来不超过100
      const temp = [
        {
          value: Math.floor(tempO * 100) / 100,
          num: dataOne[item],
        },
        {
          value: Math.floor(dataT * 100) / 100,
          num: dataTwo[item],
        },
      ];

      res.push(temp);
    });
    return res;
  }

这个函数只适用于对象类型的数据，数组类型的需要稍加更改（因为数组计算百分比更简单我就不写了）

formatter: function (params: any) {
          // 使用模版字符串加map，页面会出现逗号，在map的末尾加上.join('')就不会有逗号了
          const toolData = params
            .map(function (item: any) {
              // 这句是为了防止传入的数据为undefined或者不是字符串
              // 将数据处理成每隔3位加一个逗号的格式
              const num = item.data.num
                ? item.data.num.toString().replace(/(?=(\B)(\d{3})+$)/g, ',')
                : 0;
              // 这句是为了防止传入的数据为undefined
              const value = item.data.value ? item.data.value : 0;
              return `<div style="display: flex;">
                        <div style="flex: 1;
                                    margin-bottom: 5px;
                                    text-align: left;">
                          <div style="background-color: ${item.color};
                                      width: 8px;
                                      height: 8px;
                                      border-radius: 50%;
                                      display: inline-block;
                                      font-size: 14px;
                                      vertical-align: middle;"></div>
                          <div style="display: inline-block;
                                      font-size: 14px;
                                      vertical-align: middle;
                                      margin-left: 8px;">${item.seriesName}</div>
                        </div>
                        <div style="width: 50px;
                                    text-align: right;">${value}%</div>
                        <div style="flex: 1;
                                    margin-bottom: 5px;
                                    text-align: right;">${num}人</div>
                      </div>`;
            })
            .join('');
          return `<div style="width: 280px;
                              padding: 0 10px;
                              font-family: PingFangSC-Regular;
                              font-size: 14px;
                              color: #2E2E2E;">
                    <div style="margin-bottom: 13px;">${params[0].name}</div>${toolData}</div>`;
        },

也可以使用模版引擎（但是要注意框架是否支持，且在这个模版字符串中只能使用行内样式，我试过其他方式都没有作用，希望能有大佬帮忙解惑）