echarts 切换时出现上一次图形残留。

先说结果:悬浮高亮导致。这可能使echarts的bug。

正常情况出现这种问题,一般是setOption 中没有配置notMerge 导致新的配置与旧配置合并。

但是我这里始终配置notMerge: true,但仍然出现这种问题。

最后发现与鼠标悬浮有关。

环境

echarts@5.3.2

现象

触发步骤:

  1. 数据量较多时,能稳定复现。
  2. 鼠标悬浮到图表中,使折线图高亮。
  3. 此时通过echarts.setOption 重新绘制图表内容。且配置setOption 参数 notMerge: true。

初始化图表

悬浮的状态(导致折线图高亮),用同一个echarts实例setOption切换

切换后

可以看到原来的图形没有去除。

尝试

  • 切换前使用echartsInstance的clear方法。无果。
  • clear之后,setTimeout 延迟setOption。 无果。

解决

取消 LineSeries的悬浮高亮效果。

方案1

切换前取消图表中的高亮效果。

echarts官方提供了这个接口。Documentation - Apache ECharts

echartsInstance.value?.dispatchAction({type: 'downplay'})

但是光这样还不行。因为取消后,立马动一下鼠标,则高亮效果又会上去。特别在异步的情况下。

因此还需要禁止鼠标事件,使其不能被hover。

这里通过css point-evnets: none 来实现。

也就是在切换前使其无法触发鼠标事件。切换后再回来即可。

方案2

配置series 使其不可被悬浮高亮。

lineseries.emphasis.disabled = true;

END

echarts怎么近期不维护了。

后面得转 G2 了 G2 可视化引擎 | AntV (gitee.io)

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据采集与预处理】流数据采集工具Flume

一、Flume简介 数据流 :数据流通常被视为一个随时间延续而无限增长的动态数据集合,是一组顺序、大量、快速、连续到达的数据序列。通过对流数据处理,可以进行卫星云图监测、股市走向分析、网络攻击判断、传感器实时信号分析。 (…

MYSQL多种提权方式

🐙MYSQL-提权条件 - 数据库的最高权限用户的密码 - secure-file-priv没进行目录限制 - 拿下了网站的权限(通过webshell或者其他方式) - 获取到了数据库的账号密码 (获取密码:D:/phpstudy/MySQL/data/mysql/user.MYD…

GNSS位移监测站对尾矿库坝体表面位移进行自动化监测

表面位移监测:通过GNSS位移监测站对尾矿库坝体表面位移进行自动化监测,掌握尾矿坝整体表面位置的变化及其变化速率(包括平面位移和垂直沉降),确定尾矿坝坝体整体位移变形的情况,是确定尾矿库安全性的重要指…

代码随想录刷题第三十八天| 理论基础 ● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯

代码随想录刷题第三十八天 动态规划基础理论 斐波那契数 (LC 509) 题目思路&#xff1a; 代码实现&#xff1a; class Solution:def fib(self, n: int) -> int:if n<1: return ndp [0 for _ in range(n1)]dp[1] 1for i in range(2, n1):dp[i] dp[i-1]dp[i-2] …

Java学习苦旅(十八)——详解Java中的二叉树

本篇博客将详细讲解二叉树 文章目录 树型结构简介基本概念表示形式 二叉树概念两种特殊的二叉树二叉树的性质二叉树的存储二叉树的简单创建二叉树的遍历前中后序遍历层序遍历 结尾 树型结构 简介 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09…

使用CentOS 7.6搭建HTTP隧道代理服务器

在现代网络环境中&#xff0c;HTTP隧道代理服务器因其灵活性和安全性而受到广泛关注。CentOS 7.6&#xff0c;作为一个稳定且功能强大的Linux发行版&#xff0c;为搭建此类服务器提供了坚实的基础。 首先&#xff0c;我们需要明确HTTP隧道代理的基本原理。HTTP隧道代理允许客户…

【软件工程】航行敏捷之路:深度解析Scrum框架的精髓

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; 软件工程 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 Scrum&#xff08;敏捷开发框架之一&#xff09; 详细介绍和解释&#xff1a; 优缺点&#xff1a; 优点&#xff1a; 缺点&…

【算法】链表-20240105

这里写目录标题 一、LCR 023. 相交链表二、142. 环形链表 II 一、LCR 023. 相交链表 给定两个单链表的头节点 headA 和 headB &#xff0c;请找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 提示&#xff1a; listA 中节点数目为 m list…

unity中0GC优化方案《zstring》

文章目录 序言简介GC带来的问题性能瓶颈玩家体验受损 使用方式 序言 游戏开发秉承遇到好东西要分享&#xff0c;下面介绍zstring&#xff0c;感谢作者开源无私奉献 源码地址&#xff1a;https://github.com/871041532/zstring 简介 GC带来的问题 性能瓶颈 GC暂停主线程执行…

Syntax Error: Error: Cannot find module ‘imagemin-optipng‘

一、背景&#xff1a; 心酸&#xff0c;很难受&#xff1b;本人主要做后端开发&#xff0c;这几天要打包前端项目 遇到了这个报错 Syntax Error: Error: Cannot find module imagemin-optipng 搞了3天时间才打包成功&#xff0c;使用了各种姿势才搞定。期间百度了各种方案都…

C语言编译器(C语言编程软件)完全攻略(第二十九部分:Linux GCC简明教程(使用GCC编写C语言程序))

介绍常用C语言编译器的安装、配置和使用。 二十九、Linux GCC简明教程&#xff08;使用GCC编写C语言程序&#xff09; 市面上常见的 Linux 都是发行版本&#xff0c;典型的 Linux 发行版包含了 Linux 内核、桌面环境&#xff08;例如 GNOME、KDE、Unity 等&#xff09;和各种…

小H靶场笔记:DC-5

DC-5 January 5, 2024 10:44 AM Tags&#xff1a;screen提权 Owner&#xff1a;只惠摸鱼 信息收集 探测靶机ip&#xff0c;大概率为192.168.199.135&#xff0c;且开放端口为80和111 扫描端口80&#xff0c;111相关服务、版本、操作系统、漏洞信息 sudo nmap -sS -O -sV 19…