<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>
地图JSON数据
