echarts地图绘制并实现下钻功能

阿里云界面如图

// 1、准备echarts地图容器<div class="map" ref="myChart" style="width:500px;height:500px;"></div>
// js部分import * as echarts from 'echarts'// 阿里云地址里下载下来全国的json数据，存储为china.jsonimport china from './china.json'
let map_level = 'china'
data() {return {myChart: null,option: {}}},mounted() {this.initMap();},methods: {initMap() {this.myChart = echarts.init(document.querySelector('.map'));echarts.registerMap('china', china);this.myChart.hideLoading();this.option = {animation : false,backgroundColor: 'transparent',geo: {map: 'china',layoutCenter: ["50%", "50%"], //地图位置// aspectScale: 1.55, //长宽比// layoutSize: '140%',zoom: 1,// center: [109.975625,39.654296],left: 0,right: 0,top: 0,bottom: 0,roam: false,// 是否开启鼠标缩放和平移漫游label:{show: true,// 设为false时不显示区域名称color:'#1EBAA4',fontSize: 10},itemStyle: {areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: 'transparent' // 0% 处的颜色}, {offset: 1,color: 'transparent' // 100% 处的颜色}],globalCoord: true // 缺省为 false},borderColor: 'red',shadowColor: 'transparent',shadowOffsetX: 10,shadowOffsetY: 11},emphasis: {itemStyle: {areaColor: 'transparent'},label:{show: false,color:'#1EBAA4'},},},series: []};this.myChart.setOption(this.option, true);let that = this;// 添加下钻功能this.myChart.on('click', function (params) {// console.log(params);// 判断地图类型,中国地图则变为省地图,省地图变为市区地图map_level = map_level === 'china' ? 'province' : map_level === 'province' ? 'city' : null;if (!map_level) returnif (map_level === 'province') {that.createMap('geometryProvince', that.getProvinceId(mapList, params.name), params.name)} else if (map_level === 'city') {that.createMap('geometryCouties', that.getcityId(cityinfo, params.name), params.name)}})},createMap(url, id, name) {if (map_level === 'province') {// let newJson = provinceList[id];// cityinfo = chinaJsonthis.option.geo.map = name;echarts.registerMap(name, provinceList[id]);// provinceList为省份数据集合，格式为{// '省份1id': data1,// '省份2id': data2// }this.myChart.setOption(this.option, true);} else {}},// 获取省份idgetProvinceId(mapList, name) {// mapList为从阿里云下载下来的具体某个省份的经纬度数据,具体逻辑根据自己的实际情况修改for (let i in mapList) {if (name.indexOf(mapList[i].label)!==-1) {return mapList[i].value}}},// 获取市区idgetcityId(cityinfo, name) {// 具体逻辑根据自己的实际情况修改for (let i in cityinfo.features) {if (cityinfo.features[i].properties.name == name) {return cityinfo.features[i].properties.id + '00'}}}}

最终效果如下

此时会发现，地图下方有个南海诸岛，有时候不需要它需要把它去掉，
使用geo时，可以在geo中设置

regions: [ // 对某块地区的特殊处理，此处可以隐藏掉南海诸岛{name: '南海诸岛', value: 0,itemStyle: {normal: {opacity: 0, //透明度label: {show: false}}}}],