echarts地图省市两级下钻

地图下钻分四步：

1.参考echarts画地图，将初始地图显示在界面

2.封装方法发送请求获取本地静态资源json，文件名通过mapCode进行拼接，以此来获取不同的地图数据

3.点击地图区域时可以获取到当前区域的名称，将名称与定义的data数据做对比，当名称相同时获取当前区域的mapCode，将获取的值传入方法中去调用方法获取地图数据。

4.通过@contextmenu.prevent绑定鼠标右击事件，调用方法返回到上一级

<div class="area"

id="map"

@contextmenu.prevent="backMap"

</div>

</template>

//引入axios来请求本地静态资源json

import axios from 'axios'

export default {

data() {

return {

city: [

{

"name": "浙江省",

"id": 33

{

"name": "杭州市",

"id": 330100

{

"name": "宁波市",

"id": 330200

{

"name": "温州市",

"id": 330300

{

"name": "嘉兴市",

"id": 330400

{

"name": "湖州市",

"id": 330500

{

"name": "金华市",

"id": 330600

{

"name": "绍兴市",

"id": 330700

{

"name": "衢州市",

"id": 330800

{

"name": "舟山市",

"id": 330900

{

"name": "台州市",

"id": 331000

{

"name": "丽水市",

"id": 331100

}

mapStack: [],

curMap: {},

cityMap: {},

mapCode: 33,

name: '浙江省', //最初显示浙江省地图

mapId: '',

}

mounted() {

this.getMapId()

this.getCitys()

methods: {

//根据地区名称获取当前地图json编号，页面第一次加载时为浙江省

getMapId() {

this.city.forEach(e => {

if (this.name == e.name) {

this.mapId = e.id

}

})

//调用地图加载方法，加载地图

this.loadMap(this.mapId, this.name)

//地图加载，根据点击的名称对应的mapcode来加载相应区域的地图数据

loadMap(mapCode, mapName) {

axios.get('contents/mock/' + mapCode + '.json').then(res => {

let data = res.data

if (data) {

let myChart = this.$echarts.init(this.$refs.map)

this.cityMap = Object.assign({}, data)

console.log(this.cityMap, data)

this.$echarts.registerMap(mapName, data)

var option = {

tooltip: {

trigger: 'item',

formatter: '{b}'

dataRange: {

min: 0,//值域控件最小值

max: 10,//值域控件最大值

calculable: true,//默认为false,设置为true时值域显示为线性渐变

precision: 0,//小数精度，默认为0

color: ['#45A7FF', '#91D5FF', '#0A73DA', '#69C0FF', '#004599', '#0A73DA'],//值域颜色，最少两个

show: false

series: [

{

name: '',

type: 'map',

mapType: mapName,

selectedMode: 'single',

zoom: 1.2,

itemStyle: {

normal: { //默认状态

areaColor: '#BAE7FF', //地图本身的颜色

borderColor: '#fff', //省份的边框颜色

borderWidth: 1, //省份的边框宽度

opacity: 0.8, //图形透明度

emphasis: { //高亮状态

areaColor: '#91D5FF', //高亮时候地图显示的颜色

borderWidth: 0 //高亮时候的边框宽度

label: {

normal: {

show: true

emphasis: {

show: true

}

]

};

myChart.setOption(option);

//存储当前地图的信息

this.curMap = {

mapCode: this.mapCode,

mapName: mapName

};

} else {

// alert('无法加载该地图');

}

});

//点击地图获取的params的值

//克隆后cityMap的值（当前区域地图的json）

//下钻，点击地图区域获取的params与获取到的json数据做比较，如果名称相同则取id

getCitys() {

let myChart = this.$echarts.init(this.$refs.map);

console.log(this.cityMap)

myChart.on('click', (params) => {

let name = params.name;

this.cityMap.features.map((item) => {

console.log(name, item)

if (item.properties.name == name) {

this.mapCode = item.id

}

})

if (!this.mapCode) {

// alert('缺失地图数据');

return;

}

console.log(this.mapCode, name)

this.loadMap(this.mapCode, name);

//将上一级地图信息压入mapStack

this.mapStack.push({

mapCode: this.curMap.mapCode,

mapName: this.curMap.mapName

})

//鼠标右击返回省级

backMap() {

this.loadMap(33, '浙江')

}

效果图:

echarts地图省市两级下钻相关推荐

【五六七人口普查】我国省市两级各行业门类人口及三次产业人口比重
人口数据是我们在各项研究中最常使用的数据!之前我们分享过第七次人口普查(简称七普)的数据!很多小伙伴拿到数据后都反馈数据非常好用,同时很多小伙伴咨询有没有前面几次人口普查的数据,这样方便做人口变化分析 ...
【五六七人口普查】我国省市两级人口婚姻状况和妇女生育状况
人口数据是我们在各项研究中最常使用的数据!之前我们分享过第七次人口普查(简称七普)的数据!很多小伙伴拿到数据后都反馈数据非常好用,同时很多小伙伴咨询有没有前面几次人口普查的数据,这样方便做人口变化分析 ...
【五六七人口普查】我国省市两级家庭户住房状况
人口数据是我们在各项研究中最常使用的数据!之前我们分享过第七次人口普查(简称七普)的数据!很多小伙伴拿到数据后都反馈数据非常好用,同时很多小伙伴咨询有没有前面几次人口普查的数据,这样方便做人口变化分析 ...
echarts地图省市区县名称显示位置调整
问题"崇州市"显示跑错地方了: 1.地图经纬度查询地址: 先查询出具体经纬度, 然后 2.修改json地图上显示名称的位置坐标[与上面查询的经纬前后相反]的"cp&quo ...
【五六七人口普查】省市两级人口受教育情况
人口数据是我们在各项研究中最常使用的数据!之前我们分享过第七次人口普查(简称七普)的数据!很多小伙伴拿到数据后都反馈数据非常好用,同时很多小伙伴咨询有没有前面几次人口普查的数据,这样方便做人口变化分析 ...
【五六七人口普查】我国省市两级人口基本情况
人口数据常用于各项研究中!之前我们介绍过第七次人口普查(简称七普)的人口数据!很多小伙伴咨询有没有前面几次人口普查指标数据的介绍,这样方便做人口变化分析!本次我们特地整理了五普.六普的人口数据指标,加 ...
【五六七人口普查】省市两级有老年人的户数、人口自然变动和迁入人口
人口数据常用于各项研究中!之前我们介绍过第七次人口普查(简称七普)的人口数据!很多小伙伴咨询有没有前面几次人口普查指标数据的介绍,这样方便做人口变化分析!本次我们特地整理了五普.六普的人口数据指标,加 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
实时最新中国省市区县geoJSON格式地图行政边界数据Echarts地图数据（可精确到街道级）
geojson 数据下载地址:https://hxkj.vip/demo/echartsMap/ 可下载的数据包含省级geojson行政边界数据.市级geojson行政边界数据.区/县级geojson ...

echarts地图省市两级下钻

echarts地图省市两级下钻相关推荐

最新文章

热门文章