隐藏元素之后改变窗体大小时echarts显示异常问题
栏目: JavaScript · 发布时间: 5年前
内容简介：代码：问题再现步骤:
代码：
问题再现步骤:
第一步: 打开页面，能够正常显示图表
第二步: 点击隐藏按钮，让box隐藏掉，如果此时直接点击显示按钮，图表依旧可以
正常显示，没毛病。重点是，如果此时点击完了隐藏，不点击显示，而是拖动窗口大小
再来点击显示按钮，就会发现图表显示不出来，为什么会显示不出来了?
分析产生的原因:
1 点击隐藏按钮以后的，此时还没有拖到窗口大小
会发现box的确是隐藏了，display：none;
canvas标签内的行内样式有width:623px,height:500px;
2 此时开始拖动窗口大小，改变窗口的大小，再来观察
会发发现此时
canvas标签内的行内样式变成了 width：0px, height:100px；
这就是为什么此时再来点击显示按钮时，图表显示不出来的问题所在，因为此时画布的width已经为0，
自然而然就显示不出来,如果此时再拖动窗口大小，图表就又会显示出来。
如何解决该问题了?
解决思路就是在点击显示按钮以后，触发窗口大小改变事件就可以完成
出现该问题的关键还在于一开始我们并没有给bar元素设置width属性
如果把bar设置成width:100%,height:100%;就会出现如下问题:
width和height都变成了100px了
如果一开就给bar元素就设置固定宽度和高度，就不会文章所指的问题了
但有时我们需要做到自适应不得不去设置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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- WPF中窗体最大化问题处理
- c# – Windows窗体应用中的非抗锯齿手形光标！
- WPF中自定义标题栏时窗体最大化处理之WindowChrome
- 在 Visual Studio 2019 中为 .NET Core WinForm App 启用窗体设计器
- CSS 基础：块级元素、行内元素、替换元素、非替换元素
- CSS 技巧篇(六)：display设置元素为行内元素时，元素之间存在间隙问题
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Algorithms on Strings, Trees and Sequences
Dan Gusfield / Cambridge University Press / 1997-5-28 / USD 99.99
String algorithms are a traditional area of study in computer science. In recent years their importance has grown dramatically with the huge increase of electronically stored text and of molecular seq......一起来看看 《Algorithms on Strings, Trees and Sequences》 这本书的介绍吧!
