隐藏的div应该在js中手动设置隐藏,若在html中设置隐藏会出现上来就隐藏,后面再重新给echarts赋高、宽也是不起作用的情况。解决办法,先给ehcarts赋值高宽,再隐藏。
1. html代码定义echarts:
<div class="mini-splitter" id="mapDiv" vertical="true" allowResize="false" handlerSize="1" style="width:100%;height:100%;font-family:'黑体'">
<div showCollapseButton="true" style="height: 100%;">
<div style="width:100%; height: 100%; margin: 0 auto;" id="map"></div>
</div>
<div size="0%" showCollapseButton="false">
<!-- 列表开始-->
<div id="mapDataGrid" class="mini-datagrid" allowResize="true" showPager="false" multiSelect="true" allowAlternating="false" style="height:100%;width:100%">
<div property="columns">
<div type="indexcolumn"></div>
<div field="year" align="center" headerAlign="center" width="100">年度</div>
</div>
</div>
<!-- 列表结束 -->
</div>
</div>
2.js中设置高宽再隐藏:
$("#map").css({"width":$("#map").width(),"height":$("#map").height()}); //隐藏之前先设置高、宽,防止出现100px
document.getElementById("mapDiv").style.display= "none";
3.显示echarts时再重新赋值高宽:
function showMapCharts(){
$("#map").css({"width":$("#map").width(),"height":$("#map").height()});
var optionMap = {
backgroundColor: '#F9F9F9',
title: {
text: getTitle(),
subtext: '',
x:'center',
textStyle : {
color:'black',
fontFamily:'黑体',
fontSize : 16
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
tooltip : {
trigger: 'item',
formatter:function (params) {
var tipMessage = getTipMessage(params['data'].name,params['data'].value);
return tipMessage;
}
},
visualMap: {
show : true,
x: 'left',
y: 'center',
splitList: mapSplit,
color:['#FFB980', '#C8B2F4', '#32DADD']
},
series: [{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
emphasis: {
areaColor: 'rgba(0,0,0,0)' //鼠标放上去对应区域地图的颜色
}
},
data:mapData,
}]
};
var myChart = echarts.init(document.getElementById('map'));
myChart.clear();
myChart.setOption(optionMap);
}