解决vue中echarts页面进入缩成一团的问题

最新推荐文章于 2024-04-18 15:26:09 发布

初入前端的小谢

最新推荐文章于 2024-04-18 15:26:09 发布

阅读量3.5k

点赞数 3

分类专栏： bug记录文章标签： javascript vue

本文链接：https://blog.csdn.net/qq_37622750/article/details/117128033

版权

bug记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

解决vue中echarts页面进入缩成一团的问题

直接看效果

解决过程

初始化函数添加$nextTick()

    this.$nextTick(()=>{
      this.initCharts();
    })

给echats组件添加v-if
给setOption设置定时器
mounted初始化中添加定时器

最终解决思路

echarts的父组件是整个页面的子组件，父组件使用的transition，使用的v-show，这就导致了组件在进入页面时直接加载，这时候echarts获取不到容器的宽高

解决方法

将transition中的组件使用v-if进行渲染，不适用v-show

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

初入前端的小谢

关注关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

基于VUE3+Layui从头搭建通用后台管理系统（前端篇）十六：统计报表模块相关功能实现

Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。

12-25

1278

本章使用Echarts及DataV实现常用图表、特殊图表、地图及综合图表等图表展示功能。

echarts图表刚加载进来缩在一起

sumimg的博客

01-02

4848

echarts图表刚加载进来缩在一起需要用（$nextTick）初始化DOM操作 const elementResizeDetectorMaker = require("element-resize-detector"); import echarts from 'echarts' mounted(){ var erd = elementResizeDetecto...

1 条评论您还未登录，请先登录后发表或查看评论

echarts初始画布显示太小问题

June_Wong的博客

02-22

5846

背景：刚开始是隐藏图表，当数据查询完的时候重绘图表；解决办法： 1、控制显示隐藏的时候用v-if，只有用v-if切换的是欧才会重新渲染vue； 2、设置回调，当数据查询且处理完的时候才画图 this.handleChartData(tmpArr).then( () => { this.$refs.topoChart.drawTopoCharts(); }); ...

解决echarts使用v-show页面缩成一团问题

路虽远，行则必至！

01-12

952

图表默认是隐藏状态，初始化图表的时候因为获取不到容器的实际高宽，绘制失败，需要重新获取容器的宽高再进行绘画。解决方案：切换方法中加入以下代码。

echarts图渲染问题：解决图不正常显示，图缩到一起了，清空图表数据，随窗口变化自动缩放问题(vue)

qq_36711388的博客

08-13

9154

echarts图是常用的数据展示图表插件，在运用过程中可能会遇到各种问题，下面我总结一下我在项目开发中遇到的问题：在切换tab页的时候，很容易出现图缩到一起了，如下图：重新加载数据，图任然有数据图形不随窗口放大缩小解决方案： 初始化ehcarts与数据渲染，不用加echarts实例化是否存在，不加判断会报错按照以下步骤，不但可以解决以上问题还可以避免报错：首先，将初始化的ec...

vue项目里实时监听某个div宽度的变化，然后执行相应的事件

晚星的博客

08-13

9481

directives: { // 使用局部注册指令的方式 resize: { // 指令的名称 bind (el, binding) { // el为绑定的元素，binding为绑定给指令的对象 let width = '', height = ''; function isReize () { const style = document.defaultView.getComputedStyle(el); if.

开发笔记——vue echarts图表在切换页面大小时缩成一团

醉眸颜入骨

08-11

1321

vue echarts图表在切换页面大小时缩成一团 添加this.$nextTick() this.$nextTick(()=>{ this.getjkechertsdata(); //调用echarts图表方法 })

基于 Vue + Uniapp 实现，支持分销、拼团、砍价、秒杀、优惠券、积分、会员等级、小程序直播、页面 DIY 等功能

04-04

标题与描述中提到的是一个名为"芋道商城"的电商解决方案，它基于流行的前端框架Vue.js和uni-app进行构建，旨在提供全面的电商功能，包括分销、拼团、砍价、秒杀、优惠券、积分系统、会员等级管理、小程序直播以及...

记录vue项目中遇到的问题

statueee的博客

11-28

701

Vue尚品汇项目遇到的问题

echarts等图表库地址收藏

最新发布

weixin_43637720的博客

04-18

508

整合目前使用比较多的十个图表库地址链接，基本拿来即用非常方便，其中涉及更多酷炫饼图、柱状图、折线图、地图等，还有一些echarts替代方案，支持在线编辑预览等功能

echarts重复加载解决办法

03-01

解决用百度echarts日历添加点击或双击事件后，会出现重复加载情况。

基于echarts+PHP+MySQL的数据大屏

weixin_44310586的博客

08-18

2347

** 基于echarts+PHP+MySQL的数据大屏 ** 最近学习了如何使用echarts+PHP+MySQL制作出数据大屏，简单地阐述下我学习，制作过程，希望能给到想要学习类似数据可视化界面的朋友们一些建议。因为我使用的语言是PHP(当然Python感觉也行),因此没有任何基础的同学，我建议先去学习一些相关的基础，一般来说，学习界面制作需要的知识都是JavaScript + HTML + PHP。相关的学习网站，我推荐慕课网与菜鸟教程，都会有比较详细的教程慕课网菜鸟教程学习完相关基础教程后，

vue结合echarts使用时出现重大bug（图缩成一团）

青春不打烊的博客

05-07

2237

问题出现原因：我在本地引入了echarts 把当前页面做成公共的组件给其他页面使用。（目前为止没有问题）直接打开当前页面显示正常：（下图正常）但是当引入到别的页面（问题出现）（下图是问题图片）缩成一团 原因：在组件显示的时候用了v-show，会给echarts画布默认一个宽度和高度改成 v-if 就没有问题了。 ...

echarts 弹出层使图表都挤到了一起（解决办法）

SoQBulingBuling的博客

10-13

4819

点击在弹出层渲染echarts 今天在项目中遇到一个问题那就是在点击某个区域让页面的弹出层渲染一个echarts图表我用的是vue搭建的项目因为一开始直接把option直接写在了mounted里面所以点击打开后直接就缩成了一团使用windos.resize之后也只有在页面大小发生变化的时候才会把图表还原成原来的样子后来把myChart.option直接写在了点击事件里面，当点击时才会把opt...

解决ECharts图表切换后缩成一团的问题

qq_28691187的博客

01-07

5339

解决ECharts图表切换后缩成一团的问题问题描述：解决办法：在按钮切换的方法中加上如下代码：（项目使用vue） this.$nextTick(function () { var myEvent = new Event('resize'); window.dispatchEvent(myEvent); }); ...

vue+echart图表自适应屏幕大小、点击侧边栏展开收缩图表自适应大小resize

幼儿园园长

07-03

6780

开发中用到了echart图表，需要图表自适应大小resize,一开始使用的方法是： window.onresize = function () { this.myChart.resize(); }; 但是又遇到一个问题，点击侧边栏的展开收起的时候，图表的大小没有自适应（因为窗口的大小没有变化）这里参考vue+element+admin的框架写的自适应一、index.vue的文件引入chart图表`` 这里是数据 chartData: { title: {

vue项目中，点击切换el-tab栏时echarts图表缩小在一起（宽高只有100px），解决方法？echarts图表缩小在一起，解决方法

polarisya的博客

08-16

1079

（2）接下来在初始化echarts时，Echarts 图表自适应，echarts 图表大小随窗口变动而自适应，直接给echarts图表加监听事件。（1）在tab的点击事件中使用this.$nextTick，页面加载完毕之后执行延迟回调；（3）在mounted中加载handleClick方法。1.原因：渲染时机不对。

echarts显示和隐藏添加按钮的时候，v-if无法隐藏，使用v-show正常，但是v-show会挤到一起

ZHANG157111的博客

04-20

503

如果使用v-show就正常（但是会挤到一起），v-if的话设置后echarts不会消失。

echarts图表挤在一起的问题（亲测有效）

weixin_42064877的博客

07-05

3617

在引用echarts插件图标过程中，使用了bootstrap和标签切换功能，导致只有第一个导航栏有图标，后面的导航栏没有。经过搜索查找，找到了以下的解决方法：在css里加上这段代码，就能解决导航栏的图标堆在一起的问题。...

vue中使用echarts缩成一团

05-26

在Vue组件模板中定义一个div容器作为Echarts图表的容器，并设置好宽高： ``` ; height: 300px;"> ``` 3. 确认Echarts配置项正确在Vue组件的methods中定义一个函数，用于初始化Echarts图表，并设置相应的配置项：...