怎么在echarts图上左右滑动切换数据区间

说在前面

不管前端还是后端,大家或多或少都了解使用过echarts图表吧,很多时候我们只是需要展示指定区间的数据,但有时我们希望在图表上能够轻松地切换数据的展示区间,以便更清晰地观察特定时间段或区域的变化。在本文中,我将向大家介绍如何实现在 ECharts 图表上左右滑动切换数据区间的功能,让数据展示交互变得更加灵活。

效果展示

echarts滑动.gif

体验地址

http://jyeontu.xyz/JDemo/#/echartScroll

代码实现

1、了解一下echarts.getZr()

在 ECharts 中,getZr() 是一个常用的方法,它可以获取到 ECharts 实例中的 ZRender 实例。

首先,需要说明的是,ECharts 中的图表实现都依赖于一个开源的 2D 渲染引擎 ZRender,而 getZr() 方法就是用于获取该渲染引擎实例。

在 ECharts 中,我们可以通过以下方式来获取 ECharts 实例:

var myChart = echarts.init(dom);

在这个实例对象中,就包含了我们所需要的 getZr() 方法。

接下来,我们可以通过 myChart.getZr() 来获取到 ZRender 实例,并利用其提供的 API 进行一些自定义的操作,例如:

var zr = myChart.getZr();
var storage = zr.storage;
var group = new zrender.Group();
storage.add(group);var rect = new zrender.Rect({shape: {x: 10,y: 10,width: 100,height: 100},style: {fill: '#f00'}
});group.add(rect);zr.refresh();

在上面的代码中,我们首先通过 getZr() 方法获取到 ZRender 实例,并创建了一个新的 Group 对象,并向其中添加了一个矩形 Rect 对象。最后我们调用了 refresh() 方法来刷新渲染界面,使我们新创建的矩形能够显示在图表上。

总之,getZr() 方法为我们提供了更多自定义 ECharts 图表的可能性,例如添加自定义的图形、动画等效果

2、echarts.getZr().on(eventType, handler)

getZr().on(eventType, handler) 是在 ECharts 中用于监听 ZRender 实例上指定事件类型的方法。它允许我们在特定的事件发生时执行相应的处理函数。

具体使用方法如下:

  1. 通过 getZr() 方法获取到 ZRender 实例,例如 const zr = myChart.getZr();
  2. 使用 on() 方法来监听指定的事件类型和相应的处理函数,例如 zr.on('click', handleClick);。其中,eventType 为事件类型,可以是鼠标事件(如 clickmousemove 等),也可以是自定义事件;handler 则是事件触发时要执行的处理函数。
  3. 在处理函数中编写相应的逻辑,例如:
function handleClick(params) {// 处理鼠标点击事件console.log('Clicked at x: ' + params.event.clientX + ', y: ' + params.event.clientY);
}

在上述代码中,当用户在图表上点击时,handleClick 函数会被调用,并且参数 params 中包含了事件的相关信息,例如鼠标坐标等。

通过 getZr().on() 方法,我们可以实现对图表的交互操作进行监听和响应,从而实现更加丰富和灵活的数据可视化效果。

3、echarts鼠标事件监听

通过前面的介绍,我们知道可以通过echarts.getZr().on(eventType, handler)来对图表的交互操作进行监听和响应:

(1)监听touchstart事件或mousedown事件,记录起始位置

监听touchstart事件或mousedown事件,记录起始位置,并将当前状态置为滑动状态。

myEcharts.getZr().on("mousedown", e => {this.lastX = e.offsetX || e.event.zrX;this.isTouch = true;
});
myEcharts.getZr().on("touchstart", e => {this.lastX = e.offsetX || e.event.zrX;this.isTouch = true;
});
(2)监听touchmove事件或mousemove事件,计算滑动距离并触发相应操作

这里我们需要注意的是,mousemovetouchmove都是连续触发的事件,所以我们需要对其加一个防抖处理,防止连续触发多次。

debounce(func, delay = 100) {let timer;return function(...args) {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);};
},
mousemove(e) {if (this.isTouch) {const currentX = e.offsetX || e.event.zrX;const distance = currentX - this.lastX;if (distance > this.distance) {this.$emit("moveRight");} else if (distance < -this.distance) {this.$emit("moveLeft");}this.lastX = currentX;}
},
myEcharts.getZr().on("mousemove", this.debounce(this.mousemove));
myEcharts.getZr().on("touchmove", this.debounce(this.mousemove));
(3)监听touchend事件或mouseup事件,重置状态

鼠标抬起的时候重置状态,防止鼠标没有点击的时候触发滑动事件。

myEcharts.getZr().on("mouseup", () => {this.isTouch = false;
});
myEcharts.getZr().on("touchend", () => {this.isTouch = false;
});

4、echarts数据生成

这里我们可以随机生成两个月的数据来进行展示:

