实现步骤

初始化，获取全国的坐标json数据
绘制中国地图，同时监听点击事件，使用递归方式实现下钻功能
点击下一层级，获取对应地区的坐标json数据–添加监听事件–实现下钻

注：getGeoJson方法是获取阿里云的地图坐标数据
阿里云地图API

vue实现代码

<template><div id="mainMap"></div>
</template>
<script>
import echarts from "echarts";
import "../json/map/china.js";
import $ from "jquery";export default {name: "echarts",data() {return {chart: null,publicUrl: 'https://geo.datav.aliyun.com/areas_v3/bound/'};},mounted() {this.initChart(); // 初始化界面},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();this.chart = null;},methods: {// 初始时，获取全国的数据async initChart() {let chart = echarts.init(document.getElementById('mainMap'));let alladcode = await this.getGeoJson('all.json') // 调用方法获取json文件数据let chinaGeoJson = await this.getGeoJson('100000_full.json')this.initCharts(chinaGeoJson, '全国', chart, alladcode) // 第一次画图},// 获取地图json数据async getGeoJson(jsonName){return await $.get(this.publicUrl + jsonName)},// 画图initCharts(geoJson, name, chart, alladcode){echarts.registerMap(name, geoJson);let option = {backgroundColor: "#061740",title: {text: name,left: 'center'},series: [{type: 'map',map: name,itemStyle: {areaColor: '#1890ff'}}]}chart.setOption(option, true); // 设置true，上一次渲染的数据不会影响下二次chart.off('click')// 监听点击事件，递归实现下钻功能chart.on('click', params => {let clickRegionCode = alladcode.filter(areaJson => areaJson.name === params.name)[0].adcode;this.getGeoJson(clickRegionCode + '_full.json').then(regionGeoJson => this.initCharts(regionGeoJson, params.name, chart, alladcode)).catch(err => {this.getGeoJson('100000_full.json').then(chinaGeoJson => this.initCharts(chinaGeoJson, '全国', chart, alladcode))})})console.log(222, option)},},
};
</script>

效果图

echarts实现下钻功能的地图相关推荐

echarts+echarts-gl vue2制作3D地图+下钻功能+标记点功能，解决dblclick事件失效问题，解决地图下钻后边框不更新保留问题
目录先看实现效果:编辑步骤一安装echarts和echarts-gl 步骤二设置地图容器在methods中设置初始化地图方法并在mounted中调用在methods中设置初始化地图方法 ...
echarts实现地图下钻功能
很多时候我们需要通过地图进行数据的直观展示,并且展示下级省份.地市.区县的数据,这时我们就需要对地图进行下钻:(由于最近的项目使用的是贵州地图,所以文章中用贵州省进行演示!) 首先我们要实现功能点有以 ...
Vue使用echarts地图进阶2（实现多级下钻功能）
echarts地图实现多级下钻功能点击下钻效果图: 先来小看一下,多级下钻和单次下钻跳转json文件的区别: 1.如果要实现多级下钻并且展示子区域的话,下钻点击事件请求的JSON必须是该点击区域的全 ...
基于Echarts插件的省市区多级地图下钻和返回功能实现
Echarts3的离线地图组件,比echart2更容易实现省市区多级离线地图的展示. 当然echart2也是可以实现,由于echarts是基于canvas,加载一个地图无非就是加载一张图.而这张图,则 ...
echarts 地图下钻功能
vue 实现 echarts 地图下钻安装效果图 echarts 安装 npm install echarts // 引入echarts 中国地图 import echarts from 'ech ...
不习惯的 Vue3 起步六の Echarts绘制下钻地图
序看过一些可视化大屏展示地图的例子,准备动手做做. 既然要开始比制作,那么先把目标定好,做一个展示中国城市的下钻地图使用: Vue3 Vite Typescript echarts 实现效果: 准 ...
echarts使用省地图并下钻到市区地图并返回
echarts使用省地图并下钻到市区地图并返回 <template><div id="area"><div><el-button type ...
echarts实现柱图的下钻功能
1.确保已安装了cnpm,使用cnpm命令安装echarts: cnpm install echarts --save 2.在main.js文件中,全局引入echarts: import * as e ...
echart地图下钻上钻地图分级省市区
最近研究了一下地图上钻下钻的功能,基本实现了左键下钻,右键上钻效果如下有需要的可以参考参考实现的代码如下还需要一个地图数据信息请访问https://download.csdn.net/downlo ...

echarts实现下钻功能的地图

实现步骤

vue实现代码

效果图

echarts实现下钻功能的地图相关推荐

最新文章

热门文章