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()
})
相关推荐
辰同学ovo26 分钟前
从全局登录状态管理学习 Redux
前端·javascript·学习·react.js
爱看书的小沐30 分钟前
【小沐杂货铺】基于Three.js绘制三维艺术画廊3DArtGallery (Three.js,WebGL)
javascript·3d·webgl·three.js·babylon.js·三维画廊
ZC跨境爬虫1 小时前
跟着 MDN 学 HTML day_12:(HTML网页图片嵌入)
前端·javascript·css·ui·html
是上好佳佳佳呀1 小时前
【前端(十二)】JavaScript 函数与对象笔记
前端·javascript·笔记
你真的快乐吗2 小时前
@fuxishi/svg-icon:一个 Vue 3 svg本地图标+iconify图标组件库,让图标管理不再头疼
前端·vue.js·typescript
Rkgua2 小时前
ESModule和Commonjs模块的区别
前端·javascript
江南十四行2 小时前
AI Agent应用类型及Function Calling开发实战(三)
服务器·前端·javascript
yqcoder2 小时前
JavaScript 数据类型全景图:从基础到进阶
开发语言·javascript·ecmascript
吴声子夜歌3 小时前
Vue3——脚手架Vite
前端·javascript·vue.js·vite
threelab3 小时前
Three.js 3D 饼图效果 | 三维可视化 / AI 提示词
javascript·人工智能·3d