"echarts": "^5.2.2",
<!--实现全国地图下钻，由于涉及JSON文件较多，所以就直接引用在线JSON https://geo.datav.aliyun.com/areas_v3/bound/-->
<template>
<div>
<div
class="areaRankingAll"
ref="areaRankingAll"
:style="{ width: '1000px', height: '1000px' }"
></div>
<div>
<button type="button" @click="cancel">返回上一级</button>
</div>
</div>
</template>
<script>
import axios from "axios"; //采用axios动态请求数据
var echarts = require("echarts");
export default {
name: "areaRankingAll",
mounted() {
this.initChart(); //初始化地图
},
data() {
return {
myChart: null,
//线上请求JSON文件数据地址
publicUrl: "https://geo.datav.aliyun.com/areas_v3/bound/",
//allCode 区域行政编码信息
allCode: [
// {name:"廉江市",adcode:"440881"}
],
regionsArray: [],
spotArray: [],
spotArray2: [],
};
},
methods: {
cancel() {
this.initChart();
},
getGeoJson(jsonName) {
return axios.get(this.publicUrl + jsonName);
},
initEcharts(geoJson, name, chart) {
let self = this;
this.myChart = echarts.init(this.$refs.areaRankingAll);
echarts.registerMap(name, geoJson);
let option = {
title: {
text: name,
},
tooltip: {
trigger: "item",
// formatter: "{b}<br/>{c} (数量)",
formatter(params) {
console.log(params, "params");
return 'params'
},
},
visualMap: {
min: 100,
max: 5000,
text: ["High", "Low"],
realtime: false,
calculable: true,
inRange: {
color: ["lightskyblue", "yellow", "orangered"],
},
},
geo: {
map: name,
zlevel: 1,
regions: this.regionsArray,
label: {
show: true, //是否显示省份名称
},
tooltip: {
trigger: "item",
formatter(params) {
if (params.value && params.value.length > 0) {
return `名称:${params.name}<br>数量:${params.value[2]}`;
}else{
return`${params.name}`
}
},
},
},
series: [
//样式一展示
{
showLegendSymbol: true,
type: "scatter",
coordinateSystem: "geo",
symbol: "pin",
legendHoverLink: true,
symbolSize: [60, 60],
// 这里渲染标志里的内容以及样式
label: {
show: true,
formatter(value) {
return value.data.value[2];
},
color: "#fff",
},
// 标志的样式
itemStyle: {
normal: {
color: "rgba(255,0,0,.7)",
shadowBlur: 2,
shadowColor: "D8BC37",
},
},
// 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
// 至于如何展示，完全是靠上面的formatter来自己定义的
data: this.spotArray,
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
},
hoverAnimation: true,
zlevel: 1,
},
//样式二展示
{
type: "effectScatter",
coordinateSystem: "geo",
effectType: "ripple",
showEffectOn: "render",
rippleEffect: {
period: 10,
scale: 10,
brushType: "fill",
},
hoverAnimation: true,
itemStyle: {
normal: {
color: "rgba(255, 235, 59, .7)",
shadowBlur: 10,
shadowColor: "#333",
},
},
zlevel: 1,
data: this.spotArray2,
},
{
type: "map",
map: name,
data: [],
},
],
};
chart.setOption(option);
chart.off("click");
chart.on("click", (params) => {
//点击区域时的行政编码，然后再进行匹配
let clickCode = self.allCode.filter(
(areaJson) => areaJson.name === params.name
)[0].adcode;
//1、如果要实现多级下钻并且展示子区域的话，下钻点击事件请求的JSON必须是该点击区域的全面父级JSON(即没有自己只有孩子们组成)
//2、如果要实现地图只下钻一次，并且不展示目标下钻区域的子区域。如第一层地图是中国，实现点击某个省下钻到该省，但是不展示该省的子区域，那么下钻点击事件请求的JSON必须是该点击区域的确切json(即只有自己没有孩子们)
//声明：比如这里线上引用的父级JSON带有：地域行政编码_full.json(如中国 100000_full.json),子级JSON是行政编码.json(如廉江市 440881.json)
self
.getGeoJson(clickCode + "_full.json")
.then((res) => {
this.spotArray = [];
this.spotArray2 = [];
if (params.name == "山东省") {
this.regionsArray.push({
name: "青岛市",
itemStyle: {
normal: {
opacity: 1, // 透明度
borderColor: "#fff", // 省份界线颜色
borderWidth: 3, // 省份界线的宽度
areaColor: "red", // 整个省份的颜色
},
},
});
let features = res.data.features;
features.forEach((item) => {
if (item.properties.name == "济南市") {
this.spotArray.push({
name: item.properties.name,
value: [
item.properties.centroid[0],
item.properties.centroid[1],
1000,
],
});
}
if (item.properties.name == "济宁市") {
this.spotArray2.push({
name: item.properties.name,
value: [
item.properties.centroid[0],
item.properties.centroid[1],
1000,
],
});
}
});
}
if (params.name == "青岛市") {
this.regionsArray.push({
name: "崂山区",
itemStyle: {
normal: {
opacity: 1, // 透明度
borderColor: "#fff", // 省份界线颜色
borderWidth: 3, // 省份界线的宽度
areaColor: "red", // 整个省份的颜色
},
},
});
}
self.initEcharts(res.data, params.name, chart);
})
.catch((err) => {
console.log(err, "err");
self.getGeoJson("100000_full.json").then((China) => {
self.initEcharts(China.data, "中华人民共和国", chart);
});
});
});
},
//带头函数-初始化
initChart() {
let chart = echarts.init(this.$refs.areaRankingAll);
//this.allCode获取所有的区域编码信息
this.getGeoJson("all.json").then((all) => {
this.allCode = all.data;
});
//初始化地图展示
this.getGeoJson("100000_full.json").then((China) => {
this.spotArray = [];
this.spotArray2 = [];
this.regionsArray.push({
name: "山东省",
itemStyle: {
normal: {
opacity: 1, // 透明度
borderColor: "#fff", // 省份界线颜色
borderWidth: 3, // 省份界线的宽度
areaColor: "red", // 整个省份的颜色
},
},
});
let features = China.data.features;
features.forEach((item) => {
if (item.properties.name == "西藏自治区") {
this.spotArray.push({
name: item.properties.name,
value: [
item.properties.centroid[0],
item.properties.centroid[1],
1000,
],
});
}
if (item.properties.name == "湖北省") {
this.spotArray2.push({
name: item.properties.name,
value: [
item.properties.centroid[0],
item.properties.centroid[1],
1000,
],
});
}
});
this.initEcharts(China.data, "中华人民共和国", chart);
});
},
},
};
</script>
<style scoped>
</style>
