如何解决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-cil之axios的二次封装与proxy反向代理使用说明
这篇文章主要介绍了vue-cil之axios的二次封装与proxy反向代理使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了浅谈Vue初学之props的驼峰命名，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
vue在取对象长度length时候出现undefined的解决
这篇文章主要介绍了vue在取对象长度length时候出现undefined的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
在现代Web应用程序中,数据导出到Excel格式是一项常见的需求,Vue.js是一种流行的JavaScript框架,允许我们构建动态的前端应用程序,本文将介绍如何使用Vue.js和xlsx组件轻松实现Excel数据导出功能,需要的朋友可以参考下2023-10-10
这篇文章主要为大家介绍了JavaScript获取echart曲线上任意点位的值详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
vue + typescript + video.js实现 流媒体播放 视频监控功能
视频才用流媒体，有后台实时返回数据， 要支持flash播放， 所以需安装对应的flash插件。这篇文章主要介绍了vue + typescript + video.js 流媒体播放 视频监控,需要的朋友可以参考下2019-07-07
这篇文章主要为大家介绍了Yarn与Lerna管理monorepo的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了Element-UI 使用el-row 分栏布局的教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
在实际业务中，我们常用图表来做数据统计，数据展示，数据可视化等比较直观的方式来达到一目了然的数据查看，但在大屏开发过程中，常会因为适配不同屏幕而感到困扰，下面我们来解决一下这个不算难题的难题2022-11-11
本文主要介绍了使用ElementUI写一个前端分页查询的实例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
最新评论