echart自适应(适配),resize

this.myChart = echarts.init(document.getElementById('firm_chart'))
window.addEventListener("resize", this.chartResize);
chartResize() {this.myChart.resize()
},
beforeDestroy() {window.removeEventListener("resize", this.chartResize);
},

多图表自适应:

mounted() {window.addEventListener("resize", this.chartResize);
},
beforeDestroy() {window.removeEventListener("resize", this.chartResize);},
chartResize() {this.myChart.resize()this.myChart2.resize()},

问题:隐藏侧边栏后,图表没有自适应容器;
解决办法:

1、把侧边栏隐藏的状态存起来,vuex或者其他地方,我这里存放到vuex中

//展开和收缩
toggleCollapse(){this.isCollapse=!this.isCollapse// 存到Vuex中this.$store.dispatch("setIsCollapse", this.isCollapse);
},

2、在你需要自适应图表的页面或组件中,去监听vuex中的值,如果侧边栏的状态(隐藏或显示)改变,那么就重新渲染echarts图表

watch:{'$store.getters.getIsCollapse'(value){console.log(value)setTimeout(() => {this.chartResize()}, 50)}},

注意:如果watch没有实现效果,可以尝试把setTimeout时间改大点

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

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

相关文章

Qt —UDP通信QUdpSocket 简介 +案例

1. UDP通信概述 UDP是无连接、不可靠、面向数据报(datagram)的协议,可以应用于对可靠性要求不高的场合。与TCP通信不同,UDP通信无需预先建立持久的socket连接,UDP每次发送数据报都需要指定目标地址和端口。 QUdpSocket…

开发多点触控MFC应用程序

当下计算机变得越来越智能化,越来越无所不能,触摸屏的普及只是时间问题了。 虽然鼠标和键盘不会很快就离开人们的视野,毕竟人们使用鼠标跟键盘已经成为一种习惯,但是处理信息或者说操作计算机的其他方法也层出不穷——比如触控技术…

用springboot+elasticserach7的demo,对比sider和百度ai的异同

对比aigc引擎:sider chatgpt3.5和百度ai 提示词: springboot2.5,连接elasticsearch7的demo,要有基本的操作,用模板方法 以下是一个使用Spring Boot 2.5连接Elasticsearch 7的示例代码,包括基本的操作方法…

springboot配置ym管理各种日记(log)

1:yml配置mybatis_plus默认日记框架 mybatis-plus:#这个作用是扫描xml文件生效可以和mapper接口文件使用,#如果不加这个,就无法使用xml里面的sql语句#启动类加了MapperScan是扫描指定包下mapper接口生效,如果不用MapperScan可以在每一个mapp…

docker常用中间件安装

文章目录 1、前言2、中间件安装2.1、mysql2.2、gitlab容器2.3、nacos2.4、redis2.5、xxljob2.6、zipkin2.7、sentinel2.8、seata2.8.1、获取镜像2.8.2、运行容器并获取配置 2.9、rockerMQ2.9.1、rockerMQ-namesrv2.9.2、rockerMQ-broker2.9.3、rockerMQ-console 2.10、jenkins2…

git status搜索.c和.h后缀及git新建分支

git status搜索.c和.h后缀及git新建分支 1.脚本代码2.git新建分支(1)创建新分支(2)删除本地分支(3)删除远端分支(4)合并分支3.指定历史版本创建分支1.脚本代码 $ git status | grep "\.[hc]$"$ 是行尾的意思 \b 就是用在你匹配整个单词的时候。 如果不是整个…

docker的数据卷、docker数据持久化

目录 前言docker数据持久化的2种方式数据卷 bind mount ,即-v参数匿名数据卷 docker manager volume-v参数和匿名卷的区别docker volume 命令的使用数据卷容器孤儿volume总结 前言 环境:centos7.9 docker version 20.10.14 本篇我们来介绍docker的数据卷…

每日一题(链表中倒数第k个节点)

每日一题(链表中倒数第k个节点) 链表中倒数第k个结点_牛客网 (nowcoder.com) 思路: 如下图所示:此题仍然定义两个指针,fast指针和slow指针,假设链表的长度是5,k是3,那么倒数第3个节点就是值为…

