tooltip: {
show: true,
trigger: 'axis',
formatter: '{b}:<br>{c} 台',
axisPointer: {
type: 'shadow'
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 12,
}
},
1、trigger:设置tooltip内容是单个节点还是一列
值:item 只显示选中的那一个节点
axis 一般用于多组数据,比如堆叠折线图或者堆叠柱状图,会显示那一组的数据
2、axisPointer:指示器类型
值:shadow 阴影指示器
line 直线指示器
none 无指示器
cross 十字准星指示器
3、textStyle:设置提示框文字样式
4、formatter:可以定义提示框显示的内容
(1)字符串模板
formatter: '{b}:<br>{c} 台',
常见变量有 {a}, {b},{c},{d}
{a} | 系列名称 |
{b} | 数据项名称 |
{c} | 数值 |
{d} | 百分比(饼图) |
如果trigger的值为axis时,可以通过{a0},{a1},这样添加索引的方式来表达。
缺点:不能显示出横轴纵轴以外隐藏的数据,不够灵活
(2)回调函数
formatter: function (params) {
var tar = params[0];
return (
tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value
);
}
可以通过console.log打印一下params具体的内容,根据自己需求设置显示内容
常用:
formatter: function (p) {
let div = `
${p[0].name}
<br/>
${p[0].marker + p[0].seriesName}:${p[0].value}
<br/>
${p[1].marker +p[1].seriesName}:${p[1].value}
`;
return div;
},
marker:是一个span标签,可以展示出一个小圆点
p[0].seriesName:是series数组中第0项的name属性值
p[0].value:是series数组中第0项的data中对应的值