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

xiaohai 2020-10-27 10:41:28 共4200人围观 标签： 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

相同类型文章

热门标签

每日一句

    爱情不仅不能买，而且金钱必然会扼杀爱情。

    ——卢梭

今日排行

  • yarn、npm配置阿里云国内镜像（新镜像）

    nodejs中使用npm和yarn，使用最新阿里云镜像 aliyun mirror，网上很多还是文章用的是下面这个地址~~yarn config set registry https://registry.npm.taobao.org~~

  • Flutter：尺寸盒子组件SizedBox

    SizedBox组件是一个具有特定大小的盒子组件，如果设置了该组件的宽高，那么该组件下的子组件就最多能显示特定大小区域的内容。如果没有设置宽高，那么该组件就会根据子组件的内容进行适当的调节。

  • 线性表之顺序表(Sequence List)

    线性表是最基本、最简单、也是最常用的一种数据结构，一个线性表是n个具有相同特性的数据元素的有限序列。

  • OpenCV-Python图像通道的拆分和合并

    OpenCV-Python图像通道的拆分和合并，主要介绍两个函数：一、拆分通道使用函数cv2.split；二、合并通道使用函数cv2.merge，但是一定要注意合并通道的顺序问题，OpenCV是GBR，不是RGB，如果顺序不是GBR，合并出来的图像就会出现颜色问题，与原图的颜色就不一致了.

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

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

点击排行

友情链接