Echarts画散点图

news2024/11/29 2:39:02

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

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,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/41627.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

操作系统基础教程——第六章课后答案

1.思考题 &#xff08;6&#xff09;什么是临界区&#xff1f;什么是临界资源?什么是竞争条件? 临界区&#xff1a;访问临界资源的程序段&#xff08;代码&#xff09;。 临界资源&#xff1a;并发进程中共享变量所代表的资源&#xff1b;一次只能供一个进程使用的资源。 …

【机器学习知识点】【1】二维与三维空间梯度下降微分求解及可视化展示

【机器学习知识点】系列文章主要介绍机器学习的相关技巧及知识点&#xff0c;欢迎点赞&#xff0c;关注共同学习交流。 本文主要介绍了机器学习中梯度下降的数学微分求解方法及其可视化。 目录1. 二维空间的梯度下降求解及可视化1.1 二维空间梯度求解1.2二维空间梯度可视化2. 三…

灰色关联度分析-详细代码和说明

1、数据来源&#xff1a;自主计算 2、时间跨度&#xff1a;无 3、区域范围&#xff1a;无 4、指标说明&#xff1a; 因素分析的基本方法过去采用的主要是统计的方法&#xff0c;如回归分析&#xff0c;回归分析虽然是一种较通用的方法&#xff0c;但大都只用于少因素的、线…

SpringBoot SpringBoot 原理篇 3 核心原理 3.2 启动流程【1】

SpringBoot 【黑马程序员SpringBoot2全套视频教程&#xff0c;springboot零基础到项目实战&#xff08;spring boot2完整版&#xff09;】 SpringBoot 原理篇 文章目录SpringBootSpringBoot 原理篇3 核心原理3.2 启动流程【1】3.2.1 环境准备3.2.2 启动流程3 核心原理 3.2 启…

基本的图像处理操作

Python中的图像处理基础图像处理是一种对图像执行操作以从中提取信息或增强图像的方法。图像处理是当今计算机视觉中最热门的话题之一&#xff0c;因为它被认为是计算机视觉、OCR 和其他相机相关领域的基础。让我们开始实际处理图像。提示&#xff1a;只是在这里向你展示一个代…

MySQL数据库的事务

文章目录一、事务是什么&#xff1f;二、事务的四大特征原子性一致性持久性隔离性MySQL的四个隔离级别一、事务是什么&#xff1f; 数据库的事务是一种机制&#xff0c;一个操作序列&#xff0c;里面包含了一组数组库操作命令 事务把所有的命令作为一个整体一起向系统提交或撤…

世界杯直播背后的服务器(云计算体系)

世界杯直播背后的服务器 世界杯直播过程中&#xff0c;各大网络平台流媒体app上最大的变化毫无疑问就是零延迟。以前球迷看球是都会发现&#xff0c;网络直播的球赛会比电视播出的球赛延迟40s左右。如果群里有个看电视的兄弟兄弟每个进球他都能提前40秒预告给你&#xff0c;那么…

MySQL 索引

目录 一、索引的概念 二、索引的作用 三、索引的缺点 四、创建索引的原则依据 五、索引的分类和创建 1、普通索引 2、唯一索引 3、主键索引 4、组合索引&#xff08;单列索引与多列索引&#xff09; 5、全文索引&#xff08;FULLTEXT&#xff09; 六、查看索引 七、…

SpringBoot SpringBoot 原理篇 1 自动配置 1.18 自动配置原理

SpringBoot 【黑马程序员SpringBoot2全套视频教程&#xff0c;springboot零基础到项目实战&#xff08;spring boot2完整版&#xff09;】 SpringBoot 原理篇 文章目录SpringBootSpringBoot 原理篇1 自动配置1.18 自动配置原理1.18.1 变更自动配置1.18.2 小结1.18.3 总结1 自…

校园网站毕业设计,校园网站设计与实现,校园网站论文作品参考

功能清单 【后台管理员功能】 关于我们设置&#xff1a;设置学校简介、联系我们、加入我们、法律声明、学校详情 广告管理&#xff1a;设置小程序首页轮播图广告和链接 留言列表&#xff1a;所有用户留言信息列表&#xff0c;支持删除 会员列表&#xff1a;查看所有注册会员信…

