@echats map drill down, there are two levels of provinces and cities, including location icons
echats official website
echats reference example
pick-up files for various provinces and cities across the country
extraction code 8888
Achieved effect
html style
<el-tab-pane label="图表" name="second" style="position: relative">
<el-button size="small" @click="backChina()" type="primary" plain style="position: fixed;right: 20px;z-index: 999;" v-if="isBack && !isCityBack">还原</el-button>
<el-button size="small" @click="notCovered()" type="warning" plain style="position: fixed;right: 20px;z-index: 999;" v-if="!isBack && !isCityBack">未覆盖区域</el-button>
<el-button size="small" @click="backChina()" type="primary" plain style="position: fixed;right: 20px;z-index: 999;" v-if="isCityBack">返回上级</el-button>
<el-button size="small" @click="notCityCovered()" type="warning" plain style="position: fixed;right: 120px;z-index: 999;" v-if="isCityBack && !isunCouver">未覆盖区域</el-button>
<el-button size="small" @click="citybackChina()" type="primary" plain style="position: fixed;right: 120px;z-index: 999;" v-if="isunCouver">还原</el-button>
<div id="myEchart" ref="myEchart" style="height:600px;"></div>//必须设置高度，否则地图不显示
</el-tab-pane>
js interaction
data: {
//各省份的地图json文件
provinces: {
'上海': '/js/shanghai.json',
'河北': '/js/hebei.json',
'山西': '/js/shanxi.json',
'内蒙古': '/js/neimenggu.json',
'辽宁': '/js/liaoning.json',
'吉林': '/js/jilin.json',
'黑龙江': '/js/heilongjiang.json',
'江苏': '/js/jiangsu.json',
'浙江': '/js/zhejiang.json',
'安徽': '/js/anhui.json',
'福建': '/js/fujian.json',
'江西': '/js/jiangxi.json',
'山东': '/js/shandong.json',
'河南': '/js/henan.json',
'湖北': '/js/hubei.json',
'湖南': '/js/hunan.json',
'广东': '/js/guangdong.json',
'广西': '/js/guangxi.json',
'海南': '/js/hainan.json',
'四川': '/js/sichuan.json',
'贵州': '/js/guizhou.json',
'云南': '/js/yunnan.json',
'西藏': '/js/xizang.json',
'陕西': '/js/shanxi-xian.json',
'甘肃': '/js/gansu.json',
'青海': '/js/qinghai.json',
'宁夏': '/js/ningxia.json',
'新疆': '/js/xinjiang.json',
'北京': '/js/beijing.json',
'天津': '/js/tianjin.json',
'重庆': '/js/chongqing.json',
'香港': '/js/xianggang.json',
'澳门': '/js/aomen.json',
'台湾': '/js/taiwan.json'
},
//各省份的数据
allData: [{
name: '北京',
value: [116.4551, 40.2539]
}, {
name: '天津',
value:[117.4219, 39.4189]
}, {
name: '上海',
value:[121.4648, 31.2891]
}, {
name: '重庆',
value: [108.384366, 30.439702]
}, {
name: '河北',
value: [114.4995, 38.1006]
}, {
name: '河南',
value:[113.4668, 34.6234]
}, {
name: '云南',
value:[102.9199, 25.4663]
}, {
name: '辽宁',
value:[123.1238, 42.1216]
}, {
name: '黑龙江',
value:[127.9688, 45.368]
}, {
name: '湖南',
value:[113.0823, 28.2568],
}, {
name: '安徽',
value:[117.29, 32.0581]
}, {
name: '山东',
value: [117.1582, 36.8701]
}, {
name: '新疆',
value:[87.611053,43.828171]
}, {
name: '江苏',
value:[118.767413,32.041544]
}, {
name: '浙江',
value:[120.153576, 30.287459]
}, {
name: '江西',
value:[116.0046, 28.6633]
}, {
name: '湖北',
value:[114.3896, 30.6628]
}, {
name: '广西',
value:[108.479, 23.1152]
}, {
name: '甘肃',
value:[103.5901, 36.3043]
}, {
name: '山西',
value:[112.3352, 37.9413]
}, {
name: '内蒙古',
value: [110.3467, 41.4899]
}, {
name: '陕西',
value:[109.1162, 34.2004]
}, {
name: '吉林',
value:[125.8154, 44.2584]
}, {
name: '福建',
value:[119.306239, 26.08]
}, {
name: '贵州',
value:[106.6992, 26.7682]
}, {
name: '广东',
value:[113.12244, 23.009505]
}, {
name: '青海',
value:[101.778916, 36.623178]
}, {
name: '西藏',
value:[91.117212,29.646922]
}, {
name: '四川',
value:[103.9526, 30.7617]
}, {
name: '宁夏',
value:[106.3586, 38.1775]
}, {
name: '海南',
value:[110.3893, 19.8516]
}, {
name: '台湾',
value:[120.702967,24.123621]
}, {
name: '香港',
value:[114.171994, 22.281089]
}, {
name: '澳门',
value:[113.549403, 22.192961]
}],
coverageRateStr:'',
provinceCoverArea:[],
cityCoverArea:[],
isBack:false,//省份还原显隐
isCityBack:false,//城市返回上级显隐
isunCouver:false,//未覆盖按钮
cityName:'',
cityJson:[]
},
map rendering
methods: {
//隐藏加载中的状态，我们不需要有加载中的状态
hideLoading() {
$(".layui-layer-loading").css("display","none")
$(".layui-layer-loading1").css("display","none")
},
// 点击标签
handleClick(tab,event){
if(tab.index==1){
this.activeName='second'
this.$nextTick(()=>{
this.loadMap('/js/全国各个省的json.json', 'china');//初始化全国地图
let myChart = echarts.init(document.querySelector("#myEchart"));
let _this=this
//单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
myChart.on('click', function (params) {
var name = params.name; //地区name
_this.allData.forEach(v=>{
if(v.name.indexOf(name)!=-1){
_this.cityName=name
if(_this.provinces[name]){
_this.isCityBack=true
_this.isunCouver=false
_this.hideLoading()
request2('********',{
provinceName:name},_this.callbackInitDataIsCover,'GET')//同步请求
let temporarycityData=[]
_this.hideLoading()
$.ajax({
type: 'get',
url: '/js/全国省市经纬度.json',
traditional: true,
success: function (data) {
_this.hideLoading()
this.cityJson=data.allData
data.allData.forEach(v=>{
if(v.name.indexOf(name)!=-1){
temporarycityData=v.children
_this.loadCityMap(_this.provinces[name], name,temporarycityData);
}
})
},
error: function (err) {
layer.alert("Connection error");
}
})
}
}
})
});
// // 绑定双击事件，返回全国地图
// myChart.on('dblclick', function (params) {
// //当双击事件发生时，清除单击事件，仅响应双击事件
// clearTimeout(_this.timeFn);
// //返回全国地图
// _this.loadMap('/js/appjs/crm/reportManage/report/province/data-1527045631990-r1dZ0IM1X.json', 'china');
// });
})
}
else{
this.activeName='first'
}
},
/**
* 还原
*/
backChina(){
this.isBack=false
this.isCityBack=false
this.isunCouver=false
let _this=this
//返回全国地图
_this.loadMap('/js/全国各个省的json.json', 'china');
_this.notCoveredArea('/js/全国各个省市的json.json', 'china',[]);
},
/**
* 未覆盖区域
*/
notCovered(){
let provinceArea=[]
this.provinceCoverArea.forEach(v=>{
if(v.isCover=='否'){
provinceArea.push({
name:v.provinceName,
value:1
})
}else{
provinceArea.push({
name:v.provinceName,
value:4
})
}
})
if(provinceArea.length>0){
this.isBack=true
}else{
this.$message.warning('全部区域已经覆盖')
}
this.notCoveredArea('/js/全国各个省市的json.json', 'china',provinceArea);
},
notCoveredArea(mapCode, name,provinceArea) {
let _this=this
let myChart = echarts.init(document.querySelector("#myEchart"));
_this.hideLoading()
$.get(mapCode, function (data) {
if (data) {
_this.hideLoading()
echarts.registerMap(name, data);
var option1 = {
backgroundColor:'#fff',
title: {
show: true,
x: "center",
y: "top",
text:name=='china'? '全国**资源覆盖范围':name,
textStyle: {
color: "#000",
fontSize: 16
}
},
visualMap: {
show:false,
min: 0,
max: 5,
left: 0,
bottom: 0,
pieces: [{
gte: 0,
lte: 2,
label: "未覆盖区域",
color: "#F4B647",
},
{
gte: 3,
lte: 5,
label: "覆盖区域",
color: "#fff",
},
],
},
geo: [
{
map: name,
type:'map',
zlevel: -2,
aspectScale: 0.75,
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: '100%',
roam: false,
silent: true,
zoom:name=='china'? 1:0.7,
itemStyle: {
normal: {
borderColor: '#000',
borderWidth: 1,
shadowColor: '#7A3109',
areaColor:'#fff',
},
},
emphasis: {
areaColor: '#409eff',
borderWidth: 1,
},
}
],
series: {
type: 'map',
map: name,
data:provinceArea
}
};
myChart.setOption(option1);
}
// else {
// _this.$message.warning('暂无下级地图')
// }
});
},
notCityCovered(){
let cityArea=[]
this.cityCoverArea.forEach(v=>{
if(v.isCover=='否'){
cityArea.push({
name:v.cityName,
value:1
})
}else{
cityArea.push({
name:v.cityName,
value:4
})
}
})
console.log(cityArea)
if(cityArea.length>0){
this.isunCouver=true
let num=0
cityArea.forEach(s=>{
if(s.value==4){
num++
}
if(num==cityArea.length){
this.$message.warning('全部区域已经覆盖')
}
})
}
this.notCoveredCityArea(this.provinces[this.cityName], this.cityName,cityArea);
},
notCoveredCityArea(mapCode, name,cityArea) {
let _this=this
let myChart = echarts.init(document.querySelector("#myEchart"));
let numData=[]
let copyCityAllData=JSON.parse(JSON.stringify(this.cityCoverArea))
_this.hideLoading()
$.get(mapCode, function (data) {
if (data) {
_this.hideLoading()
echarts.registerMap(name, data);
var option2 = {
backgroundColor:'#fff',
title: {
show: true,
x: "center",
y: "top",
text:name=='china'? '全国**资源覆盖范围':name,
textStyle: {
color: "#000",
fontSize: 16
}
},
visualMap: {
show:false,
min: 0,
max: 5,
left: 0,
bottom: 0,
pieces: [{
gte: 0,
lte: 2,
label: "未覆盖区域",
color: "#F4B647",
},
{
gte: 3,
lte: 5,
label: "覆盖区域",
color: "#fff",
},
],
},
geo: [
{
map: name,
type:'map',
zlevel: -2,
aspectScale: 0.75,
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: '100%',
roam: false,
silent: true,
zoom:name=='china'? 1:0.7,
itemStyle: {
normal: {
borderColor: '#000',
borderWidth: 1,
shadowColor: '#7A3109',
// shadowOffsetX: 0,
// shadowOffsetY: 15,
// shadowBlur: 10,
areaColor:'#fff',
},
},
emphasis: {
areaColor: '#409eff',
borderWidth: 1,
},
}
],
series: {
type: 'map',
map: name,
data:cityArea
}
};
myChart.setOption(option2);
}
// else {
// _this.$message.warning('暂无下级地图')
// }
});
},
citybackChina(){
this.notCoveredCityArea(this.provinces[this.cityName], this.cityName,[]);
this.isunCouver=false
},
/**
获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息
@params {String} mapCode:json数据的地址
@params {String} name: 地图名称
*/
loadMap(mapCode, name) {
let _this=this
let myChart = echarts.init(document.querySelector("#myEchart"));
let provinceArea=[]
this.provinceCoverArea.forEach(v=>{
if(v.isCover=='是'){
this.allData.forEach(z=>{
if(v.provinceName==z.name){
provinceArea.push(z)
}
})
}
})
_this.hideLoading()
$.get(mapCode, function (data) {
if (data) {
_this.hideLoading()
echarts.registerMap(name, data);
var option = {
backgroundColor:'#fff',
animation:false,
title: {
show: true,
x: "center",
y: "top",
text:name=='china'? '全国**资源覆盖范围':name,
textStyle: {
color: "#000",
fontSize: 16
}
},
geo: [
{
map: name,
type:'map',
zlevel: 0,
aspectScale: 0.75,
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: '100%',
roam: false,
silent: true,
zoom:name=='china'? 1:0.7,
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1,
shadowColor: '#7A3109',
// shadowOffsetX: 0,
// shadowOffsetY: 15,
// shadowBlur: 10,
},
emphasis: {
areaColor: '#409eff',
borderWidth: 0,
},
},
}
],
series: [
{
// name: '全国律所资源覆盖范围',
type: 'map',
mapType: name,
map: name,
roam: false,
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: '100%',
aspectScale: 0.75,
geoIndex: 1,
zoom:name=='china'? 1:0.7,
zlevel: 5,
selectedMode: 'false',//是否允许选中多个区域
label: {
normal: {
show: true,
textStyle: {
color: '#000'
}
},
emphasis: {
show: true,
textStyle: {
color: '#000'
}
}
},
itemStyle: {
normal: {
borderColor: '#000',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: '#fff' // 0% 处的颜色
}, {
offset: 1,
color: '#fff' // 100% 处的颜色
}],
globalCoord: true // 缺省为 false
},
},
emphasis: {
areaColor: '#409eff',
borderWidth: 0.1,
borderColor:'#000'
}
},
data: _this.allData
},
{
type: 'scatter',
coordinateSystem: 'geo',
showAllSymbol: true,
hoverAnimation: false,
zoom:name=='china'? 1:0.7,
symbolSize:[20,30],
symbolOffset:[0,'-20%'],
symbol:'image://data:image/png;',//base64图片地址
data: provinceArea,
zlevel: 6,
},
]
};
myChart.setOption(option);
// _this.backChina()
}
// else {
// _this.$message.warning('暂无下级地图')
// }
});
},
loadCityMap(mapCode, name,temporarycityData) {
let _this=this
let myChart = echarts.init(document.querySelector("#myEchart"));
let cityArea=[]
if(temporarycityData && temporarycityData.length>0){
_this.cityCoverArea.forEach(v=>{
if(v.isCover=='是'){
temporarycityData.forEach(z=>{
// console.log(v.cityName.indexOf(z.name)!=-1)
if(v.cityName.indexOf(z.name)!=-1){
cityArea.push(z)
}
})
}
})
}
console.log(cityArea)
_this.hideLoading()
$.get(mapCode, function (data) {
if (data) {
_this.hideLoading()
echarts.registerMap(name, data);
var option = {
backgroundColor:'#fff',
animation:false,
title: {
show: true,
x: "center",
y: "top",
text:name=='china'? '全国**资源覆盖范围':name,
textStyle: {
color: "#000",
fontSize: 16
}
},
geo: [
{
map: name,
type:'map',
zlevel: -2,
aspectScale: 0.75,
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: '100%',
roam: false,
silent: true,
zoom:name=='china'? 1:0.7,
itemStyle: {
normal: {
borderColor: '#000',
borderWidth: 1,
shadowColor: '#7A3109',
// shadowOffsetX: 0,
// shadowOffsetY: 15,
// shadowBlur: 10,
},
emphasis: {
areaColor: '#409eff',
borderColor: '#fff',
borderWidth: 0,
},
},
}
],
series: [
{
// name: '全国律所资源覆盖范围',
type: 'map',
mapType: name,
map: name,
roam: false,
zlevel: 5,
layoutCenter: ['50%', '50%'], //地图位置
layoutSize: '100%',
aspectScale: 0.75,
zoom:name=='china'? 1:0.7,
selectedMode: 'false',//是否允许选中多个区域
label: {
normal: {
show: true,
textStyle: {
color: '#000'
}
},
emphasis: {
show: true,
textStyle: {
color: '#000'
}
}
},
itemStyle: {
normal: {
borderColor: '#000',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: '#fff' // 0% 处的颜色
}, {
offset: 1,
color: '#fff' // 100% 处的颜色
}],
globalCoord: true // 缺省为 false
},
},
emphasis: {
areaColor: '#409eff',
borderWidth: 0.1,
borderColor:'#fff'
}
},
data: _this.allData
},
{
type: 'scatter',
coordinateSystem: 'geo',
showAllSymbol: true,
hoverAnimation: false,
symbolOffset:[0,'-20%'],
zoom:name=='china'? 1:0.7,
symbolSize:[20,30],
symbol:'image://data:image/png;base64,'//base64图片地址,
data: cityArea,
zlevel: 6,
},
]
};
myChart.setOption(option);
}
// else {
// _this.$message.warning('暂无下级地图')
// }
});
},
callbackInitDataIsCover(_data){
this.cityCoverArea=_data
},
},
It is the first time to write a national map to drill down. The map rendering is not very simple, and the code needs to be improved!