vue echarts绘制市级地图下钻

------- 以浙江嘉兴市为例
首先要知道地图的数据获取：http://datav.aliyun.com/portal/school/atlas/area_selector
其次要知道怎么在vue中使用echarts，可参考vite2+vue3项目使用router+echarts+eslint其中的第二部分

如果是要绘制中国地图和省级的话可以直接安装echarts，在其中找到map下的文件即可引用

成品图

1、首先复制市级地图json内容并存储

在网站中点击复制嘉兴市的json内容

在项目的src文件下新建assets文件夹用于存放内容
在assets文件夹下新建json文件夹并在该文件夹下新建文件jiaxing-map.json
将复制的嘉兴市的json内容直接粘贴到当前文件中

2、同样将下钻的区域的json内容复制并存储

这时为了区分，则在json文件夹下新建sub-map文件夹存放区级的地图数据，如下图所示

3、地图数据都准备好了之后需要一个js文件来统筹地图数据

maputil.js

需要建立两个字典，一个是汉字和拼音的对照映射，一个是拼音和JSON文件的映射，这个由自己可灵活配置，并不是唯一的

// 添加的地图json数据
import jiaxing from '_assets/json/jiaxing-map-data.json'
import nanhu from '_assets/json/sub-map/nanhu-data.json'
import xiuzhou from '_assets/json/sub-map/xiuzhou-data.json'
import jiashan from '_assets/json/sub-map/jiashan-data.json'
import pinghu from '_assets/json/sub-map/pinghu-data.json'
import tongxiang from '_assets/json/sub-map/tongxiang-data.json'
import haining from '_assets/json/sub-map/haining-data.json'
// ...const mapDict = {秀洲区: 'xiuzhou',南湖区: 'nanhu',嘉善县: 'jiashan',平湖市: 'pinghu',桐乡市: 'tongxiang',海宁市: 'haining'// ...
}const mapData = {xiuzhou,nanhu,jiashan,pinghu,tongxiang,haining// ...
}export function getMap (mapName) {const cityName = mapDict[mapName]if (cityName) {return [cityName, mapData[cityName]]}return ['jiaxing', jiaxing]
}

4、页面使用

<template><div class="order-map-wrapper"><div ref="charts" class="map"></div></div>
</template><style lang="less">
.order-map-wrapper {width: 100%;height: 100%;.map {width: 100%;height: 100%;}
}
</style><script>
import * as echarts from 'echarts'
import { getMap } from '_assets/json/maputil.js'export default {created () {this.$nextTick(() => {this.initCharts()})},methods: {initCharts () {// 可以多次使用const charts = echarts.init(this.$refs.charts)const option = {// 背景颜色backgroundColor: '#404a59',// 提示浮窗样式tooltip: {show: true,trigger: 'item',alwaysShowContent: false,backgroundColor: '#0C121C',borderColor: 'rgba(0, 0, 0, 0.16)',hideDelay: 100,triggerOn: 'mousemove',enterable: true,textStyle: {color: '#DADADA',fontSize: '33',width: 20,height: 30,overflow: 'break'},showDelay: 100},// 地图配置geo: {map: 'jiaxing',label: {// 通常状态下的样式normal: {show: true,textStyle: {fontSize: 30,color: '#fff'}},// 鼠标放上去的样式emphasis: {textStyle: {color: '#fff'}}},// 地图区域的样式设置itemStyle: {normal: {borderColor: 'rgba(147, 235, 248, 1)',borderWidth: 1,areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色},{offset: 1,color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色}],globalCoord: false // 缺省为 false},shadowColor: 'rgba(128, 217, 248, 1)',shadowOffsetX: -2,shadowOffsetY: 2,shadowBlur: 10},// 鼠标放上去高亮的样式emphasis: {areaColor: '#389BB7',borderWidth: 0}}},graphic: [{type: 'text',left: '10%',top: '10%',style: {textStyle: {fontSize: 35},text: '浙江嘉兴',font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',fill: '#fff'}}],visualMap: {// 是否展示左下角，即是是false，也仅是不显示，不影响数据的映射show: true,// 上下端文字text: ['高', '低'],// 最小值和最大值，必须指定min: 0,max: 6000,// 位置left: '10%',bottom: '10%',// 是否展示滑块calculable: true,// 指定映射的数据，对应的是option.series，这里根据自己的实际需要进行配置seriesIndex: [0],// 从下到上的颜色inRange: {color: ['#00467F', '#A5CC82']},// 字体颜色textStyle: {color: '#fff',map: 'china'}}}console.log(getMap())// 获得数据const [mapName, mapJson] = getMap()option.geo.map = mapName// 地图注册，第一个参数的名字必须和option.geo.map一致echarts.registerMap(mapName, mapJson)charts.setOption(option)charts.on('click', ({ name }) => {// 如果option.graphic里已经有了城市名称，则不进行任何操作，防止频繁点击const index = option.graphic.findIndex(i => i.style.text === name)if (!name || index !== -1) returnconst [mapName, mapJson] = getMap(name)// 修改option的配置，可以继续自定义option.geo.zoom = 0.8// 这里必须要和注册地图时的名字一致option.geo.map = mapName// 为了重新定位，这里使用了lengthconst idx = option.graphic.length + 1option.graphic.push({type: 'text',left: `${idx * 10}%`,top: '10%',style: {text: name,font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',fill: '#fff'}})// 注册地图echarts.registerMap(mapName, mapJson)// 渲染charts.setOption(option, true)})}}
}
</script>

具体写的代码大部分参考了: https://blog.csdn.net/SkelleBest/article/details/121204097这篇文章

vue echarts绘制市级地图下钻（带注释）相关推荐

vue echarts绘制省份地图并添加自定义标注
效果图在main.js中引入地图 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 省份是动态引入的,在.vue文件中 ...
vue+echarts绘制3D地图
1.安装依赖 npm install echarts@^4.9.0 npm install echarts-gl@1.1.0 --save 2.引入echarts,echarts-gl,添加全局变量 ...
vue使用echarts来绘制中国地图下钻省市区县级地图
文章目录前言一.echarts 二.使用步骤 1.vue安装.引入echarts 2.使用echarts 总结前言公司需要一个中国地图点击可进入省市区县级,但是在我使用echarts绘制中国地 ...
echarts可视化市级地图详细版(vue+element)
echarts可视化市级地图详细版(vue+element) 非常详细的echarts可视化地图,可全国可市级,各种属性踩了好几天的坑,一步一步归纳总结出来的 1.效果图代码如下 import e ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
使用Echarts绘制geo地图（案例）
使用Echarts绘制geo地图(案例) 项目使用@vue/cli 4.5.13以及echarts版本为5.1.2. 需求:在省份地图上,将数据进行分段映射.如图: 首先下载geojson数据链接: ...
Vue+ECharts实现可视化地图
Apache ECharts 一个基于 JavaScript 的开源可视化图表库,提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数 ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...

vue echarts绘制市级地图下钻（带注释）