本文参考网址
使用echarts地图需要先准备好echarts地图渲染需要的json数据,数据可以从阿里云地址中下载自己需要的,下载之后直接引入即可使用,本文针对全国地图做一个简单的demo
阿里云界面如图
// 1、准备echarts地图容器
<div class="map" ref="myChart" style="width:500px;height:500px;">
</div>
// js部分
import * as echarts from 'echarts'
// 阿里云地址里下载下来全国的json数据,存储为china.json
import 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) return
if (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 = chinaJson
this.option.geo.map = name;
echarts.registerMap(name, provinceList[id]);
// provinceList为省份数据集合,格式为{
// '省份1id': data1,
// '省份2id': data2
// }
this.myChart.setOption(this.option, true);
} else {
}
},
// 获取省份id
getProvinceId(mapList, name) {
// mapList为从阿里云下载下来的具体某个省份的经纬度数据,具体逻辑根据自己的实际情况修改
for (let i in mapList) {
if (name.indexOf(mapList[i].label)!==-1) {
return mapList[i].value
}
}
},
// 获取市区id
getcityId(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}
}
}
}
],
除了使用geo来实现外,还可以使用series来实现,关键代码如下:
// option中的geo去掉,使用series
series: [
{
name: 'map',
type: "map",
mapType: 'china',
roam: false,
zoom: 1,
label: {
normal: {
show: true,
textStyle: {
color: "#000",
},
},
},
itemStyle: {
normal: {
borderColor: "#B79891",
borderWidth: "1",
areaColor: "transparent",
},
emphasis: {
areaColor: 'transparent',
}
},
// 去掉南海诸岛
data: [{ name: "南海诸岛", value: 0, itemStyle: { normal: { opacity: 0, label: { show: false } },
emphasis: { opacity: 0, label: { show: false } } } }]
}
]
此时效果如下图
如想把底部边界线也给去掉,可以在china.json中找到以下代码,给注释掉或删除掉
删除之后效果如下:
注意
使用series来实现时,下钻时的方法需要修改下,createMap中的
this.option.geo.map = name;需要改为this.option.series[0].mapType = name;