V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dive into HTML5
http://diveintohtml5.org/
6167
V2EX  ›  HTML

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

  •  
  •   6167 · 2020-06-19 14:37:23 +08:00 · 1584 次点击
    这是一个创建于 742 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前端小白请教,两个 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>
    目前尚无回复
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2086 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 01:35 · PVG 09:35 · LAX 18:35 · JFK 21:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.