堆叠柱状图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>`;
},
也可以使用模版引擎(但是要注意框架是否支持,且在这个模版字符串中只能使用行内样式,我试过其他方式都没有作用,希望能有大佬帮忙解惑)