遇到一个问题，使用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>