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

栏目: JavaScript · 发布时间: 6年前

内容简介：代码：问题再现步骤:

代码：

问题再现步骤:

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

第二步: 点击隐藏按钮，让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%，这就是文中所会出现的问题了。

完成测试代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
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;
}
</style>
</head>
<body>
<div class="box">
<div id="bar"></div>
</div>
<div class="btn">
<button>隐藏</button>
<button>显示</button>
</div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
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');
});
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

程序设计方法（中文版）

Matthias Fellisen / 黄林鹏、朱崇恺 / 人民邮电出版社 / 2003-12 / 49.00元

《程序设计方法》以Scheme语言为基础介绍计算和程序设计的一般理论和实践。《程序设计方法》由8个部分和7个独立的章节（第8、13、18、24、29、33、38章）组成。8个部分主要讨论程序设计，独立章节则介绍一些与程序设计和计算相关的话题。《程序设计方法》第1至第3部分介绍了基于数据驱动的程序设计基础。第4部分介绍了程序设计中的抽象问题。第5部分和第6部分是与递归及累积相关的内容。《程序设计方法......一起来看看《程序设计方法（中文版）》这本书的介绍吧!

码农工具