相关必要文件已上传个人GIT代码库,自行下载
https://gitee.com/lemon-design/EchartsMapDeepDown.git
下钻数据为假数据 中国–>辽宁–>大连
附上代码
<template>
<div style="background: rgba(0, 0, 0, 0.2);height:900px">
<div id="map" style="height:888px"></div>
</div>
</template>
<script>
import {cityMap} from '../assets/cityMap/citymap'
import {provinces} from '../assets/cityMap/provinces'
var echarts = require('echarts')
export default {
name: '',
data() {
return {
mapOfIndustry: {
backgroundColor: '#14285b',
title: {
text: '中国高校分布',
subtext: '',
top: '30',
left: 'center',
textStyle: {
color: '#fff'
},
subtextStyle: {
color: '#ccc',
fontSize: 13,
fontWeight: 'normal',
fontFamily: 'Microsoft YaHei'
}
},
tooltip: {
trigger: 'item',
formatter: '{b}',
formatter: function (params) {
// console.log(params)
return params.seriesName + '<br/>' + params.name + ' : ' + params.value
}
},
//左侧小导航图标
visualMap: {
show: true,
x: 'right',
y: 'bottom',
splitList: [
{
start: 500
}, {
start: 400,
end: 500
},
{
start: 300,
end: 400
},
{
start: 200,
end: 300
},
{
start: 100,
end: 200
},
{
start: 0,
end: 100
}
],
textStyle: {
color: '#ffffff'
},
color: ['#5b2546', '#7d4269', '#564bab', '#335bae']
},
series: [{
name: '',
type: 'map',
mapType: 'china',
itemStyle: {
normal: {
label: {
show: false
}
},
emphasis: {
label: {
show: true
}
}
},
data: [
{name: '辽宁', value: 1555},
{name: '黑龙江', value: 1555},
{name: '吉林', value: 1555}
]
}],
animationDuration: 1000,
animationEasing: 'cubicOut',
animationDurationUpdate: 1000
},
coData: [
{name: '北京', value: "123"},
{name: '天津', value: "3422"},
{name: '上海', value: "23423"},
{name: '重庆', value: "234"},
{name: '河北', value: "33"},
{name: '河南', value: "44"},
{name: '云南', value: "322"},
{name: '辽宁', value: "324"},
{name: '黑龙江', value: "777"},
{name: '湖南', value: "44"},
{name: '安徽', value: "5345"},
{name: '山东', value: "456"},
{name: '新疆', value: "4532"},
{name: '江苏', value: "456"},
{name: '浙江', value: "145"},
{name: '江西', value: "782"},
{name: '湖北', value: "213"},
{name: '广西', value: "452"},
{name: '甘肃', value: "885"},
{name: '山西', value: "148"},
{name: '内蒙古', value: "356"},
{name: '陕西', value: "975"},
{name: '吉林', value: "964"},
{name: '福建', value: "55"},
{name: '贵州', value: "5452"},
{name: '广东', value: "456"},
{name: '青海', value: "45"},
{name: '西藏', value: "12"},
{name: '四川', value: "73"},
{name: '宁夏', value: "745"},
{name: '海南', value: "752"},
{name: '台湾', value: "7865"},
{name: '香港', value: "789"},
{name: '澳门', value: "456"}
],
dataProvince: [
{value: 204, name: "沈阳市"},
{value: 355, name: "大连市"},
{value: 488, name: "鞍山市"},
{value: 523, name: "抚顺市"},
{value: 204, name: "本溪市"},
{value: 355, name: "丹东市"},
{value: 488, name: "锦州市"},
{value: 523, name: "营口市"},
{value: 204, name: "阜新市"},
{value: 355, name: "辽阳市"},
{value: 488, name: "盘锦市"},
{value: 523, name: "铁岭市"},
{value: 204, name: "朝阳市"},
{value: 355, name: "葫芦岛市"}
],
dataCity: [
{value: 204, name: "西岗区"},
{value: 355, name: "中山区"},
{value: 488, name: "长海县"},
{value: 523, name: "甘井子区"},
{value: 204, name: "瓦房店市"},
{value: 355, name: "普兰店市"},
{value: 488, name: "庄河市"},
{value: 523, name: "旅顺口区"},
{value: 204, name: "沙河口区"},
{value: 355, name: "金州区"}
],
}
},
mounted() {
this.mapCH()
},
methods: {
/**
* 地图下钻
*/
mapCH() {
var a = this.coData
var b =this.dataProvince
var c =this.dataCity
let that = this
var mapChart = echarts.init(document.getElementById('map'), 'dark')
var geoCoordMap = {
'江西公司': [117.121225, 36.66466],
'大连公司': [121.03, 38.7],
}
var dataX = [
{name: '江西公司', value: 190},
{name: '大连公司', value: 158},
];
//直辖市和特别行政区-只有二级地图,没有三级地图
var special = ['北京', '天津', '上海', '重庆', '香港', '澳门']
var mapdata = []
var mappointdata = []
//绘制全国地图
that.axios.get('static/map/china.json').then(res => {
var data = res.data
var d = []
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name,
})
}
var point = [];
for (var i = 0; i < dataX.length; i++) {
var geoCoord = geoCoordMap[dataX[i].name];
if (geoCoord) {
point.push({
name: dataX[i].name,
value: geoCoord
});
}
}
mappointdata = point
mapdata = d
var coData=this.coData
//注册地图
echarts.registerMap('中国', data)
//绘制地图
that.renderMap('中国', d, mappointdata,a)
}).catch(err => {
console.log("错误1:------------------------")
console.log(err)
})
//地图点击事件
mapChart.on('click', function (params) {
if (params.name in provinces) {
//如果点击的是34个省、市、自治区,绘制选中地区的二级地图
that.axios.get('static/map/provinces/' + provinces[params.name] + '.json').then(res => {
console.log("获取省代号id")
var codeId=provinces[params.name]
console.log(codeId)
var data = res.data
var d = []
for (var i = 0; i < data.features.length; i++) {
// var geoCoord = geoCoordMap[data[i].name];
d.push({
name: data.features[i].properties.name,
value: data.features[i].properties.value,
});
}
echarts.registerMap(params.name, data)
that.renderMap(params.name, d,mappointdata,b)
}).catch(err => {
console.log("错误2:------------------------")
console.log('map', err)
})
}
else if (params.seriesName in provinces) {
//如果是【直辖市/特别行政区】只有二级下钻
if (special.indexOf(params.seriesName) >= 0) {
// renderMap('中国', mapdata)
// renderMap('中国', mapdata)
//绘制全国地图
that.axios.get('static/map/china.json').then(res => {
var data = res.data
var d = []
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name,
})
}
var point = [];
for (var i = 0; i < dataX.length; i++) {
var geoCoord = geoCoordMap[dataX[i].name];
if (geoCoord) {
point.push({
name: dataX[i].name,
value: geoCoord
});
}
}
mappointdata = point
mapdata = d
//注册地图
echarts.registerMap('中国', data)
//绘制地图
that.renderMap('中国', d, mappointdata,a)
}).catch(err => {
console.log("错误4:------------------------")
console.log(err)
})
}
else {
//显示县级地图
that.axios.get('static/map/city/' + cityMap[params.name] + '.json').then(res => {
console.log("获取市代号id")
console.log(cityMap[params.name])
var data = res.data
console.log("地图点击事件")
console.log(data)
echarts.registerMap(params.name, data)
var d = []
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name,
value: data.features[i].properties.value
})
}
that.renderMap(params.name, d,mappointdata,c)
}).catch(err => {
console.log("错误3:------------------------")
console.log('map', err)
})
}
}
else {
// renderMap('中国', mapdata)
//绘制全国地图
that.axios.get('static/map/china.json').then(res => {
var data = res.data
var d = []
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name,
})
}
var point = [];
for (var i = 0; i < dataX.length; i++) {
var geoCoord = geoCoordMap[dataX[i].name];
if (geoCoord) {
point.push({
name: dataX[i].name,
value: geoCoord
});
}
}
mappointdata = point
mapdata = d
//注册地图
echarts.registerMap('中国', data)
//绘制地图
that.renderMap('中国', d, mappointdata,a)
}).catch(err => {
console.log("错误4:------------------------")
console.log(err)
})
}
})
},
/**
* 地图dom渲染
* @param map
* @param data
* @param mappointdata
*/
renderMap(map, data, mappointdata,dataColor) {
console.log("传值")
console.log(dataColor)
var geoCoordMap = {
'江西公司': [117.121225, 36.66466],
'大连公司': [121.03, 38.7],
}
var dataX = [
{name: '江西公司', value: 190},
{name: '大连公司', value: 158},
];
var convertData = function (dataX) {
var res = [];
for (var i = 0; i < dataX.length; i++) {
var geoCoord = geoCoordMap[dataX[i].name];
if (geoCoord) {
res.push({
name: dataX[i].name,
value: geoCoord
});
}
}
return res;
};
let mapOfIndustryecharts = this.$echarts.init(document.getElementById('map'))
this.mapOfIndustry.title.subtext = map
this.mapOfIndustry.animationDuration=1000,
this.mapOfIndustry.animationEasing='cubicOut'
this.mapOfIndustry.animationDurationUpdate=1000
this.mapOfIndustry.geo = {
name: '强',
type: 'scatter',
map: map,
zoom: 1.25,
layoutCenter: ['50%', '50%'],//距左百分比,距上百分比
layoutSize: 850,//省份地图大小为600xp。
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
this.mapOfIndustry.series = [
/*{
name: map,
type: 'scatter',
coordinateSystem: 'geo',
aspectScale: 0.75, //长宽比
data: convertData(dataX),
layoutCenter: ['40%', '40%'],
// 如果宽高比大于 1 则宽度为 100,如果小于 1 则高度为 100,保证了不超过 100x100 的区域
layoutSize: 80,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false,
textStyle: {
color: '#ffffff'
}
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: 'red'
}
}
},*/
{
name: map,
type: 'map',
mapType: map,
geoIndex: 1,
aspectScale: 0.75, //长宽比
zoom: 1.25,
layoutCenter: ['50%', '50%'],//距左百分比,距上百分比
layoutSize: 850,//省份地图大小为600xp。
// coordinateSystem: 'geo',
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
textStyle: {
color: '#ffffff'
}
},
emphasis: {
show: true
}
},
// roam: true,
itemStyle: {
normal: {
color: '#F4E925',
areaColor: '#323c48',
borderColor: 'dodgerblue'
}
},
data: dataColor
},
/* {
name: map,
type: 'map',
mapType: map,
coordinateSystem: 'geo',
data: mappointdata,
symbolSize: function(val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F4E925',
areaColor: '#323c48',
borderColor: 'dodgerblue'
}
}
},*/
]
if (map == '黑龙江') {
this.mapOfIndustry.geo.zoom = 0.75
this.mapOfIndustry.series[0].zoom = 0.75
} else if (map == '甘肃') {
this.mapOfIndustry.geo.zoom = 0.5
this.mapOfIndustry.series[0].zoom = 0.5
} else if (map == '中国') {
this.mapOfIndustry.geo.zoom = 1.25
this.mapOfIndustry.series[0].zoom = 1.25
} else {
this.mapOfIndustry.geo.zoom = 1
this.mapOfIndustry.series[0].zoom = 1
}
//渲染地图
mapOfIndustryecharts.setOption(this.mapOfIndustry)
}
}
}
</script>
<style scoped>
</style>
能力不足水平有限
有问题别说脏话
来学习交流就好
有问必答
email:1848199654@qq.com