切换组件echarts宽高不正常，100%变成100px问题

最新推荐文章于 2023-08-21 14:57:46 发布

一只成序源

最新推荐文章于 2023-08-21 14:57:46 发布

阅读量2k

点赞数 1

分类专栏：正儿八经文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_41191401/article/details/122239894

版权

正儿八经专栏收录该内容

22 篇文章 0 订阅

订阅专栏

遇到一个问题，使用v-show,做echarts的切换，发现只有第一个正常，后续的图表设置的100%都不生效，只能硬编码写死宽高才行，显然不是很好。在网上查阅之后发现主要是display导致的。display：none;echarts获取不到宽高，这时候只能取了个%前面的数字（不知道echarts怎么搞的）。基于此，第一个想法就是使用visibility:hidden来替代。

取代后，出现新问题，visibility会占用空间，怎么折叠起来，第一想法就是position脱离文档流使其折叠在一块。

OK这样就完美解决了。

我写了一个原生解决的例子，vue的话更简单，方法就是把

:style="isShow?{'visibility':'hidden'}:{'visibility':'visible'}"

希望能帮到你

附原生例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.box{
			width: 100%;
			height: calc(100% - 20px);
			position: absolute;
			visibility: hidden;
			top:20px;
			left:0px;
		}
		#box1{
			visibility: visible;
		}
		</style>
	</head>
	<body>
		<div style="width:700px;height: 300px;position: relative;">
			<span onclick="change(1)">1</span>
			<span onclick="change(2)">2</span>
			<span onclick="change(3)">3</span>
			
			<div id="box1" class="box">
				
			</div>
			<div id="box2"  class="box">
				
			</div> 
			<div id="box3"  class="box">
				
			</div>
		</div>
	</body>
	<script src="./js/echarts.min.js"></script>
	<script>
	function change(id){
		console.log(id)
		for(let i=1;i<=3;i++){
			if(id!=i){
				document.getElementById("box"+i).style.visibility="hidden";
			}else{
				document.getElementById("box"+id).style.visibility="visible";
			}
		}
	}
		let containerDom1=document.getElementById("box1")
		let containerDom2=document.getElementById("box2")
		let containerDom3=document.getElementById("box3")
				let chart1= echarts.init(containerDom1, null, {renderer: 'canvas'});
				let chart2= echarts.init(containerDom2, null, {renderer: 'canvas'});
				let chart3= echarts.init(containerDom3, null, {renderer: 'canvas'});
				let data1=[];
				let data2=[];
				let data3=[];
				for(let i=1;i<=100;i++){
					data1.push([i,Math.floor(Math.random()*10000+1)])
					data2.push([i,Math.floor(Math.random()*10000+1)])
					data3.push([i,Math.floor(Math.random()*10000+1)])
				} 
				// console.log(data)
				function work(chart,data){
					let option = {
						  title: {
						    text: "",
						    left: "center",
						  },
						  grid: {
						    left: "5%",
						    right: "5%",
						  },
						  xAxis: {
						    type: "value",
						    scale: true,
						    name: "Time (min)",
						  },
						  yAxis: {
						    name: "Current (pA)",
						  },
						  dataZoom: [
						    {
						      type: "inside",
						      start: 0, //点的下标
						      end: 100, //结束点的下标
						      orient: "horizontal",
						      zoomOnMouseWheel: "ctrl",
						      moveOnMouseWheel: "shift",
						    },
						    {
						      type: "inside",
						      orient: "vertical",
						      xAxisIndex: 0,
						      filterMode: "none",
						      zoomOnMouseWheel: "alt",
						      moveOnMouseWheel: false,
						    },
						    {
						      type: 'slider',
						      xAxisIndex: 0,
						      filterMode: 'none'
						    },
						    {
						      type: 'slider',
						      yAxisIndex: 0,
						      filterMode: 'none'
						    }
						  ],
						
						  toolbox: {
						    right: "5%",
						    feature: {
						      dataZoom: { },
						      brush: {
						        type: ["lineX", "clear"],
						      },
						      saveAsImage: {
						        pixelRatio: 5,
						      }, 
						      
						    },
						  },
						  brush:{
						    xAxisIndex: 0,
						  }, 
						   tooltip: {
						    trigger: "axis",
						    formatter:(params)=>{
						      return "<strong>Time: </strong>"+params[0].data[0].toFixed(2)+"min<br/><strong>Current: </strong>"+params[0].data[1].toFixed(2)+"pA"
						    }
						  },
						  series: [
						    {
						      type: "line",
						      sampling: "lttb",
						      showSymbol: false,
						      lineStyle: {
						        width: 1,
						      },
						      emphasis: false,
						      data: data,
						      silent: true,
						    },
						  ],
						  animation: false,
						};
						chart.setOption(option)
				}
				
				work(chart1,data1)
				work(chart2,data2)
				work(chart3,data3)
		
	</script>
</html>