echarts的全屏切换

最新推荐文章于 2025-04-23 17:51:27 发布

一只可爱乖巧

最新推荐文章于 2025-04-23 17:51:27 发布

阅读量959

点赞数

分类专栏：笔记文章标签： echarts javascript css

本文链接：https://blog.youkuaiyun.com/m0_46495397/article/details/125809937

版权

笔记专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用JavaScript实现点击按钮隐藏侧边栏和导航，同时切换颜色，并针对echarts组件在全屏切换时动态调整大小。着重讲解了如何通过ResizeObserver监听内容区域变化以确保图表实时适应布局变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.点击按钮隐藏左侧和上方导航，并切换颜色（颜色动态class)；
2.调整echarts所在顶级容器的宽高（这里布局我是用的vh vw）
3.需要监听每个echarts所在div 的变化；(重点：因为全屏切换时，并不是窗口发生变化，所以用window监听是监听不到变化的）

//全屏切换方法
			corton() {
				//定义监听div变化
				let divlister= new ResizeObserver((entries) => {
				//全屏切换时echarts所在div发生变化，调用resize方法
					this.chartspie.myCharts.resize()
				    this.chartspie4.myCharts.resize();
					this.chartstar.myCharts.resize()
					this.chartspie3.myCharts.resize()
					 })
					 //监听echarts所在div的变化
				divlister.observe(this.charts4);
				//定义变化元素
				let topBar = document.getElementsByClassName("top-bar");
				let sideBar = document.getElementsByClassName("side-bar");
				let pagetabswrap = document.getElementsByClassName("page-tabs-wrap");
				let elBreadcrumb = document.getElementsByClassName("el-breadcrumb");
				let single = document.getElementsByClassName("single-spa-wrap");
				let esv = document.getElementsByClassName("el-scrollbar__view");
				let panelwrap = document.getElementsByClassName("panel-wrap");
				let contentwrap = document.getElementsByClassName("content-wrap");
				let panel = document.getElementsByClassName("panel");
				let elpacetem = document.getElementsByClassName("el-space__item"); 
				if(this.allscreen){//为true时设置元素颜色宽高等
					this.allscreen = false;	
					this.color.ce1 = ['#E4E7ED', '#67C23A', '#F56C6C'];
					this.color.ce3 = ['#E4E7ED', '#FFD9B3'];
					this.color.ce4 = ['#EBEEF5', '#5B8FF9'];
					this.ecolor = '#606266';
					topBar[0].style.display = 'flex';
					sideBar[0].style.display = 'flex';
					pagetabswrap[0].style.display = 'block';
					elBreadcrumb[0].style.display = 'block';
					single[0].style.top = '118px';
					single[0].style.left = '214px';
					esv[0].style.height = '';
					panelwrap[0].style.height = '';
					contentwrap[0].style.backgroundColor = '#fcfbf9';
					panel[0].style.backgroundColor = '#fff';
					elpacetem[0].style.color = '#000';
				}
				}