initChartData(startDate, endDate) {startDate = new Date(startDate);endDate = new Date(endDate);const dateArray = [];for (let date = new Date(startDate);date <= endDate;date.setDate(date.getDate() + 1)) {const randomValue = Math.floor(Math.random() * (1000 - 500 + 1)) + 500;const randomValue1 = Math.floor(Math.random() * (1000 - 200 + 1)) + 200;const dateString = date.toISOString().slice(0, 10);dateArray.push({date: dateString,value: randomValue,value1: randomValue1});date = new Date(date); // 修复日期对象被修改的问题}return dateArray;
},

image.png

5、echarts数据配置

我们可以通过数据起始下标和展示数据个数来确定当前图表中需要展示的数据区间,再从总数据中去进行截取。

initOption(start = 0) {if (start > this.chartData.length - this.len)start = this.chartData.length - this.len;if (start < 0) start = 0;if (this.startInd === start) return;this.startInd = start;const end = start + this.len;const chartData = this.chartData.slice(start, end);this.option = {tooltip: {trigger: "axis"},xAxis: {type: "category",data: chartData.map(item => item.date)},yAxis: {type: "value"},series: [{name: "数据1",data: chartData.map(item => item.value),type: "line",smooth: true},{name: "数据2",data: chartData.map(item => item.value1),type: "line",smooth: true}]};
},

6、左右滑动切换数据区间

想要切换展示的数据区间,我们只需要修改数据起始下标即可:

moveLeft() {if (this.startInd === 0) this.$toast.show("前面没有更多数据了");this.initOption(this.startInd - this.len);
},
moveRight() {if (this.startInd >= this.chartData.length - this.len)this.$toast.show("后面没有更多数据了");this.initOption(this.startInd + this.len);
}

源码地址

gitee

https://gitee.com/zheng_yongtao/jyeontu-vue-demo.git

公众号

关注公众号『前端也能这么有趣』发送 vueDemo即可获取源码。

说在后面

🎉 这里是 JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球 🏸 ,平时也喜欢写些东西,既为自己记录 📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解 🙇,写错的地方望指出,定会认真改进 😊,偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章,有兴趣的也可以关注下。在此谢谢大家的支持,我们下文再见 🙌。

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

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

相关文章

贪吃蛇游戏制作

首先在ecilsp里面创建两个包&#xff0c;启动和图形界面 在创建一个文件夹用来放图片 1.绘制图形界面 package com.snaketuxing.view;import java.awt.Color; import java.awt.EventQueue; import java.awt.Font; import java.awt.Frame; import java.awt.Graphics; import …

win10蓝屏重启故障修复经验分享

1. 安全模式&#xff1a;尝试进入安全模式&#xff0c;按住Shift键并同时点击“重新启动”选项。然后选择“故障排除”>“高级选项”>“启动设置”>“重新启动”。在启动设置页面&#xff0c;按下F4或按4键选择进入安全模式&#xff0c;观察是否仍然出现蓝屏重启问题。…

cmake+OpenCV4.8.0+contrib4.8.0+cuda 12.2编译踩坑

cmakeOpenCV4.8.0contrib4.8.0cuda 12.2编译踩坑 准备工具 cmake &#xff08;去官网下载&#xff09;OpenCV 我下载的是官网发布最新的稳定版本对应的源码&#xff0c;官网目前是4.8.0&#xff0c;github下一个&#xff08;连不上的可以网上找找资源或者科学上网&#xff09…

听GPT 讲Rust源代码--src/bootstrap

图片来自 使用rust的image库进行图片压缩[1] File: rust/src/bootstrap/build.rs 在Rust源代码中&#xff0c;rust/src/bootstrap/build.rs这个文件是一个构建脚本。构建脚本是一个在编译Rust编译器本身时运行的程序&#xff0c;它用于初始化和配置Rust编译器的构建过程。build…

基于SSM的焦作旅游协会管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

ES6有何新特性?(下篇)

目录 函数参数的默认值设置 rest参数 扩展运算符 Symbol 迭代器 生成器 Promise Class 数值扩展 对象方法扩展 模块化 大家好呀&#xff01;今天这篇文章继续为大家介绍ES6的新特性&#xff0c;上上上篇文章介绍了一部分&#xff0c;这篇文章会将剩下的部分新增的特…

虚拟化逻辑架构: 创建KVM中的VM与实现VNC远程登录

目录 一、实验 1.安装KVM环境管理工具并创建VM&#xff08;虚拟机&#xff09; 2.Windows使用VNC Viewer连接KVM中的VM&#xff08;虚拟机&#xff09; 二、问题 1.如何下载安装VNC Viewer 一、实验 1.安装KVM环境管理工具并创建VM&#xff08;虚拟机&#xff09; (1) 采…

德迅云安全和您聊聊关于DDOS高防ip的一些方面

德迅DDoS防护服务是以省骨干网的DDoS防护网络为基础&#xff0c;结合德迅自研的DDoS攻击检测和智能防护体系&#xff0c;向您提供可管理的DDoS防护服务&#xff0c;自动快速的缓解网络攻击对业务造成的延迟增加&#xff0c;访问受限&#xff0c;业务中断等影响&#xff0c;从而…

代码随想录算法训练营第二十九天| 491 递增子序列 46 全排列

目录 491 递增子序列 46 全排列 491 递增子序列 在dfs中进行判断&#xff0c;如果path的长度大于1&#xff0c;则将其添加到res中。 本题nums中的元素的值处于-100与100之间&#xff0c;可以将元素映射0到199之间并且通过布尔数组st来记录此层中元素是否被使用过&#xff0c;…

C练习题_14

一、单项选择题&#xff08;本大题共 20小题&#xff0c;每小题 2分&#xff0c;共 40分。在每小题给出的四个备选项中&#xff0c;选出一个正确的答案&#xff0c;并将所选项前的字母填写在答题纸的相应位置上。) 以下叙述不正确的是&#xff08;&#xff09; A.一个C源程序可…

高版本Vivado和Linux 4.x内核移植Digilent Driver

移植环境 Vivado 2022.2Ubuntu 22.04petalinux 2022.2Linux内核4.14&#xff08;xilinx-linux-2018.3&#xff09;linux-digilent 主要问题 https://github.com/Digilent/linux-digilent 这些驱动支持Linux kernel release 4.x&#xff0c;然而和Vitis 2022.2 套件对应的内核…

buildadmin+tp8表格操作(8) 表格下方添加 合计行

表格的下方可以自定义添加一个合计行&#xff0c;如果有其它的需求&#xff0c; 我们可以添加我们自已需要的行&#xff0c; 并不局限于合计行 以上就可以给表格的最下方添加一个合计行了 完整代码如下 <template><div class"default-main ba-table-box"&…

AVL树你需要了解一下

AVL树介绍 AVL树是一种自平衡二叉查找树&#xff0c;它得名于发明者G.M.Adel’son-Vel’skii和E.M.Landis。AVL树的特点是任何节点的两个子树的高度最大差别为1&#xff0c;因此它也被称为高度平衡树。在AVL树中&#xff0c;每个节点的平衡因子只有-1、0、1三种&#xff0c;通…

人工智能给我们的生活带来了巨大的影响?

1. 人工智能从哪些方面给我们带来了影响&#xff1f; 人工智能出现&#xff0c;极大地影响了人类的生活&#xff0c;下面是人工智能所影响的领域&#xff1a; 1. 日常生活 智能家居: AI驱动的设备&#xff0c;如智能扬声器、灯光、恒温器&#xff0c;正在改变我们与家居环境的…

【鸿蒙最新全套教程】<HarmonyOS第一课>1、运行Hello World

下载与安装DevEco Studio 在HarmonyOS应用开发学习之前&#xff0c;需要进行一些准备工作&#xff0c;首先需要完成开发工具DevEco Studio的下载与安装以及环境配置。 进入DevEco Studio下载官网&#xff0c;单击“立即下载”进入下载页面。 DevEco Studio提供了Windows版本和…

文件上传漏洞(CVE-2022-23043)

简介 CVE-2022-23043是一个与Zenario CMS 9.2文件上传漏洞相关的安全漏洞。该漏洞被定义为文件的不加限制上传&#xff0c;攻击者可以利用这个漏洞上传webshell以执行任意命令。利用这个漏洞的攻击者暂无特定情况。要利用此漏洞&#xff0c;攻击者首先需要访问Zenario CMS的管…

Django 路由配置(二)

一、路由 就是根据用户请求的URL链接来判断对应的出来程序&#xff0c;并返回处理结果&#xff0c;也是就是URL和django的视图建立映射关系. 二、Django请求页面的步骤 1、首先Django确定要使用的根URLconf模块&#xff0c;通过ROOT_URLCONF来设置&#xff0c;在settings.py配置…

服务器数据恢复—OCFS2下raid5磁盘损坏导致阵列崩溃的数据恢复案例

服务器数据恢复环境&#xff1a; IBM某型号存储&#xff0c;6块sas硬盘组建一组raid5&#xff0c;划分一个lun分配给Linux服务器并格式化为OCFS2文件系统&#xff0c;共享给虚拟化使用&#xff0c;存放的数据包括24台liunx和windows虚拟机、压缩包文件和配置文件。 服务器故障…

学习笔记6——垃圾回收

学习笔记系列开头惯例发布一些寻亲消息 链接&#xff1a;https://baobeihuijia.com/bbhj/contents/3/190801.html java垃圾回收&#xff08;stop the world&#xff09; 专注于堆和方法区的垃圾回收&#xff0c;年轻代&#xff0c;老年代&#xff0c;永久代判断对象是否还存…

Java8Stream快速使用

将List集合存入流中 List<String> list new ArrayList<>();list.add("张一");list.add("张二");list.add("张三");list.add("李四");list.add("赵五");list.add("张六");list.add("王八"…