echarts在默认隐藏的div中不显示的问题

xiaohai 2020-10-27 10:41:28 共4332人围观 标签： js 
简介这两天一直遇到一个问题，就是Echarts如果放在一个默认隐藏的div元素中，后面再显示这个div，但是图标不出来，找了很多博客，原来是高度没有设置。

问题：希望在点击一个按钮后显示图表，所以需要先将图表进行隐藏，但是点击显示后，图表却不显示，找了很多原因，有些说需要调用resize函数，但是没有任何作用。最终的原因是因为ECharts没有获取到div的高宽而导致初始化失败。所以只需要把div的高度设置好即可。

如：

    <!--折线图-->
    <Drawer title="图表"
            :closable="false"
            v-model="examLineEchart"
            width="840">
      <chart-line style="height: 300px;width:840px;"
                  :value="examEchartData"
                  ref="examLineEchartRef" />
    </Drawer>

image.png

相同类型文章

热门标签

每日一句

    九日悲秋不到心。

    ——晏几道

今日排行

  • Word使用邮件合并进行批量打印

    我们在工作或是生活中，有时会需要制作一些请柬、奖状、或者桌牌等，这些东西都有一个共性，那就是除了每个人的名字不一样之外，其他大部分内容都是一样的，那么我们可以如何快速地批量制作呢？很简单，用Word的邮件合并功能就能做到！

  • OpenCV-Python边缘检测：Sobel、Scharr、Laplacian算子和Canny算子

    图像梯度计算的是图像变化的速度。对于图像的边缘部分，其灰度值变化较大，梯度值也较大；相反，对于图像中比较平滑的部分，其灰度值变化较小，相应的梯度值也较小。图像梯度计算需要求导数，但是图像梯度一般通过计算像素值的差来得到梯度的近似值（近似导数值）。本节主要介绍Sobel算子、Scharr算子、Laplacian算子和Canny算子的使用.

  • Nginx搭建流媒体服务器

    最近关注流媒体服务器来做网络直播，本想使用阿里云的流媒体服务器，由于费用的问题还是想能否自己搭建一个流媒体服务器供自己测试使用。果不其然，Nginx居然如此强大，可以用来做流媒体服务器。本文将具体介绍流媒体服务器的搭建过程和使用过程。

  • Dart安装

    最近在学习Flutter，那么就需要了解下Dart的基本语法，虽然Flutter项目中能执行Dart代码，但是为了能更好的使用Dart，所以还是重新搭建了下Dart。

  • 人脸认证：face_recognition库的安装与应用

    人脸识别技术如今已广泛应用于安全监控、身份验证、人机交互等多个领域。对于开发者而言，利用现有的库如face_recognition可以极大地简化人脸识别的开发过程。本文将详细介绍如何安装face_recognition库，并通过实例展示如何用它来实现一个基本的人脸比对服务。

点击排行

友情链接