echarts使用省地图并下钻到市区地图并返回

          <template><div id="area"><div><el-button type="primary" @click="backMap">返回</el-button></div><div id="area-box"></div></div>
</template>
<script>
import *as echarts from 'echarts'
export default {data(){return {dataMap:require('../../../public/liaoningsheng.json'), // 获取初始化省级地图数据mapData:[{name: '沈阳市',value: '1202',code:'1011'},{name: '大连市',value: '396'},{name: '鞍山市',value: '1125'},{name: '抚顺市',value: '635'},{name: '本溪市',value: '586'},{name: '丹东市',value: '360'},{name: '锦州市',value: '231'},{name: '营口市',value: '196'},{name: '阜新市',value: '180'},{name: '辽阳市',value: '480'},{name: '盘锦市',value: '680'},{name: '铁岭市',value: '880'},{name: '朝阳市',value: '280'},{name: '葫芦岛市',value: '80'}]}},mounted(){this.$nextTick(()=>{this.getArea()})},methods:{getArea () {const myChart = echarts.init(document.getElementById('area-box'))echarts.registerMap('liaoning', this.dataMap)// 为地图做点击事件获取区域数据，地图的数据大家可以在网上去下载自己想要的省市县等区域数据json，然后放到自己项目的静态文件夹里面，使用require去获取到数据然后使用，http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4 这个链接可以去获取全国所有的地图json数据myChart.off('click') // 防止地图点击后多次渲染，导致页面卡顿myChart.on('click',(data)=>{console.log(data.data)this.changeMap(data.data)})// 注册矢量地图数据var option = {visualMap: { // 视觉映射组件show: true,inverse: true, // 反转top: '70%',bottom: '2%',left: '2%',textStyle: {fontsize: 12},splitList: [ // 自定义范围{ start: 0, end: 100 },{ start: 100, end: 300 },{ start: 300, end: 500 },{ start: 500, end: 1000 },{ start: 1000 }],color: ['#BF242A', '#CD5459', '#DC878A', '#EAB7B9', '#F3D7D9'] //自定义范围的颜色},tooltip: { // 悬浮框trigger: 'item', // 触发条件backgroundColor: 'RGBA(136, 123, 135, 0.8)',formatter: '{b}<br/>案件数{c}', // 自定义显示数据textStyle: {color: '#ffffff'}},series: [{type: 'map',map: 'liaoning',zoom: 1.2,top: '10%',x: 'center',label: {show: true // 显示               },itemStyle: {normal: { // 静态的时候显示的默认样式areaColor: '#F3D7D9', // 地图颜色borderColor: '#886364' // 边框颜色},emphasis: { // 鼠标移入动态的时候显示的默认样式borderWidth: 2, // 边框宽度areaColor: '#ffffff' // 地图颜色}},// 数据data:this.mapData}]}myChart.setOption(option)},// 区域判定方法，对点击获取到的数据进行判断，然后去赋值相应的城市json数据changeMap(data){if(data.name==='沈阳市'){this.dataMap=require('../../../public/shenyang.json')this.mapData=[{name: '康平县',value: '1890'},{name: '法库县',value: '3960'},{name: '新民市',value: '1125'},{name: '沈北新区',value: '635'},{name: '于洪区',value: '586'},{name: '皇姑区',value: '360'},{name: '大东区',value: '231'},{name: '浑南区',value: '196'},{name: '沈河区',value: '180'},{name: '和平区',value: '480'},{name: '铁西区',value: '680'},{name: '苏家屯区',value: '880'},{name: '辽中区',value: '280'}]this.getArea()}else if(data.name==='大连市'){this.dataMap=require('../../../public/dalian.json')this.mapData=[{name: '庄河市',value: '1202'},{name: '普兰店区',value: '396'},{name: '瓦房店市',value: '1125'},{name: '金州区',value: '635'},{name: '长海县',value: '586'},{name: '旅顺口区',value: '360'},{name: '沙河口区',value: '231'},{name: '沙河口区',value: '196'},{name: '中山区',value: '180'},{name: '甘井子区',value: '480'}]this.getArea()}else if(data.name==='鞍山市'){this.dataMap=require('../../../public/anshan.json')this.mapData=[{name: '台安县',value: '1202'},{name: '海城市',value: '396'},{name: '立山区',value: '1125'},{name: '千山区',value: '635'},{name: '铁东区',value: '586'},{name: '铁西区',value: '360'},{name:'岫岩满族自治县',value:'1900'}]this.getArea()}else if(data.name==='抚顺市'){this.dataMap=require('../../../public/fushun.json')this.mapData=[{name: '望花区',value: '1202'},{name: '新抚区',value: '396'},{name: '顺城区',value: '1125'},{name: '东洲区',value: '635'},{name: '抚顺县',value: '586'},{name: '清原满族自治县',value: '360'},{name: '新宾满族自治县',value: '231'}]this.getArea()}else if(data.name==='本溪市'){this.dataMap=require('../../../public/benxi.json')this.mapData=[{name: '溪湖区',value: '1202'},{name: '明山区',value: '396'},{name: '平山区',value: '1125'},{name: '南芬区',value: '635'},{name: '本溪满族自治县',value: '586'},{name: '桓仁满族自治县',value: '360'}]this.getArea()}else if(data.name==='丹东市'){this.dataMap=require('../../../public/dandong.json')this.mapData=[{name: '凤城市',value: '1202'},{name: '东港市',value: '396'},{name: '振安区',value: '1125'},{name: '振兴区',value: '635'},{name: '元宝区',value: '586'},{name: '宽甸满族自治县',value: '360'}]this.getArea()}else if(data.name==='锦州市'){this.dataMap=require('../../../public/jinzhou.json')this.mapData=[{name: '黑山县',value: '1202'},{name: '义县',value: '396'},{name: '北镇市',value: '1125'},{name: '古塔区',value: '635'},{name: '太和区',value: '586'},{name: '凌河区',value: '360'},{name:'凌河市',value:'1287'}]this.getArea()}else if(data.name==='营口市'){this.dataMap=require('../../../public/yingkou.json')this.mapData=[{name: '前站区',value: '1202'},{name: '老边区',value: '396'},{name: '西市区',value: '1125'},{name: '大石桥市',value: '635'},{name: '鲅鱼圈区',value: '586'},{name: '盖州市',value: '360'}]this.getArea()}else if(data.name==='阜新市'){this.dataMap=require('../../../public/fuxin.json')this.mapData=[{name: '太平区',value: '1202'},{name: '细河区',value: '396'},{name: '海州区',value: '1125'},{name: '新邱区',value: '635'},{name: '清河门区',value: '586'},{name: '彰武县',value: '360'},{name:'阜新蒙古族自治县',value:'2897'}]this.getArea()}else if(data.name==='辽阳市'){this.dataMap=require('../../../public/liaoyang.json')this.mapData=[{name: '文圣区',value: '1202'},{name: '宏伟区',value: '396'},{name: '白塔区',value: '1125'},{name: '太子河区',value: '635'},{name: '灯塔市',value: '586'},{name: '弓长岭区',value: '360'},{name:'辽阳县',value:'908'}]this.getArea()}else if(data.name==='盘锦市'){this.dataMap=require('../../../public/panjin.json')this.mapData=[{name: '双台子区',value: '1202'},{name: '兴隆台区',value: '396'},{name: '盘山县',value: '1125'},{name: '大洼区',value: '635'}]this.getArea()}else if(data.name==='铁岭市'){this.dataMap=require('../../../public/tieling.json')this.mapData=[{name: '铁岭县',value: '1202'},{name: '昌图县',value: '396'},{name: '西丰县',value: '1125'},{name: '清河区',value: '635'},{name: '开原市',value: '586'},{name: '调兵山市',value: '360'},{name:'银州区',value:'2789'}]this.getArea()}else if(data.name==='朝阳市'){this.dataMap=require('../../../public/chaoyang.json')this.mapData=[{name: '朝阳县',value: '1202'},{name: '双塔区',value: '396'},{name: '龙城区',value: '1125'},{name: '建平县',value: '635'},{name: '凌源市',value: '586'},{name: '喀喇沁左翼蒙古族自治县',value: '360'},{name:'北票市',value:'678'}]this.getArea()}else if(data.name==='葫芦岛市'){this.dataMap=require('../../../public/huludao.json')this.mapData=[{name: '绥中县',value: '1202'},{name: '连山区',value: '396'},{name: '南票区',value: '1125'},{name: '龙港区',value: '635'},{name: '建昌县',value: '586'},{name: '兴城市',value: '360'}]this.getArea()}},// 点击返回按钮事件，如果当前是市区地图的话点击按钮就会返回到省级地图，参数就相当于是初始加载数据，如果是点击到县里面的话就要修改逻辑了，这里只有两级判断backMap(){this.dataMap=require('../../../public/liaoningsheng.json')this.mapData=[{name: '沈阳市',value: '1202',code:'1011'},{name: '大连市',value: '396'},{name: '鞍山市',value: '1125'},{name: '抚顺市',value: '635'},{name: '本溪市',value: '586'},{name: '丹东市',value: '360'},{name: '锦州市',value: '231'},{name: '营口市',value: '196'},{name: '阜新市',value: '180'},{name: '辽阳市',value: '480'},{name: '盘锦市',value: '680'},{name: '铁岭市',value: '880'},{name: '朝阳市',value: '280'},{name: '葫芦岛市',value: '80'}]this.getArea()}}
}
</script>
<style>#area-box{width: 100%;height: 90vh;}
</style>

echarts使用省地图并下钻到市区地图并返回相关推荐

echarts地图单机下钻双击返回
我做的是吉林省下钻到市区首先你得有这些东西,资源我得资源里有,3分还是5分下载.里边有全国的都有. 这里的jilins 是吉林省的json 因为和吉林市重名所以加了个s .......... ...
echarts省市区id（区域编码）实现地图下钻点击（data赋值自定义属性值，geojson信息获取）
致新的一年:不知不觉已经是2023年,祝新的一年大展宏图(兔),前途(兔)似锦,今年梦想实现! 正文: 接触echarts也有很长一段时间了,最近有个很常见的需求,实现省市区下钻,高亮一些有数据的区域 ...
echarts实现中国地图的下钻和返回上一级
首先我们需要知道echarts的地图的渲染需要依赖于json文件,例如:中国地图china.json,广东地图guangdong.json,广西地图guangxi.json:也就是每个不同的json文 ...
使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
echarts 中国地图的下钻
1 .最近老大让我搞个地图,要和其他的联动,,起来, 2 .首先要下载各省市的json ,现在echarts官网上不提供第三方的json地图. 3 . 先把效果图看一下,不是很好,凑合着看吧. 单击进 ...
vue 引入json地图_使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件...
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
geojson全国各省市区地图json数据绘制Echarts区域地图
全国json数据获取地址: https://github.com/lyhmyd1211/GeoMapData_CN 单独区域json数据获取地址: http://datav.aliyun.com/to ...
echarts实现柱图的下钻功能
1.确保已安装了cnpm,使用cnpm命令安装echarts: cnpm install echarts --save 2.在main.js文件中,全局引入echarts: import * as e ...
滁州市区地图小区楼盘图矢量高清cdr|pdf2021年（高品质）
滁州市区地图小区楼盘图矢量高清cdr|pdf2021年(高品质).pdf导入cdr,ai软件里面另保存cdr,ai格式可以编辑内容,修改文字>下载图看:https://download.csdn ...

echarts使用省地图并下钻到市区地图并返回

echarts使用省地图并下钻到市区地图并返回

echarts使用省地图并下钻到市区地图并返回相关推荐

最新文章

热门文章