echartjs 实现 cross (十星辅助线)跟随吸附高亮点

news2024/12/26 0:25:01

前言

项目是金融项目,就像支付宝基金的走势图一样。但图表库使用的是 echart 而不是 antv 的 f2,要问为什么不直接用 f2 ?问就是因为项目历史包袱。

背景

了解过 echart 的都知道,官方提供了十星辅助线,只要设置 axisPointer 的 type 为cross 即可实现类似股票走势图的十星线,纵轴吸附最近的点,横轴跟随鼠标或手势的触点位置,如下图

功能没问题,但是若作为基金产品,老板要求要对标支付宝,要达到如下图的效果

但既然对标阿里,为什么不用 antv ?我也问过。但从风险和成本的角度看,反正最终是老板不让。

既然不能切 antv,上面的 cross 又不能满足老板的要求,那么就要老老实实研究 echart 怎么实现了。

方案的过程就不详细说了,反正最后灵光一现,考虑到可以用 type 为 line 的 axisPointer 和 markline 来达到了老板的需求。

具体实现

1、开启 tooltip,并将 tooltip 的 trigger 设置为 axis。

2、xAxis 中设置 axisPointer,这里设置 snap 为 true,保证纵向辅助线吸附。

3、series 中设置 markline,默认的 markline 会自带起点和箭头,为了做十星,这里需要将起点和箭头通过将 symbol 设置为 none 来取消,默认 markline 的显示会有动画,而十星没有,所以还要将 animation 设置为 false 来禁止 markline 的缓动展示动画

4、完成以上步骤将会得到一个跟随手势的纵线和固定位置的横线(markline),若要达到完美的十星,这里需要配置一个能跟随手势的横线,那么这里需要通过获取纵线吸附后的点来重设 markline 的位置,我这里在 tooltip 的 formatter 中进行处理,因为这里能拿到我要的点(目前没找到其他好的办法,有知道的也可以提供下想法)

5、这样看起来就基本完成了,但是考虑到移动端,手势离开图表坐标系时,axisPointer 会自动消失,但是按照我们的实现,markline 不会跟随消失,这时候我们就需要通过监听点击的位置来再次控制 markline 的展示了

大致的配置如下

