快上网建站品牌

13518219792

隐藏元素之后改变窗体大小时echarts显示异常问题-创新互联

代码：

站在用户的角度思考问题，与客户深入沟通，找到丘北网站设计与丘北网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、虚拟主机、企业邮箱。业务覆盖丘北地区。

隐藏元素之后改变窗体大小时echarts显示异常问题

问题再现步骤:

第一步:  打开页面，能够正常显示图表

第二步:  点击隐藏按钮，让box隐藏掉，如果此时直接点击显示按钮，图表依旧可以

正常显示，没毛病。重点是，如果此时点击完了隐藏，不点击显示，而是拖动窗口大小

 再来点击显示按钮，就会发现图表显示不出来，为什么会显示不出来了?

分析产生的原因:

1 点击隐藏按钮以后的，此时还没有拖到窗口大小

隐藏元素之后改变窗体大小时echarts显示异常问题

会发现box的确是隐藏了，display：none;

canvas标签内的行内样式有width:623px,height:500px;

2 此时开始拖动窗口大小，改变窗口的大小，再来观察

隐藏元素之后改变窗体大小时echarts显示异常问题

会发发现此时

canvas标签内的行内样式变成了 width：0px, height:100px；

这就是为什么此时再来点击显示按钮时，图表显示不出来的问题所在，因为此时画布的width已经为0，

自然而然就显示不出来,如果此时再拖动窗口大小，图表就又会显示出来。

如何解决该问题了?

解决思路就是在点击显示按钮以后，触发窗口大小改变事件就可以完成

隐藏元素之后改变窗体大小时echarts显示异常问题

出现该问题的关键还在于一开始我们并没有给bar元素设置width属性

隐藏元素之后改变窗体大小时echarts显示异常问题

如果把bar设置成width:100%,height:100%;就会出现如下问题:

隐藏元素之后改变窗体大小时echarts显示异常问题

width和height都变成了100px了

如果一开就给bar元素就设置固定宽度和高度，就不会文章所指的问题了

隐藏元素之后改变窗体大小时echarts显示异常问题

但有时我们需要做到自适应不得不去设置100%，这就是文中所会出现的问题了。

完成测试代码:







*{
margin: 0;
padding: 0;
}
.box{
height: 500px;
background-color: #00B83F;
}
#bar{
height: 100%;
}
.btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: rgba(0, 0, 0, .5);
z-index: 999;
}
var myChart = null; initChart(); function initChart() { console.log('initChart'); if(!myChart){ myChart = echarts.init(document.getElementById('bar')); } // 设置参数配置 var option = { title: { text: '柱状图' }, tooltip: {}, legend: { data: ['模拟数据'] }, xAxis: { data: ['数学', '语文', '英语', '体育', '高数', '美术', '音乐', '思想', 'aa', 'bb', 'cc'] }, yAxis: { splitLine: { show: false // 是否显示y轴的分割线 默认是true } }, series: { type: 'bar', // 表示的是柱状图 data: [98, 80, 54, 60, 64, 89, 76, 88, 99, 55, 66], name: '模拟数据', //barWidth: 30, } }; // 显示图表 myChart.setOption(option); $(window).resize(myChart.resize); } // 隐藏 $('button:eq(0)').click(function(){ $('.box').hide(); }); // 显示 $('button:eq(1)').click(function(){ $('.box').show(); $(window).trigger('resize'); });

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


网页题目：隐藏元素之后改变窗体大小时echarts显示异常问题-创新互联
本文地址：http://csdahua.cn/article/dpjddp.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯

行业动态

企业网站建设的重要性！

现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...

服务项目

联系吧 在百度地图上找到我们

电话：13518219792

如遇占线或暂未接听请拨：136xxx98888

业务咨询 技术咨询 售后服务
网站制作
成都网站制作
手机网站制作
成都网站制作
网站制作公司
网站建设
旅游网站建设方案
网站建设开发
遂宁网站建设
营山网站建设
网站设计
做网站设计
专业网站设计
成都网站设计
成都网站设计
联系我们
电话：13518219792
邮箱：631063699@qq.com
地址：成都青羊区锦天国际1002号
网址：www.csdahua.cn

微信二维码

Copyright © 2002-2023 www.csdahua.cn 快上网建站品牌 QQ：244261566 版权所有 备案号：蜀ICP备19037934号