下钻地图长宽比不协调echarts 地图配置项内容和展示
下钻地图长宽比不协调
配置项如下
var brNo = '350000';
var ajaxData = {
orgNo: [{
name: "漳州市",
code: "3506",
value: 51
},
{
name: "福建",
code: "35",
"selected": true
},
{
name: "福州市",
code: "3501",
value: 78
},
{
name: "厦门市",
code: "3502",
value: 41
},
{
name: "安溪县",
code: "350524",
value: 0
},
{
name: "泉州市",
code: "3505",
value: 49
},
{
name: "宁德市",
code: "3509",
value: 89
},
{
name: "莆田市",
code: "3503",
value: 30
},
{
name: "永春县",
code: "350525",
value: 0
},
{
name: "龙岩市",
code: "3508",
value: 44
},
{
name: "德化县",
code: "350526",
value: 0
},
{
name: "金门县",
code: "350527",
value: 0
},
{
name: "南安市",
code: "350583",
value: 0
},
{
name: "石狮市",
code: "350581",
value: 0
},
{
name: "晋江市",
code: "350582",
value: 0
},
{
name: "同安区",
code: "350212",
value: 0
},
{
name: "思明区",
code: "350203",
value: 3
},
{
name: "海沧区",
code: "350205",
value: 2
},
{
name: "湖里区",
code: "350206",
value: 0
},
{
name: "翔安区",
code: "350213",
value: 0
},
{
name: "仙游县",
code: "350322",
value: 0
},
{
name: "城厢区",
code: "350302",
value: 0
},
{
name: "涵江区",
code: "350303",
value: 3
},
{
name: "荔城区",
code: "350304",
value: 4
},
{
name: "秀屿区",
code: "350305",
value: 1
},
{
name: "梅列区",
code: "350402",
value: 4
},
{
name: "三元区",
code: "350403",
value: 3
},
{
name: "鲤城区",
code: "350502",
value: 4
},
{
name: "丰泽区",
code: "350503",
value: 3
},
{
name: "洛江区",
code: "350504",
value: 7
},
{
name: "泉港区",
code: "350505",
value: 7
},
{
name: "惠安县",
code: "350521",
value: 0
},
{
name: "永泰县",
code: "350125",
value: 0
},
{
name: "鼓楼区",
code: "350102",
value: 9
},
{
name: "台江区",
code: "350103",
value: 30
},
{
name: "仓山区",
code: "350104",
value: 4
},
{
name: "马尾区",
code: "350105",
value: 1
},
{
name: "平潭县",
code: "350128",
value: 0
},
{
name: "闽清县",
code: "350124",
value: 0
},
{
name: "闽侯县",
code: "350121",
value: 0
},
{
name: "罗源县",
code: "350123",
value: 0
},
{
name: "连江县",
code: "350122",
value: 0
},
{
name: "晋安区",
code: "350111",
value: 3
},
{
name: "福清市",
code: "350181",
value: 0
},
{
name: "长乐市",
code: "350182",
value: 0
},
{
name: "集美区",
code: "350211",
value: 0
},
{
name: "延平区",
code: "350702",
value: 2
},
{
name: "顺昌县",
code: "350721",
value: 0
},
{
name: "浦城县",
code: "350722",
value: 0
},
{
name: "光泽县",
code: "350723",
value: 0
},
{
name: "松溪县",
code: "350724",
value: 0
},
{
name: "政和县",
code: "350725",
value: 0
},
{
name: "邵武市",
code: "350781",
value: 0
},
{
name: "武夷山市",
code: "350782",
value: 0
},
{
name: "建瓯市",
code: "350783",
value: 0
},
{
name: "建阳市",
code: "350784",
value: 0
},
{
name: "新罗区",
code: "350802",
value: 2
},
{
name: "长汀县",
code: "350821",
value: 0
},
{
name: "永定县",
code: "350822",
value: 0
},
{
name: "上杭县",
code: "350823",
value: 0
},
{
name: "连城县",
code: "350825",
value: 0
},
{
name: "武平县",
code: "350824",
value: 0
},
{
name: "漳平市",
code: "350881",
value: 0
},
{
name: "柘荣县",
code: "350926",
value: 0
},
{
name: "蕉城区",
code: "350902",
value: 1
},
{
name: "霞浦县",
code: "350921",
value: 0
},
{
name: "古田县",
code: "350922",
value: 0
},
{
name: "屏南县",
code: "350923",
value: 0
},
{
name: "寿宁县",
code: "350924",
value: 0
},
{
name: "周宁县",
code: "350925",
value: 0
},
{
name: "福安市",
code: "350981",
value: 0
},
{
name: "福鼎市",
code: "350982",
value: 0
},
{
name: "三明市",
code: "3504",
value: 22
},
{
name: "南平市",
code: "3507",
value: 32
},
{
name: "尤溪县",
code: "350426",
value: 0
},
{
name: "沙县",
code: "350427",
value: 0
},
{
name: "明溪县",
code: "350421",
value: 0
},
{
name: "清流县",
code: "350423",
value: 0
},
{
name: "宁化县",
code: "350424",
value: 0
},
{
name: "大田县",
code: "350425",
value: 0
},
{
name: "将乐县",
code: "350428",
value: 0
},
{
name: "泰宁县",
code: "350429",
value: 0
},
{
name: "建宁县",
code: "350430",
value: 0
},
{
name: "永安市",
code: "350481",
value: 0
},
{
name: "芗城区",
code: "350602",
value: 13
},
{
name: "龙文区",
code: "350603",
value: 5
},
{
name: "云霄县",
code: "350622",
value: 0
},
{
name: "漳浦县",
code: "350623",
value: 0
},
{
name: "诏安县",
code: "350624",
value: 0
},
{
name: "长泰县",
code: "350625",
value: 0
},
{
name: "东山县",
code: "350626",
value: 0
},
{
name: "南靖县",
code: "350627",
value: 0
},
{
name: "平和县",
code: "350628",
value: 0
},
{
name: "华安县",
code: "350629",
value: 0
},
{
name: "龙海市",
code: "350681",
value: 0
}
]
};
//console.log(ajaxData.orgNo);
var fuzhou = basePath + 'component/mfc/geojson/fuzhou.json'; //
var xiamen = basePath + 'component/mfc/geojson/xiamen.json'; //
var putian = basePath + 'component/mfc/geojson/putian.json'; //
var sanming = basePath + 'component/mfc/geojson/sanming.json'; //
var quanzhou = basePath + 'component/mfc/geojson/quanzhou.json'; //
var zhangzhou = basePath + 'component/mfc/geojson/zhangzhou.json'; //
var nanping = basePath + 'component/mfc/geojson/nanping.json'; //
var longyan = basePath + 'component/mfc/geojson/longyan.json'; //
var ningde = basePath + 'component/mfc/geojson/ningde.json'; //
var fujian = basePath + 'component/mfc/geojson/fujian.json'; //福建
//返回到最顶级
function backToTop() {
window.location = "MfcCorpInfAction_getListPage.action?brNo=<%=User.getBrNo(request)%>";
}
var cityProper = {
'福州': fuzhou,
'厦门': xiamen,
'莆田': putian,
'三明': sanming,
'泉州': quanzhou,
'漳州': zhangzhou,
'南平': nanping,
'龙岩': longyan,
'宁德': ningde
};
var cityNo = {
'150000': fujian,
'150100': fuzhou,
'150200': xiamen,
'150300': putian,
'150400': sanming,
'150500': quanzhou,
'150600': zhangzhou,
'150700': nanping,
'150800': longyan,
'150900': ningde
};
var cityMap = {
'150000': 'fujian',
'150100': 'fuzhou',
'150200': 'xiamen',
'150300': 'putian',
'150400': 'sanming',
'150500': 'quanzhou',
'150600': 'zhangzhou',
'150700': 'nanping',
'150800': 'longyan',
'150900': 'ningde'
};
//console.log("brNo:"+brNo);
//console.log("brNo:"+ (brNo.substring(0, 4)+"00"));
//console.log("cityNo:"+ cityNo[brNo.substring(0, 4)+"00"] );
$.getJSON(cityNo[brNo.substring(0, 4) + "00"], function(data) {
//console.log("length:"+data.features.length);
echarts.registerMap(cityMap[brNo], data);
var chart = echarts.init(document.all('map-nmg'));
var option = {
tooltip: {
show: true,
showContent: false,
trigger: 'item',
formatter: '{b}<br/>{c} <br/>{a}<br/>{d}'
},
toolbox: {
show: true,
itemSize: 25,
feature: {
myTool1: {
show: true,
title: '返回',
icon: 'M27.094,12.945c-1.511,0.013-3.021,0.021-4.531,0.034c0.254,2.6-0.603,5.287-2.594,7.275c-3.535,3.534-9.263,3.534-12.796,0c-3.534-3.531-3.534-9.26,0-12.794c3.015-3.016,7.625-3.445,11.109-1.313c-1.181,1.167-2.57,2.549-2.57,2.549c-1,1.062,0.017,1.766,0.69,1.77h8.828c0.338,0,0.61-0.273,0.611-0.611V1.099c0.041-0.825-0.865-1.592-1.756-0.7c0,0-1.495,1.479-2.533,2.509C16.246-0.97,8.768-0.53,3.975,4.262c-5.3,5.3-5.3,13.893,0,19.192c5.299,5.298,13.892,5.298,19.191,0C26.05,20.572,27.35,16.714,27.094,12.945z',
iconStyle: {
normal: {
color: '#666666',
borderWidth: 1
}
},
onclick: backToTop
}
},
x: '80%',
y: '90%'
},
visualMap: {
min: 1,
max: 100,
left: 0,
itemWidth: 8,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['#e6f9c9', '#94bcdf', '#8e8fbb']
}
},
series: [{
type: 'map',
map: cityMap[brNo],
selectMode: 'single',
roam: true,
left: '12%',
top: 'top',
width: '90%',
height: '100%',
label: {
normal: {
show: true,
textStyle: {
color: "#231816"
}
}
},
itemStyle: {
normal: {
areaStyle: {
color: '#B1D0EC'
},
color: '#B1D0EC',
borderWidth: 1,
borderColor: '#797f7f' //区块的边框颜色
},
emphasis: { //鼠标hover样式
label: {
show: true,
textStyle: {
color: '#FF0000'
}
}
}
},
data: ajaxData.orgNo
}]
};
chart.setOption(option);
chart.on("click", function(param) {
//console.log(param);
//console.log(param.value+"-"+param.name+"-"+param.data.code);
if ("<%=User.getBrNo(request)%>".indexOf("00") == -1 || "<%=User.getBrNo(request)%>" == "151300" ||
"<%=User.getBrNo(request)%>" == "151400") {
return false;
}
//console.log("param.data.code.length:"+param.data.code.length);
//console.log("param.data.code.length:"+ (param.data.code.length==4?(param.data.code+'00'):param.data.code) );
var brNoParm = '15';
if (param.data.code.length == 4) {
brNoParm = brNoParm + param.data.code.substring(2) + '00';
} else {
brNoParm = brNoParm + param.data.code.substring(2);
}
//console.log("brNoParm:"+brNoParm);
window.location = "MfcCorpInfAction_getListPage.action?brNo=" + brNoParm;
});
});
截图如下