【进阶篇】MySQL分库分表详解

文章目录 0. 前言1. 垂直分库分表2. 水平分库分表 1. 理解过程及实现方案问题讨论衍生出分库分表策略借助成熟组件使用分库分表阶段完成后面临的问题1. 异地多活问题2. 数据迁移问题3. 分布式事务问题4. join查询的问题 分库分表的策略实现示例 2. 参考文档 0. 前言 假设有一个…

windows笔记本远程连接如何打开任务管理器?

参考素材: https://jingyan.baidu.com/article/8275fc86a97f5207a03cf6cd.html https://www.anyviewer.cn/how-to/ctrl-alt-delete-remote-desktop-6540.html 网上查了很多方法,都说ctrlaltend可以解决这个问题。 但是笔记本键盘上没有end键。 继续查了一…

【数学建模】清风数模正课5 相关性分析

相关系数 相关性分析的关键是计算相关系数,在本节课中将会介绍两种常用的相关系数:皮尔逊相关系数(Pearson)和斯皮尔曼相关系数(Spearman)。 它们可以用来衡量两个变量间相关性的大小,对于不同…

Unity——脚本序列化

在介绍序列化之前,我们先来了解一下为什么要对数据进行序列化 数据序列化有以下几个主要的应用场景和目的: 1. 持久化存储:序列化可以将对象或数据结构转换为字节序列,使得其可以被存储在磁盘上或数据库中。通过序列化&#xff…

Android 13 - Media框架(9)- NuPlayer::Decoder

这一节我们将了解 NuPlayer::Decoder,学习如何将 MediaCodec wrap 成一个强大的 Decoder。这一节会提前讲到 MediaCodec 相关的内容,如果看不大懂可以先跳过此篇。原先觉得 Decoder 部分简单,越读越发现自己的无知,Android 源码真…

SQL sever命名规范

目录 一、标识符 二、表名(Table): 三、字段名(fields): 四、约束(Constraint): 五、索引(Index): 六、存储过程(Stored Proced…

安卓 tcp 客户端

安卓 tcp 客户端 Server:8888 是Qt 写的Tcp 服务器 ip 是 192.168.2.103 port是8888 安卓手机运行 kotlin 语法的Tcp Client ,连接,收发数据 效果如下图 Tcpclient package com.example.myapplicationimport android.os.Handler import android.os.Loo…

Debezium系列之:Debezium Server在生产环境大规模应用详细的技术方案

Debezium系列之:Debezium Server在生产环境大规模应用详细的技术方案 一、需求背景二、Debezium Server实现技术三、技术方案流程四、生成接入配置五、新增数据库接入和删除数据库接入效果六、监控zookeeper节点程序七、新增数据库接入部署debezium server程序八、删除数据库接…

Go操作各大消息队列教程(RabbitMQ、Kafka)

Go操作各大消息队列教程 1 RabbitMQ 1.1 概念 ①基本名词 当前市面上mq的产品很多,比如RabbitMQ、Kafka、ActiveMQ、ZeroMQ和阿里巴巴捐献给Apache的RocketMQ。甚至连redis这种NoSQL都支持MQ的功能。 Broker:表示消息队列服务实体Virtual Host&#x…

Java中的InetAddress类

InetAddress类 概念:InetAddress类是 Java 中用于表示 IP 地址的类。它提供了一种标准的方法来处理 IP 地址,无论是 IPv4 还是 IPv6 地址。InetAddress 类位于 java.net 包中,是 Java 网络编程的一部分。 常用方法: getLocalHost…

深入探讨梯度下降:优化机器学习的关键步骤(一)

文章目录 🍀引言🍀什么是梯度下降?🍀损失函数🍀梯度(gradient)🍀梯度下降的工作原理🍀梯度下降的变种🍀随机梯度下降(SGD)🍀批量梯度下降&#xf…

HTML5+CSS3+JS小实例:科技感满满的鼠标移动推开粒子特效

实例:科技感满满的鼠标移动推开粒子特效 技术栈:HTML+CSS+JS 效果: 源码: 【html】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport&qu…