我要评论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
}
},
实现效果如下：
本文地址：https://blog.csdn.net/sunshineboysy/article/details/107933817
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论