echarts省市区id（区域编码）实现地图下钻点击（data赋值自定义属性值，geojson信息获取）

致新的一年：不知不觉已经是2023年，祝新的一年大展宏图（兔），前途（兔）似锦，今年梦想实现！

正文：

接触echarts也有很长一段时间了，最近有个很常见的需求，实现省市区下钻，高亮一些有数据的区域例如中国地图的广东省、北京市，接到这个需求，脑海里思考的问题有：（1）通过什么去实现这种下钻文件的拿取（2）如何实现指定区域的高亮效果（3）地图数据如何跟后端维持一致

产品想实现的效果实际上类似如下+下钻功能：

问题（1）：

对echarts有过经验的会发现echarts上面点击事件默认返回的只有点击区域的name中文值，一般都会通过name值去匹配前端写好的一份如{'广东省':'4400000'}实现对应省份区域编码的拿取，这样是很不科学的，毕竟区域名称并不是一成不变的，后端的中文名字也不一定会跟前端保持一致，所以问题来了，如何让echarts点击事件能返回我们想要的数据，例如返回如data:{name:'广东省',code:4400000,xxx}等数据？直接上实现方案：借助geo图层结合series里面的map层赋值

方案一：name值获取对应文件，准备好省市区对应的区域编码code json文件，获取地图json文件跟实现下钻网上已经有很多好文，在此不再讲实现方案（大神们自行百度google，棒棒哒）

this.myChart.on('click',params=>{// 实现地图下钻const {data={}}= paramsconst {name=''} = dataconst mapObj = {'广东':44000000,'上海':xxxxx}// 获取对应的json文件处理方法getMapJSON(`${mapObj[name]}.json`).then(()=>{console.log("下钻后对应处理")})})

方案二：方案一拿到的只能拿到区域名称，并没办法拿到区域编码和相关id，方案二拿取地图geojson文件里面自带对应属性值获取，个人建议这个方法更好，可以自定义一些属性值，直接上例子demo

（1）观察geojson，我们会发现features里面的properties很多情况都会需要使用到，如下

（2）思路：获取到这个属性的属性值，实现，上代码：

方法一（需要下钻建议该方式）：

 // 方法一：注入文件后拿geoJSON数据中的properties属性axios({method: "get",url: "/china.json",}).then((res) => {const mapName = "china";echarts.registerMap(mapName, (data) => {console.log("获取中国地图数据", data);let arr = [];data.features.forEach((item) => {let obj = {name: item.properties.name,id: (item.properties && item.properties.id) || item.id,};arr.push(obj);});});});

方法二：

<template><div id="chart" style="height: 800px; width: 800px"></div>
</template><script>
import * as echarts from "echarts";
// import axios from "axios";export default {data() {return {myChart: null,};},mounted() {this.setOptions();},methods: {setOptions() {this.myChart = echarts.init(document.getElementById("chart"));// 方法一：注入文件后拿geoJSON数据中的properties属性// axios({//   method: "get",//   url: "/china.json",// }).then((res) => {//   const mapName = "china";//   echarts.registerMap(mapName, (data) => {//     console.log("获取中国地图数据", data);//     let arr = [];//     data.features.forEach((item) => {//       let obj = {//         name: item.properties.name,//         id: (item.properties && item.properties.id) || item.id,//       };//       arr.push(obj);//     });//   });// });var mapName = "china";var data = [{ name: "北京", value: 199 },{ name: "天津", value: 42 },{ name: "河北", value: 102 },{ name: "山西", value: 81 },{ name: "内蒙古", value: 47 },{ name: "辽宁", value: 67 },{ name: "吉林", value: 82 },{ name: "黑龙江", value: 123 },{ name: "上海", value: 24 },{ name: "江苏", value: 92 },{ name: "浙江", value: 114 },{ name: "安徽", value: 109 },{ name: "福建", value: 116 },{ name: "江西", value: 91 },{ name: "山东", value: 119 },{ name: "河南", value: 137 },{ name: "湖北", value: 116 },{ name: "湖南", value: 114 },{ name: "重庆", value: 91 },{ name: "四川", value: 125 },{ name: "贵州", value: 62 },{ name: "云南", value: 83 },{ name: "西藏", value: 9 },{ name: "陕西", value: 80 },{ name: "甘肃", value: 56 },{ name: "青海", value: 10 },{ name: "宁夏", value: 18 },{ name: "新疆", value: 180 },{ name: "广东", value: 123 },{ name: "广西", value: 59 },{ name: "海南", value: 14 },];var geoCoordMap = {};var toolTipData = [{name: "北京",value: [{ name: "科技人才总数", value: 95 },{ name: "理科", value: 82 },],},{name: "天津",value: [{ name: "文科", value: 22 },{ name: "理科", value: 20 },],},{name: "河北",value: [{ name: "文科", value: 60 },{ name: "理科", value: 42 },],},{name: "山西",value: [{ name: "文科", value: 40 },{ name: "理科", value: 41 },],},{name: "内蒙古",value: [{ name: "文科", value: 23 },{ name: "理科", value: 24 },],},{name: "辽宁",value: [{ name: "文科", value: 39 },{ name: "理科", value: 28 },],},{name: "吉林",value: [{ name: "文科", value: 41 },{ name: "理科", value: 41 },],},{name: "黑龙江",value: [{ name: "文科", value: 35 },{ name: "理科", value: 31 },],},{name: "上海",value: [{ name: "文科", value: 12 },{ name: "理科", value: 12 },],},{name: "江苏",value: [{ name: "文科", value: 47 },{ name: "理科", value: 45 },],},{name: "浙江",value: [{ name: "文科", value: 57 },{ name: "理科", value: 57 },],},{name: "安徽",value: [{ name: "文科", value: 57 },{ name: "理科", value: 52 },],},{name: "福建",value: [{ name: "文科", value: 59 },{ name: "理科", value: 57 },],},{name: "江西",value: [{ name: "文科", value: 49 },{ name: "理科", value: 42 },],},{name: "山东",value: [{ name: "文科", value: 67 },{ name: "理科", value: 52 },],},{name: "河南",value: [{ name: "文科", value: 69 },{ name: "理科", value: 68 },],},{name: "湖北",value: [{ name: "文科", value: 60 },{ name: "理科", value: 56 },],},{name: "湖南",value: [{ name: "文科", value: 62 },{ name: "理科", value: 52 },],},{name: "重庆",value: [{ name: "文科", value: 47 },{ name: "理科", value: 44 },],},{name: "四川",value: [{ name: "文科", value: 65 },{ name: "理科", value: 60 },],},{name: "贵州",value: [{ name: "文科", value: 32 },{ name: "理科", value: 30 },],},{name: "云南",value: [{ name: "文科", value: 42 },{ name: "理科", value: 41 },],},{name: "西藏",value: [{ name: "文科", value: 5 },{ name: "理科", value: 4 },],},{name: "陕西",value: [{ name: "文科", value: 38 },{ name: "理科", value: 42 },],},{name: "甘肃",value: [{ name: "文科", value: 28 },{ name: "理科", value: 28 },],},{name: "青海",value: [{ name: "文科", value: 5 },{ name: "理科", value: 5 },],},{name: "宁夏",value: [{ name: "文科", value: 10 },{ name: "理科", value: 8 },],},{name: "新疆",value: [{ name: "文科", value: 36 },{ name: "理科", value: 31 },],},{name: "广东",value: [{ name: "文科", value: 63 },{ name: "理科", value: 60 },],},{name: "广西",value: [{ name: "文科", value: 29 },{ name: "理科", value: 30 },],},{name: "海南",value: [{ name: "文科", value: 8 },{ name: "理科", value: 6 },],},];/*获取地图数据*/this.myChart.showLoading();var mapFeatures = echarts.getMap(mapName).geoJson.features;console.log("获取地图geojson文件数据", mapFeatures);let arr = [];mapFeatures.forEach((item) => {let obj = {name: item.properties.name,id: (item.properties && item.properties.id) || item.id,};arr.push(obj);});this.myChart.hideLoading();mapFeatures.forEach(function (v) {// 地区名称var name = v.properties.name;// 地区经纬度geoCoordMap[name] = v.properties.cp;});console.log(data);console.log(toolTipData);var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}return res;};const option = {tooltip: {padding: 0,enterable: true,transitionDuration: 1,textStyle: {color: "#000",decoration: "none",},},// 目前还没有visualMap与geo结合的方案，后续找到方案再更新，有大神也欢迎提供分享方案geo: {show: true,map: mapName,roam: true, // 开启缩放，注意把setOption第二个属性值设置为trueregions: data.map((item) => {// 在此自定义其他逻辑的颜色item = Object.assign(item, {label: {normal: {show: true,},emphasis: {show: false,textStyle: {color: "#fff",},},},itemStyle: {normal: {areaColor: "#031525",borderColor: "#3B5077",},emphasis: {areaColor: "#2B91B7",},},});return item;}), // 将突出某个省份颜色迁移到geo中去实现},series: [{name: "散点",type: "scatter",coordinateSystem: "geo",data: convertData(data),symbolSize: function (val) {return val[2] / 10;},label: {normal: {formatter: "{b}",position: "right",show: true,},emphasis: {show: true,},},itemStyle: {normal: {color: "#fff",},},},{type: "map",map: mapName,geoIndex: 0, // 指定地图图层对应的geoaspectScale: 0.75, //长宽比label: {normal: {show: true,},emphasis: {show: false,textStyle: {color: "#fff",},},},roam: true,itemStyle: {normal: {areaColor: "#031525",borderColor: "#3B5077",},emphasis: {areaColor: "#2B91B7",},},animation: false,showLegendSymbol: false, // 存在legend时显示// 注意注意：此处data不用于渲染省份高亮数组，而是用于把geojson中的属性值赋值，以便点击时候能拿到对应信息data: arr,},{name: "点",type: "scatter",coordinateSystem: "geo",zlevel: 6,},{name: "Top 5",type: "effectScatter",coordinateSystem: "geo",data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 10)),symbolSize: function (val) {return val[2] / 10;},showEffectOn: "render",rippleEffect: {brushType: "stroke",},hoverAnimation: true,label: {normal: {formatter: "{b}",position: "left",show: false,},},itemStyle: {normal: {color: "yellow",shadowBlur: 10,shadowColor: "yellow",},},zlevel: 1,},],};// 加上true可以防止开启geo中roam导致的重绘位置偏移this.myChart.setOption(option, true);// 防止重复触发点击事件this.myChart.off("click");this.myChart.on("click", (params) => {// 实现地图下钻const { data = {} } = params;console.log("data", data);});},},
};
</script>

执行代码打开控制台即可看到相关数据输出

问题（2）：

如何对对应的省份进行颜色渲染或者高亮，上面问题（1）中的方案二可以发现，有两种实现方案

方法一：在series里面map层赋值data,结合visualMap设置颜色根据值分层

    visualMap: {show: true,min: 0,max: 200,left: '10%',top: 'bottom',calculable: true,seriesIndex: [1],inRange: {color: ['#04387b', '#467bc0'] // 蓝绿}},series里面：{type: 'map',map: mapName,geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: true,itemStyle: {normal: {areaColor: '#031525',borderColor: '#3B5077',},emphasis: {areaColor: '#2B91B7'}},animation: false,data: data},

方法二：在geo的regions里面渲染，样式逻辑也只能自己去渲染，目前还没有很好的方案可以让geo的区域颜色结合上visualMap的区块颜色渲染逻辑，data此时存放的是所有省份的属性信息

var mapFeatures = echarts.getMap(mapName).geoJson.features;console.log("获取地图geojson文件数据", mapFeatures);let arr = [];mapFeatures.forEach((item) => {let obj = {name: item.properties.name,id: (item.properties && item.properties.id) || item.id,};arr.push(obj);});

问题（3）：

一遇到这种问题估计得前后端干一架才能统一，前端目前也只能手动修改geo里面的id,不过目前感觉geojson里面的编码还是比较标准的，毕竟有个国际标准在那，也只能发现哪些不太匹配的就去改哪个了~

附：

文章引用的大神demo:https://madeapie.com/#/chartInfo/xnmZ5X4gCz

中国地图json文件链接：https://madeapie.com/dep/echarts/map/js/china.js

echarts省市区id（区域编码）实现地图下钻点击（data赋值自定义属性值，geojson信息获取）相关推荐

echarts 省级地图下钻到市demo
借鉴了昨夜小楼又东风这位兄弟的代码 https://blog.csdn.net/m0_46577631/article/details/124354267?utm_medium=distribut ...
地图下钻、地图点聚合
地图下钻.地图点聚合需求 mapUnder-points 技术数据库地图下钻地图点聚合项目地址:mapUnder-points 需求首先是需要有一个地图下钻的功能来展示不同地区的数据,其次 ...
Echarts使用map3D+visualMap 实现地图下钻，区域高亮状态下变高
想要实现3D地图省市区下钻,地图区域用不同颜色区分数值大小,当hover区域时,当前区域变高,点击下钻 js核心代码 data() {return {cityData,mapData,cityLis ...
vue使用echarts来绘制中国地图下钻省市区县级地图
文章目录前言一.echarts 二.使用步骤 1.vue安装.引入echarts 2.使用echarts 总结前言公司需要一个中国地图点击可进入省市区县级,但是在我使用echarts绘制中国地 ...
Echarts+高德地图，获取全国省市区，区域板块地图获取并高亮显示
当用户选择省市区之后,可以看到对应区域的高亮显示. 如图: 之前用户选择的是江苏省,因此当前高亮显示的是江苏省地图板块,如果之前用户选择的是成都市,那么地图则会变成四川省的版图,高亮显示成都市,如下图 ...
基于Echarts插件的省市区多级地图下钻和返回功能实现
Echarts3的离线地图组件,比echart2更容易实现省市区多级离线地图的展示. 当然echart2也是可以实现,由于echarts是基于canvas,加载一个地图无非就是加载一张图.而这张图,则 ...
echarts 地图下钻到市到区
echarts的地图展示,并且带有下钻到下级市区 vue.js里面操作echarts //vue里面修改模板 <template><div id="china_map_bo ...
echarts+echarts-gl vue2制作3D地图+下钻功能+标记点功能，解决dblclick事件失效问题，解决地图下钻后边框不更新保留问题
目录先看实现效果:编辑步骤一安装echarts和echarts-gl 步骤二设置地图容器在methods中设置初始化地图方法并在mounted中调用在methods中设置初始化地图方法 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...

echarts省市区id（区域编码）实现地图下钻点击（data赋值自定义属性值，geojson信息获取）

致新的一年：不知不觉已经是2023年，祝新的一年大展宏图（兔），前途（兔）似锦，今年梦想实现！

echarts省市区id（区域编码）实现地图下钻点击（data赋值自定义属性值，geojson信息获取）相关推荐

最新文章

热门文章