如下圖，兩個圖表的高度不一致，怎麼調整嗯？？
問題：
解決：
//直角座標系內繪圖網格
grid : {
left : '3%', //組件離容器左側的距離
right : '4%',
bottom : '0%',
containLabel : true //grid 區域是否包含座標軸的刻度標籤
},
jsp全部代碼：（這一句代碼在最後）
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/WEB-INF/views/common/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首頁</title>
<%@ include file="/WEB-INF/views/common/refOutResource.jsp"%>
<script type="text/javascript"
src="${basePath}libs/js/echarts/echarts.js"></script>
<script type="text/javascript"
src="${basePath}libs/js/echarts/echarts.min.js"></script>
<!-- 日期控件start -->
<script type="text/javascript"
src="${basePath}libs/js/form/datePicker/WdatePicker.js"></script>
<!-- 日期控件end -->
</head>
<body style="height:100%;width:100%">
<div
style="width:100%;height:100%;overflow-x:hidden;margin:auto auto auto auto;">
<!-- <table width="100%"> -->
<%-- <tr>
<td style="padding:10px 0px 0px 20px;">統計時間： <input type="text"
name="startDate" id="startDate" value="${startDate}" class="date" />-<input
type="text" id="endDate" value="${endDate}" name="endDate"
class="date" /> <input type="button"
onclick="searchHandler()" value="查詢" /> <input id="Week"
name="Week" type="button" value="本週" onclick="searchHandlerWeek()" />
<input id="Month" name="Month" type="button" value="本月"
onclick="searchHandlerMonth()" /> <input id="Quarter"
name="Quarter" type="button" value="本季度"
onclick="searchHandlerQuarter()" />
</td>
</tr> --%>
<!-- </table> -->
<div style="width:100%;">
<div id='pie' style="width: 50%; height: 300px; float:left; margin : 30px auto auto auto""></div>
<div style="width: 50%; height: 300px; float:right; margin : 30px auto auto auto" >
<div class="box1" whiteBg="true" style="height:25%">
<table class="tableStyle" formMode="view" >
<tr>
<td style="font-size:20px">機器總數：</td>
<td colspan=5 style="font-size:20px">${terminalTotal}</td>
</tr>
<tr>
<td width="5%" style="font-size:20px">在線：</td>
<td width="20%" style="font-size:20px">${onlineSum}</td>
<td width="15%" style="font-size:20px">離線：</td>
<td width="15%" style="font-size:20px">${offlineSum}</td>
<td width="15%" style="font-size:20px">告警：</td>
<td width="15%" style="font-size:20px">${alarmSum}</td>
</tr>
<tr>
<td width="25%" style="font-size:20px">最後安全覈查時間：</td>
<td colspan=5 style="font-size:20px">${lastSafeTime}</td>
</tr>
<tr>
<td style="font-size:20px">檢查臺數：</td>
<td colspan=5 style="font-size:20px">${checkNum}</td>
</tr>
<tr>
<td style="font-size:20px">接收臺數：</td>
<td style="font-size:20px">${receiveNum}</td>
<td style="font-size:20px">反饋臺數：</td>
<td colspan=3 style="font-size:20px">${backNum}</td>
</tr>
</table>
</div>
</div>
<div>
<div id='lines' style="width: 50%; height: 300px; float:left "></div>
<div id='columnar' style="width: 50%; height: 300px; float:right "></div>
</div>
<script type="text/javascript">
/* function customHeightSet(contentHeight){
$("#openContent").height(contentHeight);
} */
//本週start
/* var week;
function searchHandlerWeek() {
week = $("#Week").val(); // 根據ID 獲取值
window.location.href = "${basePath}terwarning/terminal/terminalTotal.view?";
}
//本週end
//本月start
var month;
function searchHandlerMonth() {
week = $("#Month").val(); // 根據ID 獲取值
window.location.href = "${basePath}terwarning/terminal/terminalTotal.view?";
}
//本月end
//本季度start
var quarter;
function searchHandlerQuarter() {
week = $("#Quarter").val(); // 根據ID 獲取值
window.location.href = "${basePath}terwarning/terminal/terminalTotal.view?";
}
//本季度end
var startDate;
var endDate;
function searchHandler() {
startDate = $("#startDate").val(); // 根據ID 獲取值
endDate = $("#endDate").val(); // 根據ID 獲取值
window.location.href = "${basePath}terwarning/terminal/terminalTotal.view?startDate="
+ startDate + "&endDate=" + endDate;
} */
//餅狀圖start
var pieCharts = echarts.init(document.getElementById('pie'));
option = {
top : '10%',
//backgroundColor : '#2c343c',
title : {
text : '註冊終端情況',
//x:'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
toolbox : { //工具欄(圖片下載)
feature : {
saveAsImage : {}
},
right : '5%',
},
legend : {
//orient : 'vertical',
/* left : 'center',*/
//right : '30%', //
data : [ '在線', '告警', '離線' ]
},
color : [ '#8fc31f', '#00ccff', '#f35833', ],
series : [ {
name : '狀態',
type : 'pie',
radius : '55%',
data : [ {
value : ${onlineSum},
//value : ${taskOnlineData},
//value : 300,
name : '在線'
}, {
value : ${offlineSum},
//value : ${taskOfflineData},
//value : 400,
name : '離線'
}, {
value : ${alarmSum},
//value : ${taskAlarmData},
//value : 300,
name : '告警'
}, ]
} ]
};
pieCharts.setOption(option);
//餅狀圖end
//柱狀圖start
var dom = document.getElementById("columnar");
var myChart = echarts.init(dom);
var app = {};
option = null;
// app.title = '嵌套環形圖';
option = {
title : {
text : '歷史安全覈查',
// x: 'center'
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'cross',
crossStyle : {
color : '#999'
}
}
},
toolbox : {
feature : {
saveAsImage : {
show : true
}
}
},
color : [ '#8fc31f', '#f35833', '#00ccff' ],
legend : {
data : [ '覈查臺數', '接收臺數', '反饋臺數' ],
//bottom: 0
},
toolbox : { //工具欄(下載)
feature : {
saveAsImage : {}
},
right : '5%', //下載圖標距右邊框5%
},
grid : {
left : '3%',
right : '4%',
bottom : '0%',
containLabel : true
},
xAxis : [ {
/* axisLabel : {
rotate : 5,
interval : 0
}, */
type : 'category',
data : [ ${taskCheckSafeName} ],
axisPointer : {
type : 'shadow'
}
} ],
yAxis : [ {
type : 'value',
name : '臺數',
min : 0,
//max: 50,
//interval: 400,
axisLabel : {
formatter : '{value}'
},
nameLocation : 'center',
nameGap : 65
} ],
series : [ {
name : '覈查臺數',
type : 'bar',
data : ${checkNumlist},
barWidth : '25%'
}, {
name : '接收臺數',
type : 'bar',
data : ${receiveNumlist},
barWidth : '25%'
}, {
name : '反饋臺數',
type : 'bar',
data : ${backNumlist},
barWidth : '25%'
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
//柱狀圖end
//折線圖start
var lines = echarts.init(document.getElementById('lines'));
//lines.showLoading(); //加載動畫
linesSum = {
//座標軸兩邊留白策略
//boundaryGap : ['20%','0%'],
title : {
text : '歷史告警'
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ ${legend} ]
},
toolbox : {
show : true,
feature : {
saveAsImage : {
show : true
}
},
right : '5%', //圖片下載距離
},
calculable : true,
//直角座標系內繪圖網格
grid : {
left : '3%', //組件離容器左側的距離
right : '4%',
bottom : '0%',
containLabel : true //grid 區域是否包含座標軸的刻度標籤
},
xAxis : [ {
type : 'category',
boundaryGap : false,
data : [ ${xAxis} ]
} ],
yAxis : [ {
type : 'value'
} ],
series : [ ${series} ]
};
lines.setOption(linesSum);
//折線圖end
</script>
</div>
</body>
</html>