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()
})
相关推荐
Mr Xu_20 分钟前
告别硬编码:前端项目中配置驱动的实战优化指南
前端·javascript·数据结构
Byron07071 小时前
从 0 到 1 搭建 Vue 前端工程化体系:提效、提质、降本实战落地
前端·javascript·vue.js
zhengfei6111 小时前
【AI平台】- 基于大模型的知识库与知识图谱智能体开发平台
vue.js·语言模型·langchain·知识图谱·多分类
徐小夕@趣谈前端1 小时前
Web文档的“Office时刻“:jitword共建版2.0发布!让浏览器变成本地生产力
前端·数据结构·vue.js·算法·开源·编辑器·es6
德育处主任Pro1 小时前
纯前端网格路径规划:PathFinding.js的使用方法
开发语言·前端·javascript
墨笔.丹青1 小时前
基于QtQuick开发界面设计出简易的HarmonyUI界面----下
开发语言·前端·javascript
董世昌412 小时前
深度解析浅拷贝与深拷贝:底层逻辑、实现方式及实战避坑
前端·javascript·vue.js
扶苏10022 小时前
vue使用event.dataTransfer实现A容器数据拖拽复制到到B容器
前端·vue.js·chrome
David凉宸2 小时前
Vue 3 项目的性能优化策略:从原理到实践
前端·vue.js·性能优化
小马_xiaoen2 小时前
Proxy 与 Reflect 从入门到实战:ES6 元编程核心特性详解
前端·javascript·ecmascript·es6