求指教， html 的切换功能实现，以及为何会导致同时加载的 div 之一填不满页面

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Dive into HTML5

这是一个创建于 1628 天前的主题，其中的信息可能已经有所发展或是发生改变。

前端小白请教，两个 div 同时加载，其中一个初始隐藏 display=none，同时做俩个按钮切换两个 div，最终展示的效果却使初始隐藏的子 div 缩小了很多，解决方案已有，求为何会这样？

<html> <head> <meta charset="utf-8"> <title>数据可视化</title> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body>

<!-- Dom1:bar_chart -->
<div style="width:100%;height:400px;">
    <div id="map" style="width: 100%;height:100%;"></div>
    <div id="bar" style="width: 100%;height:100%;display: none;"></div>
    <button class="shift-button" id="map-button" type="button" onclick="useMap()" style="background-color: #FF1815">
        条形图
    </button>
    <!--使用柱状图加载-->
    <button class="shift-button" id="bar-button" type="button" onclick="useBar()" style="background-color: grey;margin-left: 0.2rem">
        折线图
    </button>
</div>

<script type="text/javascript">
    // 基于准备好的 dom，初始化 echarts 实例
    // var echarts = require('echarts');
    var myChart = echarts.init(document.getElementById('map'));

    // 空图表
    var option = {
        title: {
            text: '同时间各地区业务数据'
        },
        tooltip: {},
        legend: {
            data:['业务量']
        },
        xAxis: {
            data: [1,2,3,4,5,6,7]
        },
        yAxis: {},
        series: [{
            name: '业务量',
            type: 'bar',
            data: [1,2,3,4,5,6,7]
        }]
    };

    myChart.setOption(option);

    var lineChart = echarts.init(document.getElementById('bar'));
    
        // 指定图表的配置项和数据
        var lineOption = {
            title: {
                text: '地区业务量数据'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: [1,2,3,4,5,6]
            },
            yAxis: {},
            series: [{
                name: '业务量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        lineChart.setOption(lineOption);

    // 基于准备好的 dom，初始化 echarts 实例
    // var echarts = require('echarts');
    
</script>

<script>
    //切换地图
    function useMap(){
        document.getElementById("map").style.display="";
        document.getElementById("map-button").style.backgroundColor="#FF1815";
        document.getElementById("bar").style.display="none";
        document.getElementById("bar-button").style.backgroundColor="grey";


        //document.getElementById("line").style.display="none";
    }

    //切换柱状图
    function useBar(){
        document.getElementById("map").style.display="none";
        document.getElementById("map-button").style.backgroundColor="grey";
        document.getElementById("bar").style.display="";
        document.getElementById("bar-button").style.backgroundColor="#FF1815";
        //document.getElementById("line").style.display="none";
        
    }
</script>

</body> </html>

目前尚无回复

tele ment byid div