156 lines
6.5 KiB
Plaintext
156 lines
6.5 KiB
Plaintext
|
|
@{
|
|
ViewBag.Title = "传染病数据地图";
|
|
}
|
|
|
|
<table style="width:100%" class="t1">
|
|
<tr>
|
|
<td width="100px" class="ltd">开始日期：</td>
|
|
<td width="120px" class="rtd"><input id="bdt" /></td>
|
|
<td width="100px" class="ltd">结束日期：</td>
|
|
<td width="120px" class="rtd"><input id="edt" /></td>
|
|
<td width="100px" class="ltd">病种：</td>
|
|
<td width="120px" class="rtd"><input id="bz" type="text" /></td>
|
|
<td class="rtd"><input id="cx" value="查询" type="button" class="l-button" /></td>
|
|
</tr>
|
|
</table>
|
|
<div style="width:800px;float:left;height:250px; background-color: #ffffff;
|
|
box-shadow: 0px 4px 12px rgba(34, 25, 25, 0.2);
|
|
margin: 0.25rem;
|
|
margin-top: 0.5rem;" id="chart"></div>
|
|
<div style="clear:both"></div>
|
|
<div id="grid"></div>
|
|
@section scripts{
|
|
<script type="text/javascript" src="@Url.Content("~/Scripts/echarts.min.js")"></script>
|
|
<script type="text/javascript" src="@Url.Content("~/Scripts/bmap.js")"></script>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=b7SC7Zn2Zw9kmxnycqPt4xeH"></script>
|
|
<script src="@Url.Content("~/Scripts/macarons.js")"></script>
|
|
<script type="text/javascript">
|
|
|
|
var echart;
|
|
var geoCoordMap = {};
|
|
$(function () {
|
|
$("#bz").ligerComboBox({url:"@Url.Action("getbz")",valueField : 'bzmc', textField: 'bzmc'
|
|
});
|
|
$("#bdt").ligerDateEditor({ width: 100 });
|
|
$("#edt").ligerDateEditor({ width: 100 });
|
|
echart = echarts.init(document.getElementById("chart"), "macarons");
|
|
var sftjoption = {
|
|
title: {
|
|
text: "传染病地区发病分析"
|
|
}
|
|
};
|
|
$.ajax({
|
|
url: "@Url.Action("getxzgeo")", type: "post", dataType: "json",
|
|
success: function (data) {
|
|
geoCoordMap = data;
|
|
}
|
|
});
|
|
echart.setOption(sftjoption);
|
|
$("#grid").ligerGrid({
|
|
title: "传染病地区发病分析",
|
|
width: "98%", height: "98%", data: { Rows: [] },
|
|
columns: [
|
|
{ name: "dqname", display: "地区名称", width: 200, align: "left" },
|
|
{ name: "fbrs", display: "发病人数", width: 200, align: "right" }
|
|
], usePager: false
|
|
|
|
});
|
|
$("#cx").bind("click", function () {
|
|
|
|
$.ajax({
|
|
url: "@Url.Action("getcrbdqfx")", type: "post", datatType: "json", data: { bdt: $("#bdt").val(), edt: $("#edt").val(), bz: liger.get("bz").getValue() }
|
|
, success: function (data) {
|
|
$.ligerDialog.closeWaitting();
|
|
data = $.parseJSON(data);
|
|
liger.get("grid").set("data", data);
|
|
var x = [];
|
|
var y = [];
|
|
var datas = [];
|
|
for (var i = 0; i < data.Rows.length; i++) {
|
|
x.push(data.Rows[i].dqname);
|
|
y.push(data.Rows[i].fbrs);
|
|
datas.push({ name: data.Rows[i].dqname, value: data.Rows[i].fbrs });
|
|
}
|
|
var convertData = function (datas) {
|
|
var res = [];
|
|
for (var i = 0; i < datas.length; i++) {
|
|
var geoCoord = geoCoordMap[datas[i].name];
|
|
if (geoCoord) {
|
|
res.push({
|
|
name: datas[i].name,
|
|
value: geoCoord.concat(datas[i].value)
|
|
});
|
|
}
|
|
}
|
|
return res;
|
|
};
|
|
var op = {
|
|
title: {
|
|
text: "传染病地区发病分析",
|
|
subtext: $("#bdt").val() + '-' + $('#edt').val()
|
|
}
|
|
,
|
|
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
bmap: {
|
|
center: [116.310048, 37.464326],
|
|
zoom: 10,
|
|
roam: true
|
|
},
|
|
|
|
series: [
|
|
{
|
|
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'bmap',
|
|
data: convertData(datas.sort(function (a, b) {
|
|
return b.value - a.value;
|
|
})),//前5位
|
|
symbolSize: function (val) {
|
|
return val[2]/4;//点扩散的大小
|
|
},
|
|
rippleEffect: {
|
|
brushType: 'stroke'
|
|
},
|
|
hoverAnimation: true,
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'right',
|
|
show: true
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#555',
|
|
shadowBlur: 10,
|
|
shadowColor: '#333'
|
|
}
|
|
},
|
|
zlevel: 1
|
|
|
|
}
|
|
]
|
|
};
|
|
echart.setOption(op);
|
|
|
|
|
|
}
|
|
, error: function (d) {
|
|
$.ligerDialog.closeWaitting();
|
|
$.ligerDialog.alert(d.responseText);
|
|
}
|
|
, beginSend: function () {
|
|
$.ligerDialog.waitting("正在分析请稍后……");
|
|
}
|
|
});
|
|
|
|
});
|
|
});
|
|
</script>
|
|
}
|
|
|