飞桨模型部署至docker并使用FastAPI调用(五)-WordPress展示页面

文章首发及后续更新&#xff1a;https://mwhls.top/4092.html&#xff0c;无图/无目录/格式错误/更多相关请至首发页查看。 新的更新内容请到mwhls.top查看。 欢迎提出任何疑问及批评&#xff0c;非常感谢&#xff01; 飞桨模型部署至docker并使用FastAPI调用目录框架搭建 测试…

关于图的学习

一、图的定义 图G由顶点集V和边集E组成&#xff0c;记为G &#xff08;V, E&#xff09;&#xff0c;其中V(G)表示图G中顶点的有限非空集&#xff1b;E(G)表示图G中顶点之间的关系&#xff08;边&#xff09;集合。若V { v1,v2,...,vn }&#xff0c;则用 | V | 表示图G中顶点…

PyQt5可视化编程-布局管理

在一个GUI程序里&#xff0c;布局是一个很重要的方面。布局就是如何管理应用中的元素和窗口。有两种方式可以搞定&#xff1a;绝对定位和PyQt5的layout类 1.绝对定位: 每个程序都是以像素为单位区分元素的位置&#xff0c;衡量元素的大小。所以我们完全可以使用绝对定位搞定每个…

【Linux】网络编程基础

文章目录网络基础1.网络与操作系统的关系2.计算机网络发展3.协议3.1协议分层3.2OS七层模型3.3TCP/IP五层模型4.网络传输基本流程4.1数据包的封装和分用4.1.1报头和有效载荷4.2局域网的两台主机通信4.3跨网络的两台主机通信5.IP地址和MAC地址5.1IP地址5.2MAC地址5.3IP地址和MAC地…

XSCTF联合招新【真是阳间题】(MSIC+Crypto)

文章目录XSCTF联合招新【真是阳间题】&#xff08;MSICCrypto&#xff09;Step1&#xff1a;查看文件step2&#xff1a;操作流程关于Base64&#xff0c;Base32&#xff0c;Base16进制的区别方法:Base64&#xff1a;Base32:Base16:XSCTF联合招新【真是阳间题】&#xff08;MSICC…

控制瑞芯微平台GPIO(输入、输出、电平读取)

控制瑞芯微平台GPIO&#xff08;输入、输出&#xff09;GPIO编号计算控制步骤输出高电平读取电平GPIO编号计算 GPIO编号 BANK * 32 GPIO_PIN GPION_MP N * 32 8 * (M -1) P 示例&#xff1a;GPIO7_C2 7 X 32 8 X (3-1) 2 242 GPIO2_A1 2 X 32 8 X (1-1) 1 73 A对…

IO流~File

File File类概述和构造方法 File&#xff1a;它是文件和目录路径名的抽象表示 文件和目录是可以通过File封装成对象的对于File而言&#xff0c;其封装的并不是一个真正存在的文件&#xff0c;仅仅是一个路径名而已。它可以是存在的&#xff0c;也可以是不存在的。将来是要通…

【PyTorch深度强化学习】DDPG算法的讲解及实战(超详细 附源码)

需要源码请点赞关注收藏后评论区留言留下QQ~~~ 一、DDPG背景及简介 在动作离散的强化学习任务中&#xff0c;通常可以遍历所有的动作来计算动作值函数q(s,a)q(s,a)&#xff0c;从而得到最优动作值函数q∗(s,a)q∗(s,a) 。但在大规模连续动作空间中&#xff0c;遍历所有动作是不…

Css3 2D转换 2D转换之移动tranlate

转换&#xff08;transform&#xff09;是css3中具有颠覆性的特征之一&#xff0c;可以实现元素的位移、旋转、缩放等效果。 转换你可以简单理解为变形。 移动&#xff1a;translate旋转&#xff1a;rotate缩放&#xff1a;scale 2D转换是改变标签在二维平面上的位置和形状的…

Spring - InstantiationAwareBeanPostProcessor 扩展接口

文章目录Preorg.springframework.beans.factory.config.InstantiationAwareBeanPostProcessorInstantiationAwareBeanPostProcessor 注册过程源码分析postProcessBeforeInstantiation的执行时机源码解析使用场景 &#xff1a; 创建代理类Pre Spring Boot - 扩展接口一览 org.s…