echarts tooltip自适应宽高让提示框适应不同屏幕尺寸demo
作者:huyouooo
这篇文章主要为大家介绍了echarts tooltip自适应宽高让提示框适应不同屏幕尺寸,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
导读
- "定制化提示框样式,让你的数据更醒目"
- "优化提示框位置,让信息一目了然"
- "滚动条功能,轻松查看大量数据"
- "个性化文字颜色,让你的数据更加突出"
- "自适应宽高,让提示框适应不同屏幕尺寸"
demo
tooltip: { trigger: "axis", backgroundColor: "#54AEEC", //设置背景图片 rgba格式 color: "#fff", height: "50px", padding: [15, 15], enterable: true,//滚动条 extraCssText: "max-width:60%;max-height:83%; overflow: auto; ",//滚动条 textStyle: { color: "white", //设置文字颜色 padding: 10, fontSize: 14 }, //改变提示框的位置 不超出屏幕显示 position: function(point, params, dom, rect, size) { //其中point为当前鼠标的位置, //size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小 // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下 // 提示框位置 var x = 0; // x坐标位置 var y = 0; // y坐标位置 // 当前鼠标位置 var pointX = point[0]; var pointY = point[1]; // 提示框大小 var boxWidth = size.contentSize[0]; var boxHeight = size.contentSize[1]; // boxWidth > pointX 说明鼠标左边放不下提示框 if (boxWidth > pointX) { x = 5; } else { // 左边放的下 x = pointX - boxWidth; } // boxHeight > pointY 说明鼠标上边放不下提示框 if (boxHeight > pointY) { y = 5; } else { // 上边放得下 y = pointY - boxHeight; } return [x, y]; } },
以上就是echarts tooltip自适应宽高让提示框适应不同屏幕尺寸demo的详细内容,更多关于echarts tooltip自适应宽高的资料请关注脚本之家其它相关文章!