隱藏元素以後改變窗體大小時echarts顯示異常問題

時間 2021-01-30

標籤 javascript css html java jquery canvas c# echarts ide 測試欄目職業生涯简体版

原文原文鏈接

代碼：
javascript

問題再現步驟:css

第一步: 打開頁面，可以正常顯示圖表html

第二步: 點擊隱藏按鈕，讓box隱藏掉，若是此時直接點擊顯示按鈕，圖表依舊能夠java

正常顯示，沒毛病。重點是，若是此時點擊完了隱藏，不點擊顯示，而是拖動窗口大小
jquery

再來點擊顯示按鈕，就會發現圖表顯示不出來，爲何會顯示不出來了?
canvas

分析產生的緣由:c#

1 點擊隱藏按鈕之後的，此時尚未拖到窗口大小echarts

會發現box的確是隱藏了，display：none;ide

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>