Echarts画散点图

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

---

前言

下面是我使用echarts画散点图遇到的一些问题的总结，希望通过这些总结可以帮到遇到类似问题的人。

---

一、散点图悬浮框鼠标移入可滚动操作

图例：

参考代码：

tooltip: {
    trigger: 'axis',
    //提示框文本样式
    textStyle: {
        //提示框文字大小
        fontSize: 12,
    },
    //固定悬浮框的高，使他超过显示滚动条
    extraCssText: 'max-height:155px;overflow-y:scroll',
    //鼠标是否可以进入提示框悬浮层中
    enterable: true,
},
1
2
3
4
5
6
7
8
9
10
11
12

二、散点图偏下方的点悬浮数据显示不全

图例：

解决办法：在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]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

三、数据量大、数据类别多、数据重复点多造成散点图散点展示不全或展示散点出现闪烁问题。

图例：

问题原因：散点图散点太集中，区域散点图散点太多造成散点图渲染时出错
参考代码：

 //大数据模式
 large: true,
 // //层级
 zlevel: i,
1
2
3
4