echarts
中自定义tooltip
的属性是formatter
,它是一个方法,主要是讲一下怎么将自定义的值显示在tooltip
中,因为自己刚开始用的时候,还是查了半天的。
当未定义的时候,数据如下:
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
tooltip
显示如下:
假如说我想让每个柱子中都添加显示
所需天数
,那么我就需要自定义tooltip
,那就先加个formatter
函数,它主要是有个params
,先看一下这个参数是个什么鬼
formatter(params) {
console.log(params)
///
}
当hover
最后一条数据的时候,输出如下:
发现
data
就是传的当前的值,那么传值的时候给data
直接加字段就可以了,把data
改为
data: [{ value: 10, day: 1 },
{ value: 52, day: 10 },
{ value: 200, day: 1 },
{ value: 334, day: 13 },
{ value: 390, day: 20 },
{ value: 330, day: 21 },
{ value: 220, day: 1 }]
此时再次hover
的时候,显示就变为
那么你就可以让它显示任何你想显示的字段了,只需要给
data
里面塞数据就好了,例如:
formatter(params) {
const item = params[0];
return `
直接访问:${item.data.value}
所需天数:${item.data.day}
`;
},