// 5 这里设置异步是因为 demo 的代码是部分代码,执行的时候可能myChart 还没渲染完成,真实处理的时候若 chart 已经渲染完成的话无需异步处理
setTimeout(()=>{var _componentsViews = myChart._componentsViews;varview = _componentsViews.find(item => item.type === 'grid') || {};debuggervarrect = view.__model.coordinateSystem._rect;varrectObj = {x: rect.x,x1: rect.x + rect.width,y: rect.y,y1: rect.y + rect.height};// 设置监听myChart._zr.on('mouseup', (e) => {var { offsetX, offsetY } = e;// // 点击图表之外时markline消失if (offsetX < rectObj.x || offsetX > rectObj.x1 || offsetY < rectObj.y || offsetY > rectObj.y1) {chart.setOption({series: [{markLine: {data: [],label: {show: false}}}]});}});
}, 1000)
...
option = {tooltip: {// 1trigger: "axis",// 4formatter(arg) {// 这里需要异步处理以下,否则无法设置成功setTimeout(function() {myChart.setOption({series: [{markLine: {data: [{yAxis: arg[0].value[1],label: {show: true}}]}}]})}, 0);}...},xAxis: {// 2axisPointer: {snap: true,label: {show: true,backgroundColor: "#0000ff",color: '#fff',...},lineStyle: {color: '#0000ff'},...}, }, yAxis: { ... }, series: [{name: '模拟数据2',type: 'line',...// 3markLine: {symbol: 'none',silent: true,data: [{yAxis: 0,label: {show:false}}],label: {show: true,position: 'start',backgroundColor: '#0000ff',color: '#ffffff',padding: 2},lineStyle: {color: '#0000ff'},animation: false},}]
} 

以上,类支付宝的走势图十星就完成了,年度 kpi 达成 (•̀ᴗ• )?

最后

整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。

有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享

部分文档展示:



文章篇幅有限,后面的内容就不一一展示了

有需要的小伙伴,可以点下方卡片免费领取

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

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

相关文章

服务端渲染和客户端渲染

介绍 服务端渲染 servlet开发 浏览器请求servlet&#xff0c;servlet在服务端生成html 响应给浏览器&#xff0c;浏览器展示html的内容&#xff0c;这个过程就是服务端渲染。 输入url——>请求到tomcat——Servlet / jsp来解析解析用户请求并处理——>服务端渲染生成ht…

收藏网页版小游戏:蜘蛛纸牌、扫雷、水果忍者、打地鼠、吃豆人

学习之余当然是摸鱼了&#xff0c;这里分享几个不用下载直接在线玩耍的游戏。有蜘蛛纸牌网页版在线玩、在线扫雷小游戏、在线玩的水果忍者、吃豆人、打地鼠、3D模仿。 下面我将一个个列出来。欢迎体验收藏&#xff01; 蜘蛛纸牌&#xff1a;这是一款刺激好玩的棋牌小游戏。大家…

【C语言航路】第九站:数据的存储

目录 一、数据类型介绍 1.基本的内置数据类型 2.类型的基本归类 二、整型在内存中的存储 1.原码反码补码 2.大端字节序与小端字节序 3.一些经典的题目 三、浮点型在内存中的存储 总结 一、数据类型介绍 1.基本的内置数据类型 这部分我们在一开始的时候已经说过了&…

中职组网络安全2022年安徽省赛信息隐藏与探索

首先这一套题目我们先看一下环境: 以上来给到了一个主页的网站,做这样的题目我们第一个想到的就是源代码,于是我们查找源代码看看里边有什么东西: 在contact.php中发现了flag1,但是这一看就是一个base64代码,我们将其进行解密:

华脉智联可视化指挥调度系统

华脉智联可视化指挥调度系统&#xff0c;多端一体化综合智能指挥调度平台&#xff0c;可以实现对各级人员、设备、系统统一指挥&#xff0c;应急调度&#xff0c;为行业应用提供可视化智能指挥调度系统解决方案。 1、可视化指挥调度系统介绍 可视化指挥调度系统基于现有的4G通信…

处理WM_KILLFOCUS消息时需要注意的地方

之前我在一篇文章中曾经提过&#xff0c;不应该利用 WM_KILLFOCUS 消息中对表单的字段进行有效性校验。 今天的文章&#xff0c;我将介绍另外一个反面例子&#xff0c;来表现当使用 WM_KILLFOCUS 消息处理焦点相关的问题时所带来的混乱。 假设&#xff0c;有一个编辑框控件使用…

编写 MBR 主引导记录

文章目录前言mbs.S代码实验操作前言 本博客记录《操作系统真象还原》第二章最后一节的实验操作~ 实验需要安装Bochs软件&#xff0c;具体可食用Bochs下载安装博客。 实验环境&#xff1a;ubuntu18.04VMware 实验内容&#xff1a;在屏幕上打印字符串“1 MBR”&#xff0c;背…

C进阶_C语言_指针进阶_C语言指针进阶

除了自己的无知&#xff0c;我什么都不懂。 ——苏格拉底 *此博客为进阶指针详解&#xff0c;需要有一定的初阶指针基础。 我们知道&#xff0c;指针就是个变量&#xff0c;用来存放地址&#xff0c;地址唯一标识一块内存空间。 指针的大小是固定的4/8个字节。在32位平台上是…

003-Ensp-实验-配置DHCP

实验要求 1. 根据网络结构开DHCP服务&#xff0c;使PC1 / PC2 自动获取IP地址并可以互Ping 网络结构 实验步骤 1. 配置AR2路由器g0/0/0接口IP&#xff0c;开启DHCP <Huawei>system-view [Huawei]dhcp enable [Huawei]interface g0/0/0 [Huawei-GigabitEthernet0/0/0]…

公司变更名称很麻烦吗?来来来,心周小编教你小技巧

我们都知道&#xff0c;公司如果拥有一个好的名字&#xff0c;对公司的推广会带来很大的便利&#xff0c;让客户更容易记住公司&#xff0c;记住公司的产品及相关性能&#xff0c;比如奥迪汽车公司&#xff0c;大家能一下子想到奥迪车&#xff0c;想到奥迪车的设计&#xff0c;…

UG/NX二开Siemens官方实例解析 4.3 EX_Curve_CreateSpline(创建样条曲线)

前言本系列文章主要讲解NXOpen UF API&#xff08;简称ufun函数&#xff09;的使用&#xff0c;之前看教学视频大都建议用ufun进行开发&#xff0c;这里西门子官方还专门给了一套系列文章来讲&#xff0c;说明官方也是特别推崇ufun。本人从事二开也有一段时间了&#xff0c;我的…

EasyCRM V5客户关系管理系统源码,全功能全插件带手机版无加密开源版,集成OA系统

这个是Easycrm v5最新版本&#xff0c;程序代码全部大量重写&#xff0c;运行效率提升100倍。轻松负载500w以上数据量。 代码全部明文开源&#xff0c;便于二次开发和部署。 网上其他地方的版本都是很遗憾的告诉你&#xff0c;没有手机版&#xff0c;没有财务管理等功能插件。…

【Unity3D编辑器扩展】Unity3D中实现UI界面控制,UI界面的显示和隐藏实现

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客QQ群&#xff1a;1040082875 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 在开发中&#xff0c;可能遇到管理…

EMP v2.5三级共享深度定制对ESM 的支持

版本背景 1 Module Federation 共享逻辑CDN复用性不高2 ESM兼容性日益成熟&#xff0c;性能表现越来越好3 市面上针对 ESM 的模块共享实现不完善4 开发、正式环境结合共享的开发体验不佳 ESM 概念 ESM - ES modules 是 JavaScript 官方的标准化模块系统。相比于 CommonJS 和 …

mysql知识点总结(网安必备)

目录 数据库介绍 数据库基本概念 数据库类型 MySql数据库管理系统 SQL语言 概述 常见操作 表的完整性约束 非外键约束 外键约束 单表查询 函数 多表查询 事务 事务隔离级别 视图 数据库介绍 数据库基本概念 数据&#xff1a;所谓数据&#xff08;Data&#xf…

什么是融合通信?

近年来融合通信概念被广泛提起&#xff0c;那么&#xff0c;什么是融合通信&#xff1f;融合通信可以融合哪些设备或者系统呢&#xff1f; 近代通信技术得益于电话网的出现&#xff0c;人们通过电话实现了跨越式的通信。随着计算机和互联网的出现&#xff0c;人们可以利用互联网…

谷粒学院——十三章、登录与注册

用户登陆业务介绍 单一服务器模式 早期单一服务器&#xff0c;用户认证。 缺点&#xff1a;单点性能压力&#xff0c;无法扩展。 SSO 模式&#xff08;单点登陆&#xff09; 分布式&#xff0c;SSO(single sign on)模式&#xff0c;也叫单点登陆模式。 优点: 用户身份信…

【C++高阶数据结构】图

&#x1f3c6;个人主页&#xff1a;企鹅不叫的博客 ​ &#x1f308;专栏 C语言初阶和进阶C项目Leetcode刷题初阶数据结构与算法C初阶和进阶《深入理解计算机操作系统》《高质量C/C编程》Linux ⭐️ 博主码云gitee链接&#xff1a;代码仓库地址 ⚡若有帮助可以【关注点赞收藏】…

代码随想录拓展day7 649. Dota2 参议院;1221. 分割平衡字符串;5.最长回文子串;132. 分割回文串 II;673.最长递增子序列的个数

代码随想录拓展day7 649. Dota2 参议院&#xff1b;1221. 分割平衡字符串&#xff1b;5.最长回文子串&#xff1b;132. 分割回文串 II&#xff1b;673.最长递增子序列的个数 贪心和动态规划的题目。因为贪心其实没什么规律&#xff0c;所以就简要记录了。 649. Dota2 参议院 …

数据可视化系列-04数据大屏基础知识

文章目录5.销售数据看板5.1 了解数据大屏基础知识1.数据大屏简介&#xff1a;2.数据大屏使用场景3.数据大屏分类5.2 数据大屏的设计&#xff1a;1.大屏前端设计流程2.数据大屏设计尺寸解析3.可视化视觉设计5.3 大屏开发工具DataV&#xff1a;1.DataV数据可视化简介2.优势3.Data…