<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title><link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div style='position:relative; width:100%; height:100%;'>
<div class="echarts" id="echarts-map-chart" style="width:100%;height: 100%;position:absolute; z-index:2;">
</div>
</div>
<script src="~/Scripts/echart/echarts.js"></script><script src="~/Scripts/jquery.tmpl.js"></script>
<script type="text/x-jquery-tmpl" id="teamerTemplate">
</script>
<script>
var allData = null;
var myData = null;
var bmapChart = null;
var hosData = null;
var mapOption = null;
var parOption = null;
var blineChart = null;
var CountryOptions = [];
var CurrentName = null;
var CountryPos = [];
$(function () {
var newbeadhouse = JSON.parse($('#beadhouses').val());
var newcountrypos = JSON.parse($('#countrypos').val());
func_InitMapData();
func_InitEchart2();
showPar("");
});
//数据
function func_InitMapData() {
myData = [
{ name: '拟建设1', value: [118.794756, 36.822932, 1003, '拟建'], pos: '寿光市', bed: 1403, phone: '0536333', time: '2025-6', check: '450', add: '潍坊寿光市圣城街', desc: '市政府确设', charge: '张三', area: '392亩' },
{ name: '拟建设2', value: [118.947522, 36.994958, 903, '拟建'], pos: '寿光市', bed: 1203, phone: '0537333', time: '2019-6', check: '450', add: '潍坊寿光市圣城街', desc: '市政建设', charge: '张三', area: '392亩' },
{ name: '拟建设3', value: [118.720017, 37.014973, 1103, '拟建'], pos: '寿光市', bed: 1103, phone: '057333', time: '2020-6', check: '450', add: '潍圣城街', desc: '市政府确定的重点项投资建设', charge: '张三', area: '392亩' },
];
CountryPos = {
'市': [118.904827, 37, 1.6, { dc: 20, hc: 80, bc: 32401, cp: '30%',
y: ['镇', '镇', '营', ''],
ndata: [0, 5, 1, 2, 5, 9, 8, 4, 6, 3, 1],
zdata: [2, 3, 6, 5, 4, 7, 8, 9, 5, 5, 9],
ydata: [10, 15, 11, 21, 51, 19, 18, 21, 31, 13, 11],
per: [1055, 786, 254],town:''}],
}
}
//初始化地图
function func_InitEchart2() {
bmapChart = echarts.init(document.getElementById('echarts-map-chart')); //获取bmap的对象，地图的所有操作都是基于此对象的，需要必要的js和html控件
bmapChart.showLoading(); //现实正在加载的界面--用于加载地图数据时显示，避免认为是卡死
var jsurl = "Scripts/echart/weifang.json";
$.getJSON(jsurl, function (geoJson) {
echarts.registerMap('市', geoJson); //加载json数据到地图中，并保存在指定的名称下面
bmapChart.hideLoading(); //关闭正在加载的界面
mapOption = GetOption("市"); //获取map的初始化参数，地图的信息数据格式等的都在option中
bmapChart.setOption(mapOption);//设置参数，到这里基本完成地图初始化了
CurrentName = "市";
// 处理点击事件
bmapChart.on('legendselectchanged', function (params) { func_lengedSelect(params); });//添加legend选择事件
bmapChart.on('click', function (params) { eConsole(params); });//添加点击事件
});
}
function convertData(name, city) {
var res = [];
for (var i = 0; i < myData.length; i++) {
var dataItem = myData[i];
if (city != null) {
if (city != dataItem.pos)
continue;
}
if (dataItem.value[3] == name) {
res.push(dataItem);
}
}
return res;
};
function getDatabyname(name) {
for (var i = 0; i < myData.length; i++) {
var dataItem = myData[i];
if (dataItem.name == name) {
return dataItem;
}
}
return null;
}
var selectedItem = null;
//点击地图中的点回调函数
function eConsole(param) {
if (typeof param.componentType == 'undefined') {
return;
}
else if (param.componentType == "series") {
//alert(param.name);
selectedItem = param.data;
func_showdetail(param.data);
}
else if (param.componentType == "geo") {
if (CurrentName == "市") { //--------------------地图下钻-区县级别的就没有现成的json文件了，自己从里面读数据
var option = CountryOptions[param.name];
if (option == null) {
var jsonmap = echarts.getMap('市').geoJson.features; //获取对应的注册地图的数据
//根据地图数据获取中心位置-读取相关的节点的信息
var cppoint = jsonmap.find(function (a) {
return a.properties.name == param.name;
});
var newjson = { //创建一个新的json文件--看了下要加上type才可以
type: "FeatureCollection",
features: [],
};
newjson.features.push(cppoint);
echarts.registerMap(param.name, newjson);
option = GetOption(param.name, param.name);//重新注册初始化显示
//bmapChart.setOption(option);
mapDetailInfo(param.name, option);
CountryOptions[param.name] = option;
}
else {
bmapChart.setOption(option);
}
CurrentName = param.name;
showPar(param.name);
}
else {
CurrentName = "市";
bmapChart.setOption(mapOption, true);
showPar("市");
}
}
}
function func_lengedSelect(params) {
if (params.type == 'legendselectchanged') {
var legend = params.selected;
if (params.name == "搜索") {
}
}
}
function GetOption(name, city) {
var ps = CountryPos[name];
var p = [ps[0], ps[1]];
var geoitemstyle = {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
};
if (name != "潍坊市") {
geoitemstyle = {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#031525',
}
};
}
var opt = {
geo: {
center: p,// [119.36, 36.64], // 中心位置坐标
zoom: ps[2],
show: true,
map: name,
label: {
normal: {
show: true,
color: '#ddb926',
},
emphasis: {
color: '#ddb926',
show: true,
}
},
right: 300,
roam: true,
itemStyle: geoitemstyle,
},
backgroundColor: '#222f44',
tooltip: {
trigger: 'item',
position: 'right',
formatter: function (params) {
if (typeof (params.value)[2] == "undefined") {
return params.name + ' : ' + params.value;
} else {
var str = "<ur style='text-align:left'><li style='color: #da70d6;font:bolder;'>" + params.name + "</li>";
str += "<li>" + "床位数 : " + params.value[2] + " </li>";
str += "<li>" + "入住率 : " + "70%" + " </li>";
str += "<li>" + "建档率 : " + "70%" + " </li>";
str += "<li>" + "等级 : " + "1" + " </li>";
str += "</ul>";
return str;
}
}
},
title: {
text: '结合综合管理平台',
//subtext: '管理服务平台',
left: 'center',
textStyle: {
color: '#f8f7ec',
fontSize: 36,
fontFamily: '黑体',
}
},
legend: [
{
orient: 'vertical',
top: 100,
itemWidth: 30,
itemHeight: 20,
padding: [
5, // 上
40, // 右
5, // 下
10, // 左
],
backgroundColor: 'rgba(47, 79, 79, 0.7)',
borderColor: '#07399d',
borderWidth: 1.5,
borderRadius: 3,
selected: {
'已建': true,
'在建': true,
'拟建': true,
},
left: 'left',
data: [
{
name: '已建',
icon: 'roundRect',
textStyle: {
color: '#62f962'
}
},
{
name: '在建',
icon: 'roundRect',
textStyle: {
color: 'yellow'
}
},
{
name: '拟建',
icon: 'roundRect',
textStyle: {
color: 'red'
}
}
],
selectedMode: 'multiple',
},
{
orient: 'vertical',
top: 190,
itemWidth: 25,
itemHeight: 25,
padding: [
5, // 上
46, // 右
5, // 下
10, // 左
],
backgroundColor: 'rgba(85,107,47, 0.7)',
borderColor: '#07399d',
borderWidth: 1.5,
borderRadius: 3,
selected: {
'医院': false,
},
left: 'left',
data: [
{
name: '医院',
icon: 'image://Images/hosicon.png',
textStyle: {
color: '#47fad4'
}
}
],
selectedMode: 'multiple',
},
//{
// orient: 'vertical',
// top: 226,
// itemWidth: 20,
// itemHeight: 20,
// padding: [
// 5, // 上
// 50, // 右
// 5, // 下
// 10, // 左
// ],
// backgroundColor: 'rgba(79, 60, 60, 0.7)',
// borderColor: '#07399d',
// borderWidth: 1.5,
// borderRadius: 3,
// selected: {
// '搜索': true,
// },
// left: 'left',
// data: [
// {
// name: '搜索',
// icon: 'image://Images/Beadhouse/searchicon.png',
// textStyle: {
// color: 'white'
// }
// }
// ],
// selectedMode: 'multiple',
//},
],
series: [
{
name: '已建',
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 10,
data: convertData('已建', city),
showEffectOn: 'render',
hoverAnimation: true,
rippleEffect: { //涟漪特效相关配置
period: '4', //动画的时间
scale: '2.5', //动画中波纹的最大缩放比例
brushType: 'stroke'
},
//showEffectOn: 'emphasis',
label: {
normal: {
formatter: '{b}',
position: 'right',
fontSize: '12',
fontFamily: '宋体',
show: false
},
emphasis: {
show: false
},
},
itemStyle: {
normal: {
color: '#62f962',
shadowBlur: 10,
}
}
},
{
name: '已建',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function (val) { return Math.sqrt(val[2] * 1.8); },
label: {
normal: {
show: true,
textStyle: {
color: '#000000',
fontSize: 10,
}
}
},
itemStyle: {
normal: {
color: '#62f962', //标志颜色
}
},
data: convertData('已建', city),
},
{
name: '在建',
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 10,
data: convertData('在建', city),
showEffectOn: 'render',
hoverAnimation: true,
rippleEffect: { //涟漪特效相关配置
period: '4', //动画的时间
scale: '2.5', //动画中波纹的最大缩放比例
brushType: 'stroke'
},
//showEffectOn: 'emphasis',
label: {
normal: {
formatter: '{b}',
position: 'right',
fontSize: '12',
fontFamily: '宋体',
show: false
},
emphasis: {
show: false
},
},
itemStyle: {
normal: {
color: 'yellow',
shadowBlur: 10
}
}
},
{
name: '在建',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function (val) { return Math.sqrt(val[2] * 1.8); },
label: {
normal: {
show: true,
textStyle: {
color: '#000000',
fontSize: 10,
}
}
},
itemStyle: {
normal: {
color: 'yellow', //标志颜色
}
},
data: convertData('在建', city),
},
{
name: '拟建',
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 10,
data: convertData('拟建', city),
showEffectOn: 'render',
hoverAnimation: true,
rippleEffect: { //涟漪特效相关配置
period: '4', //动画的时间
scale: '2.5', //动画中波纹的最大缩放比例
brushType: 'stroke'
},
//showEffectOn: 'emphasis',
label: {
normal: {
formatter: '{b}',
position: 'right',
fontSize: '12',
fontFamily: '宋体',
show: false
},
emphasis: {
show: false
},
},
itemStyle: {
normal: {
color: 'red',
shadowBlur: 10
}
}
},
{
name: '拟建',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function (val) { return Math.sqrt(val[2] * 1.8); },
label: {
normal: {
show: true,
textStyle: {
color: '#000000',
fontSize: 9,
}
}
},
itemStyle: {
normal: {
color: 'red', //标志颜色
}
},
data: convertData('拟建', city),
},
{//-----------------------医院点-------------------------
name: '医院',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'image://Images/hosicon.png',
symbolSize: 15,
label: {
normal: {
formatter: '{b}',
position: 'right',
fontSize: '12',
fontFamily: '宋体',
show: false
},
emphasis: {
show: false
},
},
itemStyle: {
normal: {
color: '#4edadf', //标志颜色
},
emphasis: {
borderColor: '#fff',
borderWidth: 1,
}
},
data: convertData('hos', city),
},
//{
// name: '搜索',
// type: 'scatter',
// coordinateSystem: 'geo',
// data: []
//},
],
}
return opt;
}
</script>
</body>
</html>
