<script>
'use strict';
var VueMoudle = new Vue({
el: '#jqts',
data() {
return {
mapLastName: '',//上一步地图显示内容
mapName: '',//地图默认展示层级
mapCity: {//中文名与json 文件对应表
"江西省": "jiangxi",
"抚州市": "fuzhou",
"赣州市": "ganzhou",
"吉安市": "jian",
"景德镇市": "jingdezhen",
"九江市": "jiujiang",
"南昌市": "nanchang",
"萍乡市": "pingxiang",
"上饶市": "shangrao",
"新余市": "xinyu",
"宜春市": "yichun",
"鹰潭市": "yingtan",
//市区级
"婺源县": "shangrao_wyx",
"鄱阳县": "shangrao_pyx",
"玉山县": "shangrao_yushanxian",
"余干县": "shangrao_ygx",
"广丰区": "shangrao_gfq",
"弋阳县": "shangrao_yyx",
"万年县": "shangrao_wnx",
"德兴市": "shangrao_dxs",
"广信区": "shangrao_gxq",
"横峰县": "shangrao_hfx",
"信州区": "shangrao_xzq",
"铅山县": "shangrao_yzx",
'修水县': "jiujiang_xsx",
'武宁县': "jiujiang_wnx",
'永修县': "jiujiang_yxx",
'共青城市': "jiujiang_gqcs",
'瑞昌市': "jiujiang_rcs",
'德安县': "jiujiang_dax",
'柴桑区': "jiujiang_csq",
'庐山市': "jiujiang_lss",
'濂溪区': "jiujiang_lxq",
'彭泽县': "jiujiang_pzx",
'都昌县': "jiujiang_dcx",
'湖口县': "jiujiang_hkx",
'浔阳区': "jiujiang_xyq",
"贵溪市": "yingtan_guixi",
"月湖区": "yingtan_yuehu",
"余江区": "yingtan_yujiang",
"上栗县": "pingxiang_shangli",
"安源区": "pingxiang_anyuan",
"莲花县": "pingxiang_lianhua",
"芦溪县": "pingxiang_luxi",
"湘东区": "pingxiang_xiangdong",
"浮梁县": "jingdezhen_fuliang",
"珠山区": "jingdezhen_zhushan",
"昌江区": "jingdezhen_changjiang",
"乐平市": "jingdezhen_leping",
'丰城市': "yichun_fcs",
'高安市': "yichun_gas",
'樟树市': "yichun_zss",
'铜鼓县': "yichun_tgx",
'万载县': "yichun_wzx",
'奉新县': "yichun_fxx",
'上高县': "yichun_sgx",
'靖安县': "yichun_jax",
'宜丰县': "yichun_yfx",
'袁州区': "yichun_yzq",
'安义县': "nanchang_ayx",
'东湖区': "nanchang_dhq",
'红谷滩区': "nanchang_hgtq",
'进贤县': "nanchang_jxx",
'南昌县': "nanchang_ncx",
'青山湖区': "nanchang_qshq",
'青云谱区': "nanchang_qypq",
'西湖区': "nanchang_xhq",
'新建区': "nanchang_xjq",
"分宜县": "xinyu_fyx",
"渝水区": "xinyu_ysq",
'临川区': "fuzhou_lcq",
'南丰县': "fuzhou_nfx",
'东乡区': "fuzhou_dxq",
'南城县': "fuzhou_ncx",
'广昌县': "fuzhou_gcx",
'金溪县': "fuzhou_jxx",
'资溪县': "fuzhou_zxx",
'乐安县': "fuzhou_lax",
'黎川县': "fuzhou_lcx",
'崇仁县': "fuzhou_crx",
'宜黄县': "fuzhou_yhx",
'泰和县': "jian_thx",
'井冈山市': "jian_jgss",
'遂川县': "jian_scx",
'永丰县': "jian_yfx",
'新干县': "jian_xgx",
'永新县': "jian_yxx",
'万安县': "jian_wax",
'安福县': "jian_afx",
'吉水县': "jian_jsx",
'吉安县': "jian_jax",
'峡江县': "jian_xjx",
'吉州区': "jian_jzq",
'青原区': "jian_qyq",
'瑞金市': "ganzhou_rjs",
'于都县': "ganzhou_ydx",
'兴国县': "ganzhou_xgx",
'信丰区': "ganzhou_xfq",
'南康区': "ganzhou_nkq",
'石城县': "ganzhou_scx",
'宁都县': "ganzhou_ndx",
'寻乌县': "ganzhou_xwx",
'龙南市': "ganzhou_lns",
'全南县': "ganzhou_qnx",
'安远县': "ganzhou_ayx",
'会昌县': "ganzhou_hcx",
'大余县': "ganzhou_dyx",
'崇义县': "ganzhou_cyx",
'定南县': "ganzhou_dnx",
'赣县区': "ganzhou_gxq",
'上犹县': "ganzhou_syx",
'章贡区': "ganzhou_zgq",
},
isFirstLoad: true,//是否是第一次初始化加载
}
},
methods: {
initMap(area, data) {
let chart = echarts.init(document.getElementById('mapContainer'));
chart.clear();
area = this.mapCity[area]
let option = {
tooltip: {
show: false
},
geo: [
{
show: true,
map: area,
aspectScale: 1,
zoom: 1.08,
// roam: true,
itemStyle: {
areaColor: '#0a3b8a',
borderColor: 'rgba(129,186,253,0.4)'
},
// scaleLimit: { //滚轮缩放的极限控制
// min: 0.5,
// max: 6
// },
emphasis: {
disabled: true
}
},
{
show: true,
map: area,
aspectScale: 1,
zoom: 1.1,
// roam: true,
itemStyle: {
areaColor: '#1a3b8a',
borderColor: '#81bafd',
},
// scaleLimit: { //滚轮缩放的极限控制
// min: 0.5,
// max: 6
// },
label: {
show: true,
formatter(area) {
let value = data.filter(item => {
return item.name === area.name;
})[0].value;
var className;
if (value > 500) {
className = 'style1'
} else if (value > 200) {
className = 'style2'
} else if (value > 100) {
className = 'style3'
} else {
className = 'style4'
}
return `{${className}|${value}}\n{name|${area.name}}`;
},
rich: {
style1: {
backgroundColor: {
image: "./../images/public/map_flag_red_bg.png"
},
width: 51,
height: 43,
align: 'center',
fontSize: '16px',
fontFamily: 'dinBold',
fontWeight: 'bold',
color: '#333333',
verticalAlign: 'top',
padding: [-10, 0, 0, 4],
},
style2: {
backgroundColor: {
image: "./../images/public/map_flag_yellow_bg.png"
},
width: 51,
height: 43,
align: 'center',
fontSize: '16px',
fontFamily: 'dinBold',
fontWeight: 'bold',
color: '#333333',
verticalAlign: 'top',
padding: [-10, 0, 0, 4],
},
style3: {
backgroundColor: {
image: "./../images/public/map_flag_green_bg.png"
},
width: 51,
height: 43,
align: 'center',
fontSize: '16px',
fontFamily: 'dinBold',
fontWeight: 'bold',
color: '#333333',
verticalAlign: 'top',
padding: [-10, 0, 0, 4],
},
style4: {
backgroundColor: {
image: "./../images/public/map_flag_blue_bg.png"
},
width: 51,
height: 43,
align: 'center',
fontSize: '16px',
fontFamily: 'dinBold',
fontWeight: 'bold',
color: '#333333',
verticalAlign: 'top',
padding: [-10, 0, 0, 4],
},
name: {
fontSize: 16,
fontWeight: 'bold',
color: '#fff',
fontFamily: 'PingFangSC-Medium',
padding: [6, 0, 0, 0],
},
},
}
,
emphasis: {
itemStyle: {
areaColor: '#0a256d',
borderColor: '#81bafd',
},
label: {
color: '#fff',
},
},
}
],
series: [
{
nameMap: {
'jiangxi': '江西省'
},
silent: true, //禁用地图的hover事件
top: 20,
type: 'map',
name: '危险驾驶案件数',
coordinateSystem: 'geo',
geoIndex: 0,
data: data
}
],
}
chart.clear();
chart.setOption(option, true);
},
getData(area, option) {
$.getJSON('../js/json/' + this.mapCity[area] + '.json', (data) => {
let areaCode = data.features[0].properties.parent.adcode;
axios.get('/zfdsj-web/stWxjsAqts/queryGdqaqfbqkData', {
params: {
option: option,
conditionStartTime: this.conditionStartTime,
conditionEndTime: this.conditionEndTime,
areaCode: areaCode
}
}).then(res => {
let result = res.data.data;
//TODO获取地区数据
let newCity = []
for (let i = 0, len = data.features.length; i < len; i++) {
let city = result.find(item => item.name == data.features[i].properties.name);
let value = 0;
if (city != undefined) {
value = city.value;
}
newCity.push({
//获取地图数据
name: data.features[i].properties.name,
//此处虚拟数据，应从后台服务获取数据
value: value
});
}
echarts.registerMap(this.mapCity[area], data);
this.initMap(area, newCity);
}).catch(err => console.log(err.message));
});
}
,
mapReturn() {
//第二层
if (this.mapLastName === '江西省') {
this.getData(this.mapLastName, this.ajfbValue);
this.mapName = this.mapLastName;
this.mapLastName = '';
} else {//第三层
this.getData(this.mapLastName, this.ajfbValue);
this.mapName = this.mapLastName;
//如果初始是省级 就能再显示上一层
if (this.allCityList[window.top.areaCode].name === '江西省') {
this.mapLastName = '江西省';
} else {//否则 为市级不允许再退一层
this.mapLastName = '';
}
}
}
}
,
mounted() {
//根据账号展示code选择不同 下属区域
this.cityList = this.allCityList[window.top.areaCode].children;
//*************** 地图 ******************//
let chart = echarts.init(document.getElementById('mapContainer'));
this.getData(this.allCityList[window.top.areaCode].name, this.ajfbValue);
this.isFirstLoad = false;
this.mapName = this.allCityList[window.top.areaCode].name;
//单击穿透事件
chart.on('click', (params) => {
if (params.name === this.mapName) {
return;
}
if (params.name in this.mapCity) {
this.getData(params.name, this.ajfbValue);
this.mapLastName = this.mapName;
this.mapName = params.name;
}
});
}
});
</script>