提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

Echarts画散点图

• 前言
• 一、散点图悬浮框鼠标移入可滚动操作
• 二、散点图偏下方的点悬浮数据显示不全
• 三、数据量大、数据类别多、数据重复点多造成散点图散点展示不全或展示散点出现闪烁问题。

前言

下面是我使用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,