vue echarts地图省市区下钻_sunnyboysix_vueecharts地图下钻

大大的周 02-07 8049

一项目做了一个省市区下钻

全国

???????放不出来图

?市

县区

二直接上代码

这就是上面丑丑的省市区，代码没优化，撸出来什么样就是什么样，

看着这几个if? 感觉自己好low, 但是比较直观哈哈哈?low就low吧，

尾部我把用到map json丢上来就完整了，待会看看能不能优化一下

<template> <div class="MapChart"> <div ref="MapArea" class="echarts"></div> </div> </template> <script> import * as echarts from 'echarts' import chinaJson from '@/core/map/china.json' export default { name: 'MapChart', data() { return { currentLevel: 0, //1 全国下省份, 2 省份下市区 3 县区 currentClick: null, currentCityList: [] } }, mounted() { this.chart = echarts.init(this.$refs.MapArea) this.initEcharts() }, beforeDestroy() { this.chart.dispose() }, methods: { initEcharts() { let regionsList = [] //全国下省份 if(!this.currentLevel) { regionsList = chinaJson.features.map((item) => ({ name: item.properties.name, type: '省份', itemStyle: { color: 'rgba(222, 224, 232, 1)', areaColor: 'rgba(222, 224, 232, 1)' } })) //地图上要显示的区域以及颜色 let outProvince = [] //数组定义在这里, 可以在地图上去除部分省份 =》 ['江苏', '江西'] let objMap = { ...chinaJson, features: chinaJson.features.filter((item) => !outProvince.includes(item.properties.name)) //这里可以过滤不需要展示省份，可以和regionsList联动使用 } echarts.registerMap('chinaJson', objMap) //chinaJSon自定义名称，但是无法显示右下角南海诸岛，可以设置成china } //省份下市区 if(this.currentLevel == 1) { //console.log(this.currentLevel, this.currentClick) let { id } = chinaJson.features.filter((item) => this.currentClick == item.properties.name)[0].properties //console.log(id) //找出 @/core/map/china.json 里面内蒙古id 同事在此路径geometryProvince文件下 id.json就是对应该省份对应的市级数据 let cityList = require(`@/core/map/geometryProvince/${id}.json`) //获取城市数据 regionsList = cityList.features.map((item) => ({ name: item.properties.name, type: '城市', itemStyle: { color: 'rgba(222, 224, 232, 1)', areaColor: 'rgba(222, 224, 232, 1)' } })) this.currentCityList = cityList //console.log(regionsList) let outCityList = [] //剔除不需要城市 let objMap = { ...chinaJson, features: cityList.features.filter((item) => !outCityList.includes(item.properties.name)) //这里可以过滤不需要展示城市，可以和regionsList联动使用 } echarts.registerMap('chinaJson', objMap) //chinaJSon自定义名称，但是无法显示右下角南海诸岛，可以设置成china } //市区下县区 if(this.currentLevel == 2) { //console.log(this.currentLevel, this.currentClick, this.currentCityList) let { id } = this.currentCityList.features.filter((item) => this.currentClick == item.properties.name)[0].properties //console.log(id, this.currentCityList.features.filter((item) => this.currentClick == item.properties.name)[0]) let areaList = require(`@/core/map/geometryCouties/${id}00.json`) //获取区县数据, 这里加${id}00 是因为查出来id没有00 但是json文件是有的所以拼接了一下 //console.log(areaList) regionsList = areaList.features.map((item) => ({ name: item.properties.name, type: '县区', itemStyle: { color: 'rgba(222, 224, 232, 1)', areaColor: 'rgba(222, 224, 232, 1)' } })) let outAreaList = [] //剔除不需要县区 let objMap = { ...chinaJson, features: areaList.features.filter((item) => !outAreaList.includes(item.properties.name)) //这里可以过滤不需要展示县区，可以和regionsList联动使用 } echarts.registerMap('chinaJson', objMap) //chinaJSon自定义名称，但是无法显示右下角南海诸岛，可以设置成china } let option = { geo: { map: 'chinaJson' , //china可以显示右下加南海诸岛，别的名称无法显示 roam: false, zoom: 1.1, aspectScale: 0.8, // 拉伸地图值为0-1 regions: regionsList, label: { show: true, color: '#fff', }, emphasis: { // 设置鼠标移上去hover效果 // show: true, label: { color: '#000', } } }, } // console.log(option) this.chart.setOption(option) this.chart.off('click') //解决点击地图会触发两次问题 this.chart.on('click', (params) => { console.log(params) this.currentLevel = params.region.type == '省份' ? 1 : params.region.type == '城市' ? 2 : params.region.type == '县区' ? 3 : 0 this.currentClick = params.name this.currentLevel != 3 && this.initEcharts() //县区下没有别的级别 }) } } } </script> <style lang="less" scoped> .MapChart { width: 100%; height: 100%; .echarts { width: 100%; height: 100%; } } </style>

配套map数据

地图资源省市区下钻数据json-Javascript文档类资源-CSDN下载，配套上传不需要积分，

demo页面就这样

加油呀，我还是一个小菜鸟，