JS，EChart自定义tooltip的问题
本帖最后由 cqwcns 于 2023-2-19 14:22 编辑如下代码，我们有两组数据，分别是得分（arrScore）和排名（arrRank）。
我把得分数据渲染到图表中。
但在图表的tooltip中我希望能分别显示得分和排名（如图所示）。
我的想法是如何把这个排名数据加入图表的option中，使得formatter的params能获得排名数据，在通过params.seriesIndex等值，获得对应排名。
各位大佬有什么实现的方法，请指教，感谢。
代码：
// 得分
const arrScore = [
["部门", "参评率", "满意率", "重复率", "投诉率"],
["广东省", 120, 160, 20, 20, 40],
["台湾省", 80, 20, 0, 0, 100],
["北京市", 60, 40, 40, 40, 180],
["上海市", 20, 80, 60, 80, 240],
["四川省", 40, 60, 80, 100, 280],
["福建省", 100, 100, 100, 60, 360]
];
// 排名
const arrRank = [
["部门", "参评率", "满意率", "重复率", "投诉率"],
["广东省", 1, 1, 3, 1, 2],
["台湾省", 4, 4, 5, 6, 4],
["北京市", 3, 2, 1, 3, 5],
["上海市", 2, 3, 4, 2, 3],
["四川省", 6, 6, 6, 5, 1],
["福建省", 5, 5, 2, 4, 6]
];
// 创建系列
const objSeries = {
type: 'bar', stack: 'total', label: {
show: true
},
emphasis: {
focus: 'series'
}
},
arrSeries = [];
for (let i = 0; i < arrScore.length - 1; i++) {
arrSeries.push(objSeries);
}
// 创建配置
option = {
legend: {
show: true
},
label: {
show: true
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'cross',
label: {}
},
formatter: (params) => {
console.log(params)
let tip = `<div class="p-b-3">${params.marker} <span class="font-bold">${params.seriesName}</span> （${params.name}）</div>`;
tip += `<div class="flex justify-between p-b-3"><span>排名</span> <span class="font-bold">${'想这里显示排名'}</span></div>`
tip += `<div class="flex justify-between"><span>得分</span> <span class="font-bold">${parseFloat(params.value.toFixed(2))}</span></div>`
return tip
}
},
dataset: {
source: arrScore
},
xAxis: {},
yAxis: { type: 'category' },
series: arrSeries
};
DEMO链接：
https://echarts.apache.org/examp ... UAfdAfm5W1XdKtLRYgA
直接访问DEMO链接，可以跳转到官方示例页面测试。
或者复制我的代码，到官方示例页面中复现，谢谢。 这样的吗 ${arrRank.slice(1)} 本帖最后由 Su、 于 2023-2-19 19:33 编辑
```
console.log(arrRank);
let tip = `<div class="p-b-3">${params.marker} <span class="font-bold">${params.seriesName}</span> （${params.name}）</div>`;
tip += `<div class="flex justify-between p-b-3"><span>排名</span> <span class="font-bold">${arrRank}</span></div>`;
tip += `<div class="flex justify-between"><span>得分</span> <span class="font-bold">${parseFloat(
params.value.toFixed(2)
)}</span></div>`;
return tip;
```
页:
[1]