这个就是tooltip
option的tooltip中formatter可以自定义显示内容
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
textStyle:{
align:'left',
},
formatter(params) { //自定义tooltip显示内容
// params可以拿到当前柱子的所有数据
let data = ''
let sum = 0
for (let index = 0; index < params.length; index++) { // 遍历params，拼接成自己想要的内容return出去
let str = params[index].marker.substring(params[index].marker.indexOf('background-color'))
const startNum = str.indexOf(':')
const endNum = str.indexOf(';')
const color = str.substring(startNum+1,endNum)
const item = `${params[index].marker}<span style="color: ${color}">${params[index].seriesName}: ${params[index].data}</span><br/>`;
sum = sum + params[index].data
data = data + item
}
const name = params[0].name
data = name +'<br/>'+ data + '总计： '+ sum
return data;
},
},
然后就是这个样子的
image.png
