echarts初始化时只显示100px的问题

初始化el-container时,需要选择项目才可进入el-main;但是就页面而已,相对应的路由已经进去了,el-main使用的是v-show进行的判断,后面改成v-if即可,下面补充一下二者的区别:

  • v-show: 根据条件显示DOM元素的指令,可以用来动态控制DOM元素的显示和隐藏。v-show后面跟的是判断条件,不管初始条件是什么,元素总是会被渲染;
  • v-if: 根据表达式值的真假来销毁或者重建一个绑定的DOM元素

以上就能明白为什么show为false,但是对应的路由还是执行了,导致echarts在element还未mounted时就加载,获取不到父级的width和height。

遇到问题呢,可以看下具体问题;就echarts只显示100px的问题,有以下方案:

1、直接设置echarts的宽高;

2、如果有el-tag, 设置v-if进行判断显示echarts模块的显隐;

3、设置一个定时器 settimeout去init chart;

等等。。。具体问题具体分析

clike 复制代码
window.addEventListener('resize', () => {
  chart.resize()
})
相关推荐
daols881 小时前
vue甘特图vxe-gantt如何实现拖拽任务条时如有已关联依赖线,同时更新依赖任务的日期的方式
javascript·vue.js·甘特图
我命由我123452 小时前
前端开发概念 - 无障碍树
javascript·css·笔记·学习·html·html5·js
ZC跨境爬虫2 小时前
跟着 MDN 学 HTML day_29:(动态构建与更新 DOM 树)
前端·javascript·ui·html·html5·媒体
搜狐技术产品小编20233 小时前
深度解析与业务实战:将 screenshot-to-code 改造为支持 React + Ant Design 的前端利器
前端·javascript·react.js·前端框架·ecmascript
weixin_471383033 小时前
set和map结构,减少O(n)复杂度
前端·javascript
倒带人生4 小时前
将 $confirm 对话框改为 a-modal 实现的通用技术方案
javascript·ant design
invicinble4 小时前
前端框架使用vue-cli (第五层:构建打包层--总体层介绍)
前端·vue.js·前端框架
前端那点事4 小时前
Vuex刷新数据丢失?4种持久化方案全覆盖,从零到项目落地(实战完整版)
前端·vue.js
前端那点事4 小时前
彻底吃透JS定时器!setTimeout/setInterval区别、坑点与最优优化方案(Vue实战)
前端·vue.js
Ruihong4 小时前
🔥Vue 转 React 实战:VuReact 实时监听开发指南
vue.js·后端·react.js