h5页面echarts的tooltip属性解析及解决tooltip超出容器的问题

h5页面经常会遇到echarts的需求,这两周在开发过程中发现tooltip在h5页面总是会因为内容过多而超出,特作出如下解决方案:

 tooltip: {
        trigger: 'axis',
        confine: true,           // 该属性可使tooltip一直处于容器中
        transitionDuration: 0,
        position: function (point, params, dom, rect, size) {
            dom.style.transform = "translateZ(0)";
        },//该属性解决ios手机滑动出现白条问题
        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
            type: 'shadow',         // 默认为直线,可选为:'line' | 'shadow'
            shadowStyle: {                       // 阴影指示器样式设置
                width: 'auto',                   // 阴影大小
                color: 'rgba(150,150,150,0.3)'  // 阴影颜色
            }
        },
        formatter: function (params) {//对显示数据进行格式化
            let result = `<span style="color:#fff; float: left; ">${params[0].name}</span>`;
            params.forEach(function (item) {
                if (item.data >= 0) {
                    result += `
                    <br/><span style="background: ${item.color}; width: 5px; height: 5px; border-radius: 50%; float: left; margin: 7px 3px;"></span><span style='color:${item.color};float: left;'>${item.seriesName}:${item.data}</span>`
                }
            })
            return result
        }
    },

实现效果如下:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值