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

╰半夏微凉° 2022-01-11 09:23 735阅读 0赞

代码：

![44.jpg][]

问题再现步骤:

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

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

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

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

分析产生的原因:

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

![45.jpg][]

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

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

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

![46.jpg][]

会发发现此时

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

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

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

--------------------

**如何解决该问题了?**

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

![47.jpg][]

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

![48.jpg][]

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

![50.jpg][]

**width和height都变成了100px了**

--------------------

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

![49.jpg][]

但有时我们需要做到自适应不得不去设置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>

转载于:https://blog.51cto.com/11871779/2399706

[44.jpg]: https://s1.51cto.com/images/20190524/1558686044341049.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[45.jpg]: https://s1.51cto.com/images/20190524/1558686379636951.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[46.jpg]: https://s1.51cto.com/images/20190524/1558686541206065.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[47.jpg]: https://s1.51cto.com/images/20190524/1558687058482313.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[48.jpg]: https://s1.51cto.com/images/20190524/1558688007573926.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[50.jpg]: https://s1.51cto.com/images/20190524/1558688331679862.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[49.jpg]: https://s1.51cto.com/images/20190524/1558688132697370.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=