zoukankan      html  css  js  c++  java
  • tab切换echarts无法正常显示问题

    项目中使用到了Echarts来在展示图表,两个tab切换页面中都存在图表,页面加载完成后

    对所有图表进行了初始化和绘制,然后切换查看时,发现图表的宽度不正确.,第一个tab显示是很正常的,但是第二个tab中内容显示不完整。

    原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小。而这个默认宽度很小,所以导致echarts图表显示不完全。

    解决办法:

    1.将div的宽高设置成固定值,比如style=”500px;height:500px”,这时候echarts有了明确的大

    小时候就可以正常显示出来了。(不过这个方法还是不好,固定值的高宽无法自适应网页大小啊)

    2.在点击第二个tab的时候初始化echarts,也就是调用建立echarts的函数,而不要再加载网页的时候就初始化。

    我的解决方案是对第一种解决方案进行了升级,做到了适配移动端的屏幕宽度。

    html

    <div class="count-chart" ref="countChart" v-show="leftChart"></div>

    <div class="time-chart" ref="timeChart" v-show="rightChart"></div>

    js

    再初始化echarts前重新定义图表的宽高

    this.$refs.countChart.style.width = window.innerWidth - 20 + 'px';

    this.$refs.countChart.style.height = "280px";

    this.$refs.timeChart.style.width = window.innerWidth - 20 + 'px';

    this.$refs.timeChart.style.height = "280px";

  • 相关阅读:
    回溯算法
    cannot import name 'np' in mxnet
    Linux后台运行任务 nohup &
    为Windows Terminal添加右键菜单
    Outlook设置QQ邮箱
    逻辑回归 logistic regression
    Python添加自定义目录到sys.path
    强化学习 策略梯度
    为Windows terminal preview添加右键菜单
    双系统使用Linux引导
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/11289834.html
Copyright © 2011-2022 走看看