设置提示框位置随鼠标移动,并解决提示框显示不全的问题

https://www.cnblogs.com/zhilu/p/14047105.html

tooltip: {
            trigger: 'axis',
            // position: ['50%', '50%'],
            position: function(point, params, dom, rect, size) {
              var x = 0;
              var y = 0;
              var pointX = point[0];
              var pointY = point[1];
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];
              if (boxWidth > pointX) {
                x = 5;
              } else {
                x = pointX - boxWidth;
              }
              if (boxHeight > pointY) {
                y = 5;
              } else {
                y = pointY - boxHeight;
              }
              return [x, y];
            },
            axisPointer: {
              type: 'shadow'
            },
            textStyle: {
              color: '#fff'
            },
            formatter: function(datas) {
              let res = datas[0].name + '<br/>';
              let val;
              const length = datas.length;
              for (let i = 0; i < length; i++) {
                val = datas[i].value.toFixed(num).replace(/\d(?=(\d{3})+\.)/g, '$&,');
                // console.log(val);
                res +=
                  '<span style="display:inline-block;margin-right:0.05rem;border-radius:0.05rem;width:0.1rem;height:0.1rem;background-color:' +
                  datas[i].color +
                  ';"></span>' +
                  datas[i].seriesName +
                  ':' +
                  val +
                  '<br/>';
              }
              return res;
            }
          },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值