怎么在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 为事件类型，可以是鼠标事件（如 click、mousemove 等），也可以是自定义事件；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事件，计算滑动距离并触发相应操作

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

浅析RSA非对称加密算法

浅析RSA非对称加密算法

目录 引言 凯撒密码 对称加密 非对称加密 ​编辑总结 引言 几月前在知乎上看到一个关于RSA公钥与私钥加解密的提问甚感兴趣&#xff0c;却一直没有时间去探究&#xff0c;今日浅得闲时以文记之。 在文章正式开始之前先讲一个小故事&#xff0c;在公元前58年时&#xff0c…
阅读更多...
表内容的操作（增删查改）【MySQL】

表内容的操作（增删查改）【MySQL】

文章目录 表的 CRUDCreate&#xff08;增加&#xff09;插入记录插入冲突则更新记录替换记录 Retrieve&#xff08;查找&#xff09;查找记录指定表达式的别名为结果去重WHERE 子句运算符条件查询区间查询模糊查询空值查询 对结果排序筛选分页结果 Update&#xff08;修改&…
阅读更多...
面试题c/c++ --STL 算法与数据结构

面试题c/c++ --STL 算法与数据结构

1.6 STL 模板 模板底层实现&#xff1a;编译器会对函数模板进行两次编译&#xff0c; 在声明的地方对模板代码本身进行编译&#xff0c; 在调用的地方对参数替换后的代码进行编译。 模板传参分析 模板重载 vector 是动态空间&#xff0c; 随着元素的加入&#xff0c; 它的内…
阅读更多...
内存学习（4）：内存分类与常用概念3（ROM）

内存学习（4）：内存分类与常用概念3（ROM）

1 ROM介绍 ROM即为只读存储器&#xff0c;全拼是Read Only Memory。 1.1 “只读”的由来 ROM叫只读存储器是因为最早的ROM&#xff08;MROM&#xff09;确实是只能读取不能写入&#xff0c;一旦出厂不能再写&#xff0c;需要在出厂之前预设好它的数据&#xff0c;并且它是掉…
阅读更多...
Apache Airflow (十一) ：HiveOperator及调度HQL

Apache Airflow (十一) ：HiveOperator及调度HQL

&#x1f3e1; 个人主页&#xff1a;IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 &#x1f6a9; 私聊博主&#xff1a;加入大数据技术讨论群聊&#xff0c;获取更多大数据资料。 &#x1f514; 博主个人B栈地址&#xff1a;豹哥教你大数据的个人空间-豹…
阅读更多...
cpu飙高问题，案例分析（一）

cpu飙高问题，案例分析（一）

一、复习知识点&#xff1a; CPU性能指标&#xff1a; load average&#xff1a;负载&#xff0c;linux查看的时候&#xff0c;通常显示如下&#xff1a; load average后面有三段数字&#xff1a;代表了系统1分钟&#xff0c;5分钟&#xff0c;15分钟平均负载。 形象的类别可…
阅读更多...
【每日刷题——语音信号篇】

【每日刷题——语音信号篇】

思考与练习 练习2.1 语音信号在产生的过程中&#xff0c;以及被感知的过程中&#xff0c;分别要经过人体的哪些器官&#xff1f; 1.产生过程&#xff1a; 肺部空气 → \rightarrow →冲击声带 → \rightarrow →通过声道&#xff08;可以调节&#xff09; → \rightarrow →…
阅读更多...
【ArcGIS Pro微课1000例】0033：ArcGIS Pro处理cad数据（格式转换、投影变换）

【ArcGIS Pro微课1000例】0033：ArcGIS Pro处理cad数据（格式转换、投影变换）

文章目录 一、cad dwg转shp1. 导出为shp2. cad至地理数据库3. data interoperability tools二、shp投影变换一、cad dwg转shp 1. 导出为shp 加载cad数据，显示如下： 选择需要导出的数据，如面状，右键→数据→导出要素： 导出要素参数如下，点击确定。 导出的要素不带空间参…
阅读更多...
el-table 对循环产生的空白列赋默认值

el-table 对循环产生的空白列赋默认值

1. el-table 空白列赋值 对el-table中未传数据存在空白的列赋默认值0。使用el-table 提供的插槽 slot-scope&#xff1a;{{ row || ‘0’ }} 原数据&#xff1a; <el-table-column label"集镇" :propcity ><template slot-scope"{row}">{{…
阅读更多...
Linux 命令补充

Linux 命令补充

目录 tr 命令 命令举例 cut 命令 命令举例 uniq 命令 命令举例 sort 命令 命令举例 面试题 1. 给你一个文件如何提取前 10 的 IP 2. 如何提前 ss 中的状态 tr 命令 作用tr转换tr -d删除tr -c取反tr -s压缩 命令举例 cut 命令 作用cut提取cut -f指定列cut -d指定分…
阅读更多...
MyBatis的xml实现

MyBatis的xml实现

1.下载插件MyBatisX 2.添加依赖 <!--Mybatis 依赖包--><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.3.1</version></dependency><!--…
阅读更多...
人工智能给我们的生活带来了巨大的影响？

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

1. 人工智能从哪些方面给我们带来了影响&#xff1f; 人工智能出现&#xff0c;极大地影响了人类的生活&#xff0c;下面是人工智能所影响的领域&#xff1a; 1. 日常生活 智能家居: AI驱动的设备&#xff0c;如智能扬声器、灯光、恒温器&#xff0c;正在改变我们与家居环境的…
阅读更多...
猫12分类：使用yolov5训练检测模型

猫12分类：使用yolov5训练检测模型

前言&#xff1a; 在使用yolov5之前&#xff0c;尝试过到百度飞桨平台&#xff08;小白不建议&#xff09;、AutoDL平台&#xff08;这个比较友好&#xff0c;经济实惠&#xff09;训练模型。但还是没有本地训练模型来的舒服。因此远程了一台学校电脑来搭建自己的检测模型。配置…
阅读更多...
.NET 8.0 AOT 教程 和使用 和 .NET ORM 操作

.NET 8.0 AOT 教程 和使用 和 .NET ORM 操作

NET AOT编译是一种.NET运行时的编译方式&#xff0c;它与传统的JIT编译方式不同。在传统的JIT编译中&#xff0c;.NET应用程序的代码在运行时才会被编译成本地机器码&#xff0c;而在AOT编译中&#xff0c;代码在运行之前就被提前编译成本地机器码。这样可以在代码运行的时候不…
阅读更多...
Docker搭建Redis集群

Docker搭建Redis集群

Docker搭建Redis集群 创建一个专属redis的网络 docker network create redis --subnet 172.38.0.0/16通过shell脚本创建并启动6个redis服务 #通过脚本一次创建6个redis配置 for port in $(seq 1 6); \ do \ mkdir -p /mydata/redis/node-${port}/conf touch /mydata/redis/n…
阅读更多...
CentOS7安装部署Kafka with KRaft

CentOS7安装部署Kafka with KRaft

文章目录 CentOS7安装部署Kafka with KRaft一、前言1.简介2.架构3.环境 二、正文1.部署服务器2.基础环境1&#xff09;主机名2&#xff09;Hosts文件3&#xff09;关闭防火墙4&#xff09;JDK 安装部署 3.单机部署1&#xff09;下载软件包2&#xff09;修改配置文件3&#xff0…
阅读更多...
VS2019编译安装GDAL（C++）程序库

VS2019编译安装GDAL（C++）程序库

一、GDAL简介 GDAL&#xff0c;全称Geospatial Data Abstraction Library&#xff0c;即地理空间数据抽象库&#xff0c;是一个在X/MIT许可协议下读写空间数据的开源库&#xff0c;可以通过命令行工具来进行数据的转换和处理。而在调用中我们常用的OGR&#xff08;OpenGIS Simp…
阅读更多...
文件上传漏洞（CVE-2022-23043）

文件上传漏洞（CVE-2022-23043）

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

gin相关操作--一起学习921190764

gin官方文档 https://gin-gonic.com/docs/quickstart/1. 安装 go get -u github.com/gin-gonic/ginhttps://github.com/gin-gonic/gin简单入门 package mainimport ("github.com/gin-gonic/gin""net/http" )func pong(c *gin.Context) {//c.JSON(http.S…
阅读更多...
Redis高级特性和应用(发布 订阅、Stream)

Redis高级特性和应用(发布 订阅、Stream)

目录 发布和订阅 操作命令 发布消息 订阅消息 查询订阅情况 查看活跃的频道 查看频道订阅数 使用场景和缺点 Redis Stream Stream总述 常用操作命令 生产端 消费端 单消费者 消费组 创建消费组 消息消费 在Redis中实现消息队列 基于pub/sub 基于Stream Re…
阅读更多...
最新文章

Copyright @ 2022~2023