vuejs+echarts实现在地图上显示数据并可以查看每个省的市数据
1、效果图
2、引入静态资源
在public文件下创建data文件夹，data文件夹下创建china文件夹用于存放各省市经纬度JSON数据(已上传)
将上传数据1、2、3、4、5、6、7、8文件下载解压后复制到china文件中，文件下载地址如下：
1、https://files.cnblogs.com/files/wangyan0926/1.zip?t=1695205049&download=true
2、https://files.cnblogs.com/files/wangyan0926/2.zip?t=1695205058&download=true
3、https://files.cnblogs.com/files/wangyan0926/3.zip?t=1695205068&download=true
4、https://files.cnblogs.com/files/wangyan0926/4.zip?t=1695205084&download=true
5、https://files.cnblogs.com/files/wangyan0926/5.zip?t=1695205093&download=true
6、https://files.cnblogs.com/files/wangyan0926/6.zip?t=1695205102&download=true
7、https://files.cnblogs.com/files/wangyan0926/7.zip?t=1695205109&download=true
8、https://files.cnblogs.com/files/wangyan0926/8.zip?t=1695205115&download=true
9、https://files.cnblogs.com/files/wangyan0926/HK.zip?t=1695205126&download=true （HK.json文件下载地址）
china文件列表：
3、在http.js文件中添加请求方法
locGet(url, param = {}, x_api) {
delete param._rowKey;
delete param._index;
return new Promise((resolve, reject) => {
service({
method: 'get',
url,
x_api,
params: param,
cancelToken: new CancelToken((c) => {
cancel = c;
})
})
.then((res) => {
if (res.status === 200) {
resolve(res.data);
} else {
reject(res.data);
}
})
.catch((error) => {
reject(error)
})
})
},
4、DOM容器
<div class="echart">
<div id="registeredUsersAndDistribution" style="height: 600px;"></div>
</div>
5、初始化echarts实例
<script>
export default {
name:'registeredUsersAndDistribution',
data(){
return {
courMapObj:undefined,
mapDataList:[]
}
},
methods:{
//获取地图接口
getMap(mapChart,areaObj){
//mapChart.showLoading();
let that = this;
let param = {};
let adcode = '';
if(areaObj != undefined){
adcode = areaObj.data.adcode + '_full';
}else{
adcode = '100000_full'; //默认省份数据
}
let path = 请求地址 + '/data-center/data/china/'+ adcode + '.json';
that.$http.locGet(path, param).then((res) => {
//mapChart.hideLoading();
let areaName = areaObj?areaObj.data.name:'china';
that.$echarts.registerMap(areaName, res);
if ( res && res.features && res.features.length>0) {
that.mapDataList = res.features;
if (areaObj != undefined) {
that.getMapChildVal(areaObj.data.level,areaObj.name,100,1657592886806,1665368886806,mapChart,areaObj);
} else {
that.getMapChildVal('country','中国',100,1657592886806,1665368886806,mapChart);
}
}
})
.catch((err) => {
console.log("获取本地数据异常");
});
},
//获取地图子区域值接口
getMapChildVal(type, keyword, size, from, to, mapChart,areaObj){
let that = this;
let param = {
type: type,
keyword: keyword,
size: size,
from: new Date(from).getTime(),
to: new Date(to).getTime()
};
let path = 获取每个省或市的数据接口地址;
that.$http.get(path, param).then((res) => {
let data = res.data && res.data.length>0?res.data:[];
let option = that.setMapData(that.mapDataList, data, areaObj);
mapChart.setOption(option,true);
})
.catch((err) => {
console.log(err);
});
},
//设置地图数据
setMapData(dataArr, data, areaObj){
if(data.length>2){
data.sort((a,b)=>{
return a.count-b.count
});
}
let that = this;
let option = {
tooltip: {
trigger: 'item',
formatter: ''
},
roam:true,
projection: {
project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],
unproject: (point) => [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]
},
toolbox: {
top:20,
right:40,
show:true,
feature: {
myTool1:{
show:true,
icon: 'image://'+ require('@/assets/image/BusinessOverview/icon-back.png'),
title: '返回',
onclick: function (){
var mapChart = that.$echarts.init(document.getElementById("registeredUsersAndDistribution"));
that.getMap(mapChart);
}
},
saveAsImage:{
show: true,
icon: 'image://'+ require('@/assets/image/BusinessOverview/icon-download.png'),
title: '下载'
}
}
},
layoutCenter: that.filterMapPosition(areaObj),
layoutSize: that.filterMapSize(areaObj),
visualMap: {
show:false,
min: (data.length>2)?data[0].count:0,
max: (data.length>=1)?data[data.length-1].count:0,
text: ['高', '低'],
realtime: false,
calculable: false,
inRange: {
color: ['#03284c','#39E9FF']
},
bottom: 80,
},
series:[
{
type:'map',
colorBy:'series',
name: areaObj?areaObj.data.name:'中国地区',
map: areaObj?areaObj.data.name:'china',
label: {
show: true,
normal: {
textStyle: {
fontSize: 15,
fontWeight: 'bold',
color: '#ffffff',
shadowColor:'#000',
shadowBlur:10
}
}
},
data:that.filterMapData(dataArr,data),
itemStyle:{
normal: {
label: {
show: true,
formatter:(params)=>{
if(params.value == 0){
return ''
}else{
return params.value
}
},
},
borderColor:'#5f96c7',
shadowColor: 'rgba(0, 0,0, 0.3)',
shadowBlur: 5,
shadowOffsetX: 5,
shadowOffsetY: 5
},
},
emphasis:{
label:{
show: true,
color:'#fff',
},
itemStyle:{
areaColor: 'rgba(57,233,255,0.2)', //鼠标滑过区域颜色
borderColor:'#39E9FF',
}
},
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 3
},
}
]
};
return option
},
filterMapPosition(areaObj){
let position = [];
if(areaObj && areaObj.data.level === 'province'){
position = ['50%', '40%'];
}else if(areaObj && areaObj.data.level === 'city'){
position = ['50%', '40%'];
}else{
position = ['50%', '52%'];
}
return position
},
filterMapSize(areaObj){
let size = 600;
if(areaObj && areaObj.data.level === 'province'){
size = 400;
}else if(areaObj && areaObj.data.level === 'city'){
size = 400;
}
return size
},
//设置地图数据值
filterMapData(mapGeoData,mapValData) {
return mapGeoData.map((item, index) => {
let obj = {};
obj.name = item.properties.name;
obj.value = 0;
mapValData.map((o,i)=>{
if(o.name === item.properties.name){
obj.value = o.count
}
});
if(item.properties.name === '甘肃省'){
obj.emphasis={
label:{
show: true,
color:'#fff',
offset: [-30,-30]
}
}
}
obj.adcode = item.properties.adcode;
obj.level = item.properties.level;
return obj;
});
},
// 给地图绑定点击事件
bindMapClick(mapChart){
let that = this;
let param = {};
window.onresize = mapChart.resize;
mapChart.on('click', function(params){
if(params.data.level === 'district'){
return
}
that.courMapObj = Object.assign({},params);
that.getMap(mapChart,params);
});
},
// 初始化关系图
initEchart() {
// 基于准备好的dom，初始化echarts实例
// 绘制图表
let mapChart = this.$echarts.init(document.getElementById("registeredUsersAndDistribution"));
this.getMap(mapChart);
this.bindMapClick(mapChart);
window.addEventListener("resize", () => {
mapChart.resize();
});
},
},
mounted(){
this.initEchart();
},
}
</script>
