echarts -- tooltip

      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中对应的值

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值