解决Echarts 显示隐藏后宽度高度变小的问题
更新时间：2020年07月19日 14:07:32 作者：心中有大牛
这篇文章主要介绍了解决Echarts 显示隐藏后宽度高度变小的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Echarts 是现在程序员做图表用到比较多的一种技术，前段时间，我就用了一下Echarts,我原本是将饼图先隐藏，然后点击按钮让它再显示出来，但是再显示时，饼状图出现了问题，它变得特别小，根本不能用，然后，就此，我找了下原因
原因：Echarts 图表是根据你定义的div 的样式来确定图表的大小，当图表隐藏时，Echarts会找不到div的宽和高，再次显示时它会给自己一个非常小的默认宽高值，所以在隐藏显示后会发现它变得非常非常的小。
解决：将初始化放在click事件里，给一个flag 控制显示隐藏。
补充知识：echarts图表隐藏之后再展示出现变形
问题描述：使用echarts制作了仪表盘的图表，起初图标在页面中隐藏，点击某一按钮切换时，显示图表，发现图表的宽高被缩小了，异常显示，如图：
解决方法：
1.在完成绘画echarts后添加代码：$(window).resize(myChart.resize);
var dom = document.getElementById("jindu");
var myChart = echarts.init(dom);
option = {
......
}
myChart.setOption(option);
$(window).resize(myChart.resize);
2.在图表要显示的地方添加代码：$(window).trigger(‘resize');
if(gmFlag == 1){
$(".allscore").show();
$(window).trigger('resize');
}
这样来回切换的时候图表的大小就不会改变了，如图：
以上这篇解决Echarts 显示隐藏后宽度高度变小的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在需求开发阶段,鉴于项目采用了antd作为基础组件库,确保组件外观与antd一致变得尤为重要,这包括颜色、字体大小及尺寸等样式的统一,然而,截至当前antd-vue尚未实现这一便捷的CSS变量特性,但理解其背后的实现机制后,我们可以自行构建这一功能,需要的朋友可以参考下2024-07-07
文件上传的功能实现是我们做Web应用时候最为常见的应用场景,下面这篇文章主要给大家介绍了关于如何在Vue3中实现文件上传功能结合后端API的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
这篇文章主要介绍了vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决方案，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-09-09
这篇文章主要为大家介绍了vue2与vue3的生命周期对比，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
vue-cli创建项目时由esLint校验导致报错或警告的问题及解决
这篇文章主要介绍了vue-cli创建项目时由esLint校验导致报错或警告的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
我们都知道Electron项目分为了主进程和渲染进程,主进程其实就是我们的Electron,渲染进程就相当于我们的Vue项目,下面这篇文章主要给大家介绍了关于vue项目使用electron进行打包操作的全过程,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了VUE Element-UI多级菜单动态渲染的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Vue 3.0 项目创建过程，首先要确保电脑上已安装node.js,确保已安装 Vue CLI,本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2024-04-04
这篇文章主要为大家介绍了ant-design-vue按钮样式扩展方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
本文章向大家介绍vue组件中的数据共享，主要包括vue组件中的数据共享使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下2022-11-11
最新评论