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

时间: 2020-08-20来源：V2EX

前景提要

前端小白请教，两个 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>  <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>

科技资讯:

科技学院:

科技百科:

科技书籍:

网站大全:

软件大全:

更多数据

热门排行

咨询电话（周一至周五9：00-18：00）