vue-grid-layout与Echart项目中使用问题

2024-04-24 02:01:42

 vue-grid-layout网格中使用Echart初始表格不能显示，刷新不显示，大小自适应等问题

项目介绍

使用vue创建的项目，要求首页可以拖拽缩放更能，为实现业务需求在网上找到vue-grid-layout插件 vue-grid-layout插件gitHub地址，该插件总体使用是不错的，如有需求可以入手使用，本篇文章主要介绍使用vue-grid-layout网格布局时网格内容Echart的使用，出现的问题初始化图标不显示、图标自适应显示问题。

vue-grid-layout安装使用

vue-grid-layout安装及使用请参考vue-grid-layout插件gitHub地址gitHub上下载安装使用，对应字段代表的意思，作用类型写的很全，一个就懂了，这里就不多说了。

问题说明展示

1、首先是首次进到页面和页面刷新Echart图表不显示，查找原因Echart图标有加载，只是显示容器没有宽高所以看不到，但是查看

网格布局宽高是正常的，说明问题出在vue-grid-layout加载宽高没有完成Echart图表创建加载已经完成导致Echart图表盒子加载

宽高为0，解决办法给Echart加载加上异步效果，通过异步最好加载就可以解决了。
.
2、网格布局拖拽放大缩小图表不能自适应，Echart只是固定宽高。

问题解决办法

1、解决办法其实不难，只是当时不知问题所在，所以不知道如何解决，给Echart 图表创建加载过程加一个延时setTimeout，使加载Echart加载过程为异步就可以了，直接展示一下代码

methods: {echartDom () {let that =this//使用setTimeout异步特性使图标正常加载setTimeout (()=>{this.$nextTick(() => {this.mychart = echarts.init(document.getElementById(this.echartID))this.resizeDiv = document.getElementById(this.echartID)this.mychart.setOption(this.echartHome)let listener =function () {that.mychart.resize()}EleResize.on(this.resizeDiv, listener)})},0)},},

问题解决了，轻松又愉快，当然可能还有更加方便合适的

2.拖拽自适应问题

解决方法利用div使用onresize方法，这样既可达到自适应效果，具体方法步骤请参考另一篇博客Echart自适应解决办法

vue-grid-layout与Echart项目中使用问题相关推荐

Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
目录一. Vue Grid Layout 简介二.vue-grid-layout 的安装与使用三. 属性 3.1 gridItem 的必须属性 3.2 框架元素的实际宽度高度计算方式 3.3 元 ...
Vue第二章，在项目中使用element-ui组件
使用vue的童鞋相信都知道vue中有很多ui组件,这里推荐使用element-ui组件(个人测试还算强大,起码开发商野心不小),因为此组件可以集成到angular.react.vue任意一个框架中. ...
vue 用户名重复验证_Vue项目中实现用户登录及token验证
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个to ...
vue光标插入内容_vue项目中在可编辑div光标位置插入内容的实现代码
vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragstart($event, item.labelname)" draggable='true ...
ionic+vue+capacitor系列笔记--02项目中集成Capacitor，添加android，ios平台，真机运行项目
Capacitor是什么? Capacitor是由ionic团队开发的一款跨平台移动应用构建工具,可轻让我们轻松的构建Android.iOS.Electron和Web应用程序. Capacitor是A ...
pageoffice在vue+springboot前后端分离项目中的应用方法
1.因浏览器禁用插件无法使用内嵌在浏览器内部的pageoffice打开方式,需要使用4.0新增的POBrowser方式来在外部打开一个窗口去在线打开office 故下面介绍的是基于4.0在线打开文档的 ...
vuecli启动的服务器位置,webpack – 在vue cli 3生成的项目中启动dev服务器
我使用npm i -g @ vue / cli在我的 Windows系统上全局安装了vue cli 3. 然后我使用vue create vue-project生成了一个项目我通过提示选择了所需的插 ...
vue踩坑记-在项目中安装依赖模块npm install报错
在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: 图片.png 图片.png npm ERR! path D:\ShopApp\node_modules\fsev ...
vuecli启动的服务器位置,在vue cli 3生成的项目中启动dev服务器
我在我的Windows系统上使用全局安装了vue cli 3 npm i -g @vue/cli. 然后我使用生成了一个项目 vue create vue-project 我通过提示选择了所需的插件. ...

最新文章

热门文章