解决echarts图表在tab选项卡里宽度100%变成100px

echarts 专栏收录该内容
8 篇文章 0 订阅

使用element的el-tab-pane组件,切换到第二个组件的时候,底下的echars图宽度显示为100px,如下图
在这里插入图片描述

打开控制台发现已经默认成了100px。
在这里插入图片描述
导致这样的原因是因为:我的图表在tab选项卡里,因为热力图一开始是display:none;在一开始初始化执行js的时候找不到这个元素,所以会出现问题。
解决方法:在echarts初始化之前先用js获取当前屏幕的大小,然后再给他设置宽度就可以了。
代码如下:

  <div 
    id="frequencyChart" 
    :style="{width: 'chartWidth',height:'300px'}" 
    class="history-chart" />
    document.getElementById('frequencyChart').style.width =
      (window.innerWidth / 5) * 4 + 'px';// 宽度自定义
    this.chartMeteo = echarts.init(document.getElementById('frequencyChart'));
    ...
    this.chartMeteo.setOption(option);

效果图:
在这里插入图片描述

  • 0
    点赞
  • 3
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值