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

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

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

dataV中重置边框组件的宽高的initWH方法的使用
先说下我遇到的情况,项目就是很经典的后台管理系统,菜单在左侧,并且可以收缩,首页是个可视化页面,用到了dataV边框组件,但是收缩菜单的时候问题出现了,边框无法自适应父容器,下面是效果图: 可以很明显 ...
【Android 内存优化】自定义组件长图组件 ( 获取图像宽高 | 计算解码区域 | 设置图像解码属性复用像素格式 | 图像绘制 )
文章目录一.获取图像真实宽高二.计算解码区域三.设置解码参数内存复用像素格式四.图像绘制五.执行效果六.源码及资源下载官方文档 API : BitmapRegionDecoder 在 ...
未开启横屏时，设置了宽高为窗口100%的视频，竖屏方向播放时，变形问题解决
当手机未开启横屏时,设置了宽高为窗口100%的视频,竖屏方向播放时,会有拉伸,可以根据手机宽高比例判断横竖屏状态,来设置旋转视频元素,同时更新设置视频元素宽高(与之前状态的宽高值对调) demo: & ...
修改源码实现小程序UI库iview weapp的modal组件自定义宽高
记一下小程序端UI库iview weapp的modal模态窗自定义样式修改因为项目需要在模态窗中显示内容,小程序端的iview没有类似popup这种的弹出框,所以就选择了modal对话框来承载弹出内 ...
Flutter中Contrainer 组件的宽高限制分析
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. ** 你可能需要 CSDN 网易云课堂教程掘金 EDU学院教程知乎 Flutter系列文章头条同步百度同步本 ...
【Android 应用开发】自定义组件宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件
博客地址 : http://blog.csdn.net/shulianghan/article/details/41520569 代码下载 : -- GitHub : https://github.c ...
html获取此次点击的id,github项目解析（八）--Activity启动过程中获取组件宽高的三种方式...
转载请标明出处:1片枫叶的专栏上1个github小项目中我们介绍了避免按钮重复点击的小框架,其实现的核心逻辑是重写OnClickListener的onClick方法,添加避免重复点击的逻辑,即为第2 ...
vue 获取元素宽高
vue 获取元素宽高 vue 中获取组件宽高分两种情况: 1.获取普通组件宽高,直接使用 $refs 即可 2.获取子组件宽高,需使用 $refs.$el 子组件 <template>&l ...
Android获取屏幕宽高,状态栏宽高,actionbar宽高,layout宽高,导航栏高度的方法汇总
看这个博客你可以知道获取屏幕宽高,状态栏宽高,actionbar宽高,layout宽高,导航栏(虚拟按键栏)高度的方法目录顺序为代码测试的机型状态栏高度 actionbar高度屏幕高度导航 ...

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

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

最新文章

热门文章