前言
下面是我使用echarts画散点图遇到的一些问题的总结，希望通过这些总结可以帮到遇到类似问题的人。
一、散点图悬浮框鼠标移入可滚动操作
图例：
tooltip: {
trigger: 'axis',
//提示框文本样式
textStyle: {
//提示框文字大小
fontSize: 12,
},
//固定悬浮框的高，使他超过显示滚动条
extraCssText: 'max-height:155px;overflow-y:scroll',
//鼠标是否可以进入提示框悬浮层中
enterable: true,
},
二、散点图偏下方的点悬浮数据显示不全
图例：
解决办法：在tooltip中使用position进行悬浮框位置的调整
参考代码：
//提示框位置
position: function (point, params, dom, rect, size) {
//X坐标位置
var x = 0;
//Y轴坐标位置
var y = 0;
//当前鼠标位置
var pointX = point[0];
var pointY = point[1];
//提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
//悬浮提示显示不全
if (boxWidth > 1100) {
$(dom).css("width", "800px")
.css("overflow", "hidden")
.css("text-overflow", "ellipsis")
.css("white-space", "nowrap");
boxWidth = 800;
}
//boxwidth > pointX 说明鼠标左边放不下提示框的情况
if (boxWidth > pointX) {
x = 5;
y -= 15;
} else {
x = pointX - boxWidth - 15;
}
x = x < 0 ? 5 : x;
//boxHeight > pointY 说明鼠标右边放不下提示框的情况
if (boxHeight + 20 > pointY) {
y = pointY + 15;
} else if (boxHeight < pointY) {
y = pointY;
} else {
y += pointY - boxHeight;
}
//#67055:洞察中散点图只留组质心时偏左下角的点悬浮数据显示不全
y = y > 330 ? 230 : y;
//这里采用固定Y轴 X轴随鼠标位置变化
return [x, y]
},
三、数据量大、数据类别多、数据重复点多造成散点图散点展示不全或展示散点出现闪烁问题。
图例：
问题原因：散点图散点太集中，区域散点图散点太多造成散点图渲染时出错
参考代码：
//大数据模式
large: true,
// //层级
zlevel: i,
原文地址:https://blog.csdn.net/spade_Kwo/article/details/128069575
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_17763.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
