如何解决ECharts图表切换后缩成一团的问题
更新时间：2022年10月22日 09:55:58 作者：King汀
这篇文章主要介绍了如何解决ECharts图表切换后缩成一团的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
解决ECharts图表切换后缩成一团问题
问题描述
解决办法
（1）项目使用vue，则在按钮切换的方法中加上如下代码：
this.$nextTick(function () {
var myEvent = new Event('resize');
window.dispatchEvent(myEvent);
});
（2）项目使用原生js，则在切换方法最后加上如下代码：
var myEvent = new Event('resize');
window.dispatchEvent(myEvent);
注意：需要写在如下方法中
window.addEventListener("load", function () { })
window.onload = function(){ }
vue+echarts使用时出现重大 bug（图缩成一团）
问题出现原因
我在本地引入了echarts
把当前页面做成公共的组件给其他页面使用。（目前为止没有问题）
直接打开当前页面显示正常：（下图正常）
但是当引入到别的页面（问题出现）
（下图是问题图片）缩成一团
原因
在组件显示的时候用了v-show，会给echarts画布默认一个宽度和高度
改成 v-if 就没有问题了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-router两种模式区别及使用注意事项,结合实例形式详细分析了vue-router两种模式hash模式与history模式的区别、用法与操作注意事项,需要的朋友可以参考下2019-08-08
在本文中我们给大家整理了一篇关于Vue表单控件绑定的相关知识点内容，有需要的朋友们参考下。2019-02-02
以前我们经常在react中使用jsx,现在我们在vue中也是用jsx,下面这篇文章主要给大家介绍了关于在vue中写jsx的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
ref 和 reactive 是 Composition API 中用来声明响应式数据的两个核心函数,在 Vue 3 中,使用 setup 语法糖可以更简洁地使用这些功能,本文将探讨如何使用 ref 和 reactive 来管理状态,并解释它们之间的区别,需要的朋友可以参考下2024-09-09
这篇文章手把手教你拿捏vue cale()计算函数使用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
Tailwind CSS是一个流行的前端CSS框架,它基于原子设计原则,提供了一套预构建的CSS样式类,旨在帮助开发者快速地创建响应式、可定制的用户界面,本文给大家介绍了Vue2中使用tailwindCss的详细教程,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了详解使用mpvue开发github小程序总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了vue在外部方法给下拉框赋值后不显示label的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了如何在vue 中使用柱状图 并自修改配置，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
一开始我还以为vue的路由只能用在工程化的项目里面,其实不然,下面这篇文章主要给大家介绍了关于前端配合后端实现Vue路由权限的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
最新评论