<!DOCTYPE html>
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<title></title>
|
<meta charset="utf-8" />
|
|
<!--<script th:src="@{${pubzyWebRoot} + 'echarts/echarts.min-3.0.js'}" type="text/javascript"></script>-->
|
<script src="../../js/echarts.min.4.1.js"></script>
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/assets/js/jquery.min.js'}"></script>
|
|
</head>
|
<style>
|
#biaoti{
|
text-align: center;
|
color: white;
|
font-weight: bold;
|
}
|
</style>
|
<body>
|
<div id="biaoti">
|
|
</div>
|
<div id="div_DQHYSC" style="width: 100%;height: 200px">
|
</div>
|
|
</body>
|
</html>
|
<script type="text/javascript">
|
jQuery(document).ready(function () {
|
var datalegend = [];
|
var data = [];
|
var radarData = ["农渔业区", "港口航运区", "工业与城镇用海区", "矿产与能源区", "旅游休闲娱乐区", "海洋保护区", "特殊利用区", "保留区"];
|
var serieData = [2550.812784, 258.284858, 73.478986, 21.220515, 68.951457, 1852.791718, 12.2958, 427.812438];
|
for (var i = 0; i < serieData.length; i++) {
|
if (parseFloat(serieData[i]) == 0 || data.indexOf(parseFloat(serieData[i]))>=0) continue;
|
var a = parseFloat(serieData[i]);
|
var k=i;
|
for (var j = 0; j < serieData.length; j++) {
|
if (a <= parseFloat(serieData[j]) || parseFloat(serieData[j]) == 0 || data.indexOf(parseFloat(serieData[j]))>=0) { continue; }
|
else {
|
a = parseFloat(serieData[j]);
|
k = j;
|
}
|
}
|
data.push(a);
|
datalegend.push(radarData[k]);
|
if (a < parseFloat(serieData[i])) i -= 1;
|
}
|
var totalCount = 0;
|
for (var i = 0; i < data.length; i++) {
|
totalCount += data[i];
|
}
|
$("#biaoti").html("<span class='titleSpan' >2012年海洋功能区划"+"(" + (totalCount).toFixed(1) + "万公顷)"+"</span>");
|
var divHeight = ((600) * 0.52 - 160);
|
var marginTop = ((600) * 0.52);
|
var marginleft = $("#div_DQHYSC").width();
|
|
var width = 85;
|
var left = (160+50);
|
var width1 = 80;
|
var top = -26;
|
var color = ["#68ccf0", "#e5cf0d", "#a6fd3d", "#fdcf48", "#ed8278", "#43d085", "#c14189", "#da6150", "#0ba3a5", "#af64e7"];
|
//var color = ["#8C86B6", "#FFBB00", "#FFA6A6", "#DE5524", "#A6F9FF", "#6363FF", "#A7FFA6", "#00D7FF", "#0ba3a5", "#af64e7"];
|
var CircleHtml = "";
|
CircleHtml += "<div style='width:100%;height:" + divHeight + "px;position:absolute;top:36px;left:15px;'>";
|
for (var i = 0; i < data.length; i++) {
|
CircleHtml += "<div style='width:100%;height:" + (divHeight / data.length) + "px;cursor:pointer;' onclick='QyghChart1ClickEvent(\"" + datalegend[i] + "\")'>";
|
CircleHtml += "<div style='width:" + (width + 170) + "px;height:100%;position:relative;top:1px;margin-left:" + (marginleft - (140 + 170)) / 2 + "px;'>";
|
CircleHtml += "<div style='width:" + width + "px;height:" + width + "px;position:absolute;top:"+top+"px;left:" + (left-width/2) + "px;border:1px solid #ccc;border-radius:" + (width / 2) + "px;transform:rotateX(105deg);box-shadow:" + color[i] + " 0px 5px 15px inset;'></div>";
|
|
CircleHtml += "<span style='text-decoration:underline;width:100px;height:15px;position:absolute;top:5px;left:5px;color:" + color[i] + ";font-size:12px;text-align:left;'>" + (datalegend[i]).toString() + "</span>";
|
CircleHtml += "<span style='width:" + ((datalegend[i]).toString().length > 6 ? (left - 105 - (width / 2) - 8) : (left - 105 - (width / 2) - 8) + 15) + "px;height:2px;position:absolute;top:14px;left:" + ((datalegend[i]).toString().length > 6 ? (left - 105 - 2) : (left - 105 - 4)-15) + "px;box-shadow:" + color[i] + " 0px 0px 15px inset;'></span>";
|
CircleHtml += "<span style='width:100px;height:20px;position:absolute;top:5px;left:178px;color:" + color[i] + ";font-size:12px;'>" + (data[i]> 10000 ? (data[i] / 10000).toFixed(1) + "亿" : data[i].toFixed(1)+"万") + "公顷</span>";
|
CircleHtml += "</div>";
|
CircleHtml += "</div>";
|
width += 15;
|
top -= 8;
|
width1 -= 10;
|
//left = (85/2+170)-width/2;
|
}
|
CircleHtml += "</div>";
|
$("#div_DQHYSC").append(CircleHtml);
|
|
});
|
|
|
</script>
|
