"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>