致新的一年：不知不觉已经是，祝新的一年大展宏图（兔），前途（兔）似锦，今年梦想实现！
正文：
接触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:/#/chartInfo/xnmZ5X4gCz
中国地图json文件链接：/dep/echarts/map/js/china.js
