vue+echarts可视化大屏,全国地图下钻,页面自适应

#vue+echarts可视化大屏,全国地图下钻,页面自适应| 来源: 网络整理| 查看: 265

之前写过一篇关于数据大屏及地图下钻的文章 https://www.cnblogs.com/weijiutao/p/13977011.html ,但是存在诸多问题,如地图边界线及行政区划老旧,无法自适应问题等,正好抽时间又整理了一下修改的思路.

之前的文章已经获取了一套新的全国地图的行政区划及边界线,接下来就可以根据这套区划来进行地图的编写了.先来看一下最后的呈现效果.

代码目录如下

地图采用了最新的行政区划及边界进行加载,具体获取方式在另一篇文章 https://www.cnblogs.com/weijiutao/p/15989290.html

地图边界下目录

这次代码与上一个版本的最大区别在于china.vue文件,如下

1 2 3 返回 4 5 6 7 8 9 10 11 12 import {getChinaJson, getProvinceJson, getCityJson, getDistrictJson} from "@/api/map"; 13 import {mapOption} from '@/config/mapOption' 14 import resize from '@/utils/resize' 15 16 17 export default { 18 mixins: [resize], 19 name: "china", 20 components: {}, 21 props: { 22 areaCode: { 23 type: String, 24 default: '000000000000' 25 }, 26 areaLevel: { 27 type: [String, Number], 28 default: 0 29 }, 30 areaName: { 31 type: String, 32 default: 'china' 33 }, 34 // 当前地图上的地区名字 35 mapNameList: { 36 type: Array, 37 default() { 38 return [] 39 } 40 }, 41 // 当前地图上的地区Code 42 mapCodeList: { 43 type: Array, 44 default() { 45 return [] 46 } 47 }, 48 // 地区统计数据 49 areaStatistic: { 50 type: Array, 51 default() { 52 return [] 53 } 54 } 55 }, 56 data() { 57 return { 58 chart: null, // 实例化echarts 59 mapDataList: [], // 当前地图上的地区 60 option: {...mapOption.basicOption}, // map的相关配置 61 deepTree: [],// 点击地图时push，点返回时pop 62 areaStatisticMapValue: {}, // 地图数据value, 只是amounts 63 areaStatisticMapData: {}, // 地图数据data,包含所有数据 64 areaLevelMap: { 65 'country': 0, 66 'china': 0, 67 'province': 1, 68 'city': 2, 69 'district': 3, 70 }, 71 tooltipAutoplay: null, // 提示框自动播放 72 tooltipAutoplayIndex: 0, // 提示框自动播放index 73 } 74 }, 75 beforeDestroy() { 76 if (!this.chart) { 77 return 78 } 79 this.chart.dispose() 80 this.chart = null 81 }, 82 mounted() { 83 this.$nextTick(() => { 84 this.initEcharts(); 85 this.chart.on('click', this.echartsMapClick); 86 this.chart.on('mouseover', this.echartsMapMouseover); 87 this.chart.on('mouseout', this.echartsMapMouseout); 88 }); 89 }, 90 watch: { 91 areaStatistic: { 92 handler(val) { 93 var objValue = {}, objData = {} 94 for (var i = 0; i 1) { 133 this.requestGetDistrictJSON(params.data) 134 } else { 135 return false 136 } 137 }, 138 //绘制全国地图areaStatistic 139 requestGetChinaJson() { 140 getChinaJson().then(res => { 141 // console.log('china--->', res) 142 this.$emit('update:areaLevel', 0) 143 this.setJsonData(res) 144 }); 145 }, 146 // 加载省级地图 147 requestGetProvinceJSON(params) { 148 getProvinceJson(params.adcode).then(res => { 149 // console.log('province--->', res) 150 this.$emit('update:areaLevel', 1) 151 this.setJsonData(res, params) 152 }); 153 }, 154 // 加载市级地图 155 requestGetCityJSON(params) { 156 getCityJson(params.adcode).then(res => { 157 // console.log('city--->', res) 158 this.$emit('update:areaLevel', 2) 159 this.setJsonData(res, params) 160 }) 161 }, 162 // 加载县级地图 163 requestGetDistrictJSON(params) { 164 getDistrictJson(params.adcode).then(res => { 165 // console.log('district--->', res) 166 this.$emit('update:areaLevel', 3) 167 this.setJsonData(res, params) 168 }) 169 }, 170 // 设置数据 171 setJsonData(res, params) { 172 var mapDataList = []; 173 var mapNameList = []; 174 var mapCodeList = []; 175 for (var i = 0; i { 210 return { 211 name: item.name, 212 value: item.value 213 } 214 }) 215 mapDataList = mapDataList.sort(function (a, b) { 216 return b.value - a.value 217 }); 218 var pointData = [] 219 for (var i = 0; i 1 ? mapDataList[mapDataList.length - 2].value : 0 229 this.option.visualMap.max = mapDataList.length > 0 ? mapDataList[0].value : 0 230 // 设置左上角当前位置 231 this.option.title[0].text = map === 'china' ? '全国' : map 232 this.option.geo = { 233 show: false, 234 map: map, 235 zoom: 1.2, //当前视角的缩放比例 236 roam: true, //是否开启平游或缩放 237 center: undefined, 238 } 239 this.option.series = [ 240 { 241 name: map, 242 mapType: map, 243 zoom: 1, //当前视角的缩放比例 244 roam: false, //是否开启平游或缩放 245 center: undefined, 246 scaleLimit: { //滚轮缩放的极限控制 247 min: .5, 248 max: 10 249 }, 250 ...mapOption.seriesOption, 251 data: data 252 }, 253 { 254 name: '散点',//series名称 255 type: 'effectScatter',//散点类型 256 coordinateSystem: 'geo',// series坐标系类型 257 rippleEffect: { 258 brushType: 'fill' 259 }, 260 normal: { 261 show: true, 262 // 提示内容 263 formatter: params => { 264 return params.name; 265 }, 266 position: 'top', // 提示方向 267 color: '#fff' 268 }, 269 emphasis: { 270 show: true // 点 271 }, 272 itemStyle: { 273 normal: { 274 color: '#F4E925', 275 shadowBlur: 10, 276 shadowColor: '#000' 277 } 278 }, 279 // symbol:'pin', // 散点样式'pin'（标注）、'arrow'（箭头） 280 data: pointData, 281 symbolSize: function (val) { 282 // return val[2] / 100; 283 if (val[2] === mapDataList[0].value) { 284 return 10 285 } 286 return 6 287 }, 288 showEffectOn: 'render', //加载完毕显示特效 289 }, 290 ] 291 //渲染地图 292 this.chart.setOption(this.option, true) 293 this.setTooltipAutoplay() 294 }, 295 // 地图鼠标移入事件 296 echartsMapMouseover() { 297 clearInterval(this.tooltipAutoplay) 298 }, 299 // 地图鼠标移出事件 300 echartsMapMouseout() { 301 this.setTooltipAutoplay() 302 }, 303 // 动态显示tooltip 304 setTooltipAutoplay() { 305 clearInterval(this.tooltipAutoplay) 306 // var index = 0; //播放所在下标 307 // if(this.chart.dispatchAction) { 308 this.tooltipAutoplay = setInterval(() => { 309 this.chart.dispatchAction({ 310 type: 'showTip', 311 seriesIndex: 0, 312 dataIndex: this.tooltipAutoplayIndex 313 }) 314 this.tooltipAutoplayIndex++ 315 if (this.tooltipAutoplayIndex >= this.mapDataList.length) { 316 this.tooltipAutoplayIndex = 0; 317 this.setTooltipAutoplay() 318 } 319 }, 6666) 320 // } 321 }, 322 // 返回 323 back() { 324 if (this.deepTree.length > 1) { 325 this.deepTree.pop(); 326 this.mapDataList = this.deepTree[this.deepTree.length - 1].mapDataList; 327 var areaName = this.deepTree[this.deepTree.length - 1].params.name; 328 var areaCode = this.deepTree[this.deepTree.length - 1].params.adcode; 329 var areaLevel = this.deepTree[this.deepTree.length - 1].params.level; 330 var mapNameList = this.mapDataList.map(item => { 331 return item.name 332 }) 333 var mapCodeList = this.mapDataList.map(item => { 334 return item.adcode + '000000' 335 }) 336 this.$emit('update:areaCode', (areaCode === '100000' ? '000000' : areaCode) + '000000') 337 this.$emit('update:areaName', areaName) 338 this.$emit('update:areaLevel', this.areaLevelMap[areaLevel]) 339 this.$emit('update:mapNameList', mapNameList) 340 this.$emit('update:mapCodeList', mapCodeList) 341 this.renderMap(areaName, this.mapDataList); 342 } 343 } 344 } 345 } 346 347 348 349 350 #map-container { 351 height: 66.6%; 352 position: relative; 353 354 .echarts { 355 height: 100%; 356 357 #map { 358 width: 100%; 359 height: 100%; 360 } 361 } 362 363 .back { 364 position: absolute; 365 top: 55px; 366 left: 5px; 367 z-index: 9; 368 //color: #24CFF4; 369 font-weight: bolder; 370 } 371 } 372 373

在上一套代码中,地图的边界上没有adcode(行政区划编码),这样就会导致在选取地区的时候只能根据汉字来进行匹配,导致不必要的错误,而最新抓去的行政区划里新增了adcode(行政区划)字段,这样就能根据该地区的行政区划来精准匹配.

同时在上一个版本代码里,也对直辖市和特别行政区做了特殊处理,因为他们没有三级县级地图,而这次版本由于引入adcode,可以直接匹配到指定行政区划中,减少和很多不必要的判断操作,如下图

做地图下钻本人也看过很多网上所说的,但是说的都不是很清楚,也没有专门对其进行代码的整理,这套代码是本人结合自身情况编写的,很多地方可能不是你想要的,需要对其进行取舍.

做地图其实最重要的就是地图边界线,自从echarts不再更新维护地图之后,对于初识echarts地图的人来说不太好下手,希望本文可以帮助到你.

如果有需要大家可以去以下地址下载源码学习。

gitee源码地址：https://gitee.com/vijtor/vue-map-echarts

【本文地址】

公司简介

联系我们