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

Echarts图表跟随父容器的变化自适应

如果页面中有多个图表 隐藏/展开左边侧边栏echarts图表自适应

	  <div class="line"><div class="title">制冷站关键参数</div><div id="chartLine1" style="width: 100%;height:85%;"></div></div><div class="line"><div class="title">空压站关键参数</div><div id="chartLine2" style="width: 100%;height:85%;"></div></div><div class="line"><div class="title">锅炉和热水房参数</div><div id="chartLine3" style="width: 100%;height:85%;"></div></div>
data() {myChart1: '',myChart2: '',myChart3: '',
},    
//核心代码   new ResizeObserver
mounted() {this.$nextTick(() => {this.chart1();this.chart2();this.chart3();const resizeOb = new ResizeObserver((entries) => {for (const entry of entries) {this.$echarts.getInstanceByDom(entry.target).resize();}});// 使用observe开启监听, onObserve可以取消监听resizeOb.observe(document.getElementById('chartLine1'));resizeOb.observe(document.getElementById('chartLine2'));resizeOb.observe(document.getElementById('chartLine3'));});},methods: {chart1() {// 基于准备好的dom,初始化echarts实例this.myChart1 = this.$echarts.init(document.getElementById('chartLine1'));// 指定图表的配置项和数据const option = {tooltip: {trigger: 'axis'},grid: {top: '5%',left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: ['04:00', '08:00', '12:00', '16:00', '20:00', '24:00']},yAxis: {type: 'value'},series: [{name: '实时cop',type: 'line',stack: 'Total',smooth: true,symbol: "none",data: [5, 20, 5, 20, 15, 5]},{name: '月度cop',type: 'line',stack: 'Total',smooth: true,symbol: "none",data: [5, 20, 5, 20, 15, 5]},{name: '年度cop',type: 'line',stack: 'Total',smooth: true,symbol: "none",data: [5, 20, 5, 20, 15, 5]}]};// 使用刚指定的配置项和数据显示图表。this.myChart1.setOption(option);},//...chart2 ...chart3
}

在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/a663ae49fc7d406a803903a870f32a41.png
在这里插入图片描述

相关文章:

Echarts图表跟随父容器的变化自适应

如果页面中有多个图表 隐藏/展开左边侧边栏echarts图表自适应 <div class"line"><div class"title">制冷站关键参数</div><div id"chartLine1" style"width: 100%;height:85%;"></div></div><…...

【多线程】ThreadLocal是什么?有哪些使用场景?使用ThreadLocal需要注意些什么?

文章目录 前言一、ThreadLocal 是什么&#xff1f;二、有哪些使用场景&#xff1f;三、实现原理四、在线程池中使用 ThreadLocal 为什么可能导致内存泄露呢&#xff1f;五、线程池中&#xff0c;如何正确使用 ThreadLocal&#xff1f;六、ThreadLocal 核心方法 前言 一、Threa…...

一种基于动态代理的通用研发提效解决方案

作为一名研发人员&#xff0c;除了业务开发之外&#xff0c;研发提效是一个永恒的话题&#xff0c;而女娲正是这一话题下进行的一次全面的剖析和实践。 作者&#xff1a;张全洪(钝悟) 一、女娲是什么 女娲是业务研发同学&#xff08;开发、测试、运维&#xff09;在软件迭代的…...

【vue3】一些关于hooks的使用经验

前言 最近接到了一个需求&#xff0c;隔壁嵌入式部门希望我们用前端解析渲染Kconfig表单。这篇文章用来记录一下本次使用hook pinia vue3的经验 hooks hooks的概念最早是在 React 中听到的&#xff0c;虽然早些时间也写过一点react&#xff0c;但也只是照葫芦画瓢&#xf…...

面试系列 - Java 并发容器详解

Java 并发容器是一组用于在多线程环境下安全访问和操作数据的数据结构。它们提供了线程安全的集合和映射&#xff0c;使开发者能够更轻松地处理并发编程问题。 一、Java并发容器 ConcurrentHashMap&#xff1a; 它是一个高效的并发哈希表&#xff0c;支持多线程并发操作而不需…...

使用动态住宅代理还能带来哪些好处?

一、什么是动态住宅代理ip 动态住宅代理是一种代理技术&#xff0c;它利用代理服务器中转用户和目标服务器之间的网络流量&#xff0c;实现用户真实位置的屏蔽。代理提供商会有自己的ip大池子&#xff0c;当你通过代理服务器向网站发送请求时&#xff0c;服务器会从池子中选中…...

笙默考试管理系统-MyExamTest----codemirror(18)

笙默考试管理系统-MyExamTest----codemirror&#xff08;18&#xff09; 目录 一、 笙默考试管理系统-MyExamTest----codemirror 二、 笙默考试管理系统-MyExamTest----codemirror 三、 笙默考试管理系统-MyExamTest----codemirror 四、 笙默考试管理系统-MyExamTest---…...

TGA格式文件转材质

今天淘宝上买了一个美女的模型&#xff0c;是blender的源文件&#xff0c;上面说有fbx格式的。我用unity&#xff0c;所以觉得应该可以用。文件内容如下图&#xff1a; FBX文件夹打开后&#xff0c;内容如下图所示&#xff0c;当时就预感到可能没有色彩。 unity打开后果然发现只…...

IP应用场景查询API:深入了解网络用户行为的利器

前言 随着数字时代的不断发展&#xff0c;互联网已经成为人们生活的重要组成部分。而随着越来越多的业务和社交活动迁移到在线平台上&#xff0c;了解和理解网络用户行为变得至关重要。为了满足这个需求&#xff0c;IP 应用场景查询 API 崭露头角&#xff0c;成为深入了解网络…...

docker从零部署jenkins保姆级教程(上)

jenkins&#xff0c;基本是最常用的持续集成工具。在实际的工作中&#xff0c;后端研发一般没有jenkins的操作权限&#xff0c;只有一些查看权限&#xff0c;但是我们的代码是经过这个工具构建出来部署到服务器的&#xff0c;所以我觉着有必要了解一下这个工具的搭建过程以及简…...

2023数模A题——定日镜场的优化问题

A题——定日镜场的优化问题 思路&#xff1a;该题主要考察的几何知识和天文学知识&#xff0c;需要不同角度下的镜面和遮挡情况。 资料获取 问题1&#xff1a; 若将吸收塔建于该圆形定日镜场中心&#xff0c;定日镜尺寸均为 6 m6 m&#xff0c;安装高度均为 4 m&#xff0c;且…...

Container is running beyond memory limits

问题 Hadoop环境中&#xff0c;执行MapReduce程序或者Hive 任务时候&#xff0c;任务执行失败&#xff0c;提示内存不足。 Container is running 337869312B beyond the VIRTUAL’ memory limit.Current usage:295.8 NB of 1 GB physical memoryused;2.4 GB of 2.1 GB virtual…...

Java后端开发面试题——JVM虚拟机篇

目录 什么是程序计数器&#xff1f; 你能给我详细的介绍Java堆吗? 什么是虚拟机栈 1. 垃圾回收是否涉及栈内存&#xff1f; 2. 栈内存分配越大越好吗&#xff1f; 3. 方法内的局部变量是否线程安全&#xff1f; 4.什么情况下会导致栈内存溢出&#xff1f; 5.堆栈的区别…...

SpringMVC增删改查(CRUD)的实现

目录 前言 一、前期准备 1.pom.xml---依赖与插件的导入 2.jdbc.properties---数据库连接 3.log4j2.xml---日志文件 4.spring-mybatis 5.spring-context 6.spring-mvc 二、增删改查的实现 1.model与mapper层的生成 2.biz层 3.工具类 4.controller层 三、测试结果 总…...

智安网络|面临日益增长的安全威胁:云安全和零信任架构的重要性

随着云计算技术的快速发展和广泛应用&#xff0c;云安全和零信任架构变得愈发重要。在数字化时代&#xff0c;云计算技术得到了广泛的应用和推广。企业和组织借助云服务提供商的强大能力&#xff0c;实现了高效、灵活和可扩展的IT基础设施。然而&#xff0c;随着云环境的快速发…...

JVM常用调优策略

1、JVM调优的核心关注指标 调优之前首先我们要知道怎样才算是“优”&#xff0c;不能笼统的说我的程序性能很好&#xff0c;所以就需要有一个具体的指标来衡量性能情况&#xff0c;而在JVM里面衡量性能两个指标分别“吞吐量”和“停顿时间”。 吞吐量&#xff1a;程序运行过程…...

自动化防火墙放行目标域名IP

#!/bin/bash # 设置要获取IP地址的域名 domain"yourdomain.com"# 获取域名的IP地址 new_ip$(dig short A $domain)# 移除之前添加放行的IP地址&#xff08;通过备注找它的编号&#xff09; rule_number$(iptables -L INPUT -n --line-numbers -v | awk -v domain&quo…...

12.2RAC环境从RAC转为单机模式的问题处理

近期&#xff0c;在某用户的测试环境&#xff0c;需要将RAC转为单机模式&#xff0c;然后进行数据恢复&#xff1b;一开始只是将数据库软件通过make -f ins_rdbms.mk rac_off 和 make -f ins_rdbms.mk ioracle关闭RAC模式&#xff1b;然后在启动数据库&#xff08;sqlplus / a…...

Docker 中 jdk8容器里无法使用 JDK 的 jmap 等命令的问题

一、问题描述 项目部署在 CentOS 服务器上。项目偶尔会出现无响应的情况&#xff0c;这时理所当然要上去用 JDK 相关命令看看堆栈和GC等信息了。 进入 Java 程序所在容器&#xff1a;docekr-compose exec api bash&#xff0c;进入到 api 容器的 bash 终端。 jps 打印 Java …...

typeScript--[es6class类实现继承]

一.js中实现继承 // js实现继承 // 父类 function Father(name) {this.name namethis.say function () {console.log(this.name "在唱歌")} } var f new Father("逍遥的码农")// 子类 function Son(name) {Father.call(this, name) } Son.prototype …...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

数据库——redis

一、Redis 介绍 1. 概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、高性能的内存键值数据库系统&#xff0c;具有以下核心特点&#xff1a; 内存存储架构&#xff1a;数据主要存储在内存中&#xff0c;提供微秒级的读写响应 多数据结构支持&…...

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...

Xcode 16 集成 cocoapods 报错

基于 Xcode 16 新建工程项目&#xff0c;集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...