使用数据集dataset时,会遇到悬浮框要展示数据,但是柱状图或者折线图的图中不显示的情况。以下的tooltip可以展示全部数据集中,对应该时间或系列的数据信息。
对有在图中展示的数据,会展示对应的颜色的marker圆点。而没有在图中展示的,则会展示一个白色的圆点,用来对齐。
效果图:
const tooltip = {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: (params: any[]) => {
let html = '';
// 整理 marker
const markers: string[] = [];
const labelNames: string[] = [];
params.forEach((param) => {
const { marker, seriesName } = param;
markers.push(marker);
labelNames.push(seriesName);
});
const { dimensionNames: names, data: seriesData } = params[0];
// 删去 undefined
for (let i = names.length - 1; i >= 0; i -= 1) {
if (!names[i]) names.pop();
}
html += `${params[0].axisValueLabel} <br>`;
for (let i = 1; i < names.length - 1; i += 1) {
html += `${
labelNames.includes(names[i]) ? markers[labelNames.indexOf(names[i])] : Marker
} ${names[i]}: ${transformNum(seriesData[i], {
isPercentage: percentageList.includes(names[i]),
})}<br>`;
}
return html;
},
},
percentageList是需要转化为百分比格式的名称合成的数组。