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()
})
相关推荐
苏打水com5 小时前
第十一篇:Day31-33 前端安全与性能监控——从“能用”到“安全可靠”(对标职场“系统稳定性”需求)
前端·javascript·css·vue.js·html
zhangwenwu的前端小站5 小时前
VUE 实现划词 问AI 翻译等功能
前端·javascript·vue.js
黑臂麒麟5 小时前
华为云的DevUI&Form组件实战:个人信息编辑表单完整实现
前端·javascript·ui·华为云·angular.js
程序员小寒5 小时前
前端高频面试题之手写Promise
前端·javascript·面试
丫丫7237346 小时前
Raycaster(鼠标点击选中模型)
javascript·webgl
北慕阳6 小时前
选择采购单按钮
前端·javascript·数据库
华仔啊6 小时前
Vite 到底能干嘛?为什么 Vue3 官方推荐它做工程化工具?
前端·javascript·vue.js
悟能不能悟6 小时前
目前流行的前端框架
开发语言·javascript·ecmascript
计算机学姐6 小时前
基于Python的智能点餐系统【2026最新】
开发语言·vue.js·后端·python·mysql·django·flask
赵庆明老师6 小时前
NET 中深度拷贝一个对象
前端·javascript·ui