赞
踩
- 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中对应的值
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。