当前位置: 首页 > news >正文

Echarts实现图表自适应屏幕分辨率

一:简介

之前做项目的时候要实现echarts图表随浏览器窗口大小变化而改变,echarts本身提供了一个resize()方法,然后我们需要用一个函数实现浏览器窗口监听,最初我选用的是window.onresize方法,当页面只有一个图表时可以实现,但当页面多个图表时window.onresize会被覆盖从而导致失效,最后我选用了window.addEventListener()方法解决了这个问题

二:window.onresize存在的问题

这是因为onresize本身就是一个回调,当发生改变时,前一个方法就会被覆盖

三:window.addEventListener()的运用

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window,也可以是任何支持事件的对象(比如 XMLHttpRequest)

语法:

addEventListener(event, function, useCapture)

  • 参数event必填,表示监听的事件,例如 click, resize等,不加前缀on的事件。
  • 参数 function必填,表示事件触发后调用的函数,可以是外部定义函数,也可以是匿名函数。不带参数。
  • 参数 useCapture选填,填true或者false,用于描述事件是冒泡还是捕获触发,true表示捕获,默认false表示冒泡。
     

代码实现:

window.addEventListener('resize', this.screenAdapter)screenAdapter(){this.chartInstance.resize()
}

其中,screenAdapter即为resize事件触发后调用的函数。同时不要忘记使用window.removeEventListener来移除监听

相关文章:

Echarts实现图表自适应屏幕分辨率

一:简介 之前做项目的时候要实现echarts图表随浏览器窗口大小变化而改变,echarts本身提供了一个resize()方法,然后我们需要用一个函数实现浏览器窗口监听,最初我选用的是window.onresize方法,当页面只有一个图表时可以…...

【2023年第十一届泰迪杯数据挖掘挑战赛】B题:产品订单的数据分析与需求预测 建模及python代码详解 问题一

相关链接 【2023年第十一届泰迪杯数据挖掘挑战赛】B题:产品订单的数据分析与需求预测 建模及python代码详解 问题一 【2023年第十一届泰迪杯数据挖掘挑战赛】B题:产品订单的数据分析与需求预测 建模及python代码详解 问题二 1 题目 一.问题…...

【蓝桥杯嵌入式】第十三届蓝桥杯嵌入式国赛客观题以及详细题解

题1 概念题。 USRAT:异步串口通信,常用于数据传输;SW-DP:SWD 的全称应该是 The Serial Wire Debug Port (SW-DP),也就是串行调试端口,是 >ARM 目前支持的两种调试端口之一;JTAG-DP:另一个调试…...

java中Map遍历的4种方式

目录 1、map.entrySet()方式 2、map.keySet()方式 3、map.values()方式 4、forEach方式 本文以如下map案例&#xff1a; Map<String, String> map new HashMap<>(); map.put("student1", "张三"); map.put("student2", "…...

GCC 编译器的主要组件和编译过程

主要组件&#xff1a; 分析器&#xff1a;分析器将源语言程序代码转换为汇编语言。因为要从一种格式转换为另一种格式&#xff08;C到汇编&#xff09;&#xff0c;所以分析器需要知道目标机器的汇编语言。 汇编器&#xff1a;汇编器将汇编语言代码转换为CPU可以执行字节码。 …...

蓝桥杯冲刺 - week2

文章目录&#x1f4ac;前言&#x1f332;day1最大和 (DP质因数分解)901. 滑雪 - 记忆化搜索&#x1f332;day21227. 分巧克力 - 二分&#x1f332;day31221. 四平方和 - 空间换时间1230. K倍区间&#x1f332;day41076. 迷宫问题 - 路径2017-迷宫-填空&#x1f332;day5848. 有…...

第十四届蓝桥杯三月真题刷题训练——第 20 天

目录 第 1 题&#xff1a;纸张尺寸 问题描述 输入格式 输出格式 样例输入1 样例输出1 样例输入 2 样例输出 2 运行限制 代码&#xff1a; 解析&#xff1a; 第 2 题&#xff1a;最大数字 第 3 题&#xff1a;全排列的价值_递推公式 问题描述 输入格式 输出格式…...

【C++】科普:C++中的浮点数怎么在计算机中表示?

这里我们以8.25这个数为例说明计算机时如何存取float类型的数据的&#xff1a; float a 8.25;引言 1. 所占位数 首先&#xff0c;明确一个概念&#xff0c;float类型的数据在常规计算机中通常占4个字节&#xff0c;也就是32位。其内存分布如图&#xff1a; 位字段说明所占位…...

Linux 多线程:多线程和多进程的对比

目录一、多进程优缺点二、多线程优缺点三、使用多执行流的场景在多任务处理中&#xff0c;我们既可以使用多进程&#xff0c;也可以使用多线程。但多进程和多线程并不是随意选择的&#xff0c;因为它们应对的场景不同&#xff0c;优缺点也不同。 一、多进程优缺点 多进程就是在…...

IO流你了解多少

IO流你了解多少 &#x1f3e0;个人主页&#xff1a;shark-Gao &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是shark-Gao&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f389;目前状况&#xff1a;23届毕业生&#xff0c;目前在某公…...

【C++】C++ 11 新特性之auto关键字

文章目录类型别名的思考auto简介auto关键字的特性类型别名的思考 随着程序越来越复杂&#xff0c;程序中用到的类型也越来越复杂&#xff0c;经常体现在&#xff1a; 类型难于拼写含义不明确导致容易出错 #include <string> #include <map> int main() {std::ma…...

nodejs的后端框架egg,thinkjs,nestjs,nuxtjs,nextjs对比

1. Egg.js&#xff1a;优点&#xff1a;Egg.js是一个基于Koa的Node.js企业级应用开发框架&#xff0c;它提供了完整的开发规范和一套稳定性和安全性较高的架构体系&#xff0c;能够帮助开发者快速构建高可用、高性能的应用程序。同时&#xff0c;Egg.js还提供了很多自定义插件和…...

SpringBoot @SpringBootTest 无法启动服务

这几天在看Hikari、Druid连接池。按照网上代码写Junit测试类。当时代码如下: package com.ceaning.crudp.utils;import org.junit.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; impo…...

PyTorch深度学习实战 | 神经网络的优化难题

即使我们可以利用反向传播来进行优化&#xff0c;但是训练过程中仍然会出现一系列的问题&#xff0c;比如鞍点、病态条件、梯度消失和梯度爆炸&#xff0c;对此我们首先提出了小批量随机梯度下降&#xff0c;并且基于批量随机梯度下降的不稳定的特点&#xff0c;继续对其做出方…...

如何缩小pdf文件的大小便于上传?在线压缩pdf工具推荐

​平时在工作、学习时我们经常都需要用到pdf文件&#xff0c;那么当遇上需要将pdf压缩大小的时候&#xff0c;该使用哪种pdf压缩&#xff08;https://www.yasuotu.com/pdfyasuo&#xff09;方式呢&#xff1f;今天分享一个在线压缩pdf的方法&#xff0c;需要的小伙伴一起来了解…...

使用C++编写一个AVL的增删改查代码并附上代码解释

//qq460219753提供其他代码帮助 #include <iostream> using namespace std;struct Node {int data;Node *left;Node *right;int height; };// 获取结点高度 int height(Node *node) {if (node nullptr){return 0;}return node->height; }// 获取两个数中较大的一个 i…...

React/ReactNative 状态管理: redux-toolkit 如何使用

有同学反馈开发 ReactNative 应用时状态管理不是很明白&#xff0c;接下来几篇文章我们来对比下 React 及 ReactNative 状态管理常用的几种框架的使用和优缺点。 上一篇文章介绍了 redux 的使用&#xff0c;这篇文章我们来看下 redux 的升级版&#xff1a;redux-toolkit。 下…...

14基于双层优化的电动汽车优化调度研究

说明书 MATLAB代码&#xff1a;基于双层优化的电动汽车优化调度研究 关键词&#xff1a;双层优化 选址定容 输配协同 时空优化 参考文档&#xff1a;《考虑大规模电动汽车接入电网的双层优化调度策略_胡文平》中文版 《A bi-layer optimization based temporal and sp…...

古茗科技面试:为什么 ElasticSearch 更适合复杂条件搜索?

文章目录 ElasticSearch 简介倒排索引联合索引查询跳表合并策略Bitset 合并策略MySQL 最多使用一个条件涉及的索引来过滤,然后剩余的条件只能在遍历行过程中进行内存过滤。 上述这种处理复杂条件查询的方式因为只能通过一个索引进行过滤,所以需要进行大量的 I/O 操作来读取行…...

【数据结构】哈希表

目录 1、哈希表 1.1 哈希表的简介 1.2 降低哈希冲突率 1.3 解决哈希冲突 1.3.1 闭散列 1.3.2 开散列&#xff08;哈希桶&#xff09; 1、哈希表 1.1 哈希表的简介 假设我们目前有一组数据&#xff0c;我们要从这组数据中找到指定的 key 值&#xff0c;那么咱们目…...

springboot+vue基于web的演唱会音乐会购票管理系统设计系统

目录同行可拿货,招校园代理 ,本人源头供货商系统功能模块分析技术架构设计核心业务流程安全防护措施项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商 系统功能模块分析 用户模块 注册登…...

5分钟搞定AutoHotkey脚本转EXE:Ahk2Exe终极编译指南

5分钟搞定AutoHotkey脚本转EXE&#xff1a;Ahk2Exe终极编译指南 【免费下载链接】Ahk2Exe Official AutoHotkey script compiler - written itself in AutoHotkey 项目地址: https://gitcode.com/gh_mirrors/ah/Ahk2Exe 想要将AutoHotkey脚本快速转换为独立的可执行文件…...

解锁JSON Viewer 3大效率黑科技:从数据解析到开发提效的全流程解决方案

解锁JSON Viewer 3大效率黑科技&#xff1a;从数据解析到开发提效的全流程解决方案 【免费下载链接】json-viewer It is a Chrome extension for printing JSON and JSONP. 项目地址: https://gitcode.com/gh_mirrors/js/json-viewer JSON Viewer是一款专为开发者打造的…...

别再踩坑了!Jetson Nano/Xavier NX上PyTorch和torchvision版本匹配保姆级指南(含JetPack 5/6)

Jetson设备PyTorch环境配置终极避坑手册&#xff1a;从版本匹配到性能调优 刚拿到Jetson Nano或Xavier NX的开发者们&#xff0c;十个里有九个会在PyTorch环境配置上栽跟头。不是torchvision报错就是CUDA不可用&#xff0c;最崩溃的是好不容易装好了却发现性能还不如树莓派。本…...

小麦联合收割机的设计【说明书+SW三维+CAD图纸】

小麦联合收割机作为现代农业机械化的核心装备&#xff0c;其设计需兼顾效率、可靠性与适应性。该设备通过集成收割、脱粒、清选及集粮功能&#xff0c;实现小麦收获环节的连续作业&#xff0c;显著缩短田间作业周期&#xff0c;降低人工劳动强度。其核心作用体现在三方面&#…...

PCIe金手指设计避坑指南:从硬件选型到PCB布局的5个关键细节

PCIe金手指设计避坑指南&#xff1a;从硬件选型到PCB布局的5个关键细节 在高速数字系统设计中&#xff0c;PCIe金手指接口的可靠性直接决定了扩展卡的识别成功率和数据传输稳定性。许多工程师在完成原理图设计和PCB布局后&#xff0c;常会遇到设备频繁识别失败、链路训练不通过…...

京东开放平台应用申请实战:从零到一,避开那些“看不见”的坑

1. 为什么你需要这份京东开放平台避坑指南&#xff1f; 第一次申请京东开放平台应用时&#xff0c;我踩遍了所有能踩的坑。记得当时为了赶项目进度&#xff0c;直接跳过了官方文档的"不重要章节"&#xff0c;结果在云鼎环境配置环节卡了整整三天。后来才发现&#xf…...

Qwen3-8B快速体验报告:部署简单,中文理解能力确实强

Qwen3-8B快速体验报告&#xff1a;部署简单&#xff0c;中文理解能力确实强 1. 开箱即用的AI体验 最近在测试各种开源大模型时&#xff0c;我发现了Qwen3-8B这个宝藏模型。作为Qwen系列的最新成员&#xff0c;这个80亿参数的模型在中文理解和推理能力上表现突出&#xff0c;最…...

为什么92%的FastAPI流式AI项目在高并发下崩溃?深度解析event loop争用、response.body迭代器生命周期与uvicorn worker模型冲突

第一章&#xff1a;FastAPI 2.0流式AI响应的高并发失效现象全景透视当FastAPI 2.0被用于承载大语言模型&#xff08;LLM&#xff09;的SSE&#xff08;Server-Sent Events&#xff09;或分块Transfer-Encoding: chunked流式响应时&#xff0c;大量并发请求下常出现连接提前终止…...

Heygem数字人系统效果展示:看一段音频如何驱动多个数字人视频

Heygem数字人系统效果展示&#xff1a;看一段音频如何驱动多个数字人视频 1. 系统核心能力概览 Heygem数字人视频生成系统批量版webui版是一款基于AI技术的创新工具&#xff0c;能够将单一音频源同步驱动多个数字人视频生成。系统采用先进的语音驱动口型同步技术&#xff0c;…...