echarts来显示世界地图和全国地图，并且可以下钻层级
echarts来显示世界地图和全国地图，并且可以下钻层级
使用echarts来显示世界地图和全国地图，并且可以下钻层级
使用的技术
vue3.0 + vite + ts + echarts
现有的功能
- 全球地图和全国地图、省地图、市级地图显示
- 展示数据
- 可以从全球下钻地图
- 点击右键返回上一级
- 全球地图缩放后，下钻下一级地图位置保持在中心
遇到的问题解决
1.vue3.0 + vite 我没办法动态的引用地图资源，我本地是用axios来引用，打包后路径不对，因为比较急我就用最笨的方法，把所有省的json都引进来，还好只有3个省，不然累死，先完成任务再优化。代码如下，我帮你们做了苦力，你们直接copy来替换吧。
2.全球地图缩放后，下钻下一级地图位置保持在中心，
// 在点击一级地图时，将一级地图的地图绘制清空。重新绘制 就可以每次都居中显示
chart.clear()
//动态引入地图数据
axios.get(`/src/assets/map/geometryProvince/${id}.json`).then((res) => {
// resolve(res.data)
// })
import xinjiang from '/@/assets/map/geometryProvince/xinjiang.json'
import shanghai from '/@/assets/map/geometryProvince/shanghai.json'
import hebei from '/@/assets/map/geometryProvince/hebei.json'
import shanxi from '/@/assets/map/geometryProvince/shanxi.json'
import neimenggu from '/@/assets/map/geometryProvince/neimenggu.json'
import liaoning from '/@/assets/map/geometryProvince/liaoning.json'
import jilin from '/@/assets/map/geometryProvince/jilin.json'
import heilongjiang from '/@/assets/map/geometryProvince/heilongjiang.json'
import jiangsu from '/@/assets/map/geometryProvince/jiangsu.json'
import zhejiang from '/@/assets/map/geometryProvince/zhejiang.json'
import anhui from '/@/assets/map/geometryProvince/anhui.json'
import fujian from '/@/assets/map/geometryProvince/fujian.json'
import jiangxi from '/@/assets/map/geometryProvince/jiangxi.json'
import shandong from '/@/assets/map/geometryProvince/shandong.json'
import henan from '/@/assets/map/geometryProvince/henan.json'
import hubei from '/@/assets/map/geometryProvince/hubei.json'
import hunan from '/@/assets/map/geometryProvince/hunan.json'
import guangdong from '/@/assets/map/geometryProvince/guangdong.json'
import guangxi from '/@/assets/map/geometryProvince/guangxi.json'
import hainan from '/@/assets/map/geometryProvince/hainan.json'
import sichuan from '/@/assets/map/geometryProvince/sichuan.json'
import guizhou from '/@/assets/map/geometryProvince/guizhou.json'
import yunnan from '/@/assets/map/geometryProvince/yunnan.json'
import xizang from '/@/assets/map/geometryProvince/xizang.json'
import shanxi1 from '/@/assets/map/geometryProvince/shanxi1.json'
import gansu from '/@/assets/map/geometryProvince/gansu.json'
import qinghai from '/@/assets/map/geometryProvince/qinghai.json'
import ningxia from '/@/assets/map/geometryProvince/ningxia.json'
import beijing from '/@/assets/map/geometryProvince/beijing.json'
import tianjin from '/@/assets/map/geometryProvince/tianjin.json'
import chongqing from '/@/assets/map/geometryProvince/chongqing.json'
import xianggang from '/@/assets/map/geometryProvince/xianggang.json'
import aomen from '/@/assets/map/geometryProvince/aomen.json'
import taiwan from '/@/assets/map/geometryProvince/taiwan.json'
import axios from 'axios' //地图数据
let jsonMap:any = {
上海市:shanghai,
河北:hebei,
山西:shanxi,
内蒙古:neimenggu,
辽宁:liaoning,
吉林:jilin,
黑龙江:heilongjiang,
江苏:jiangsu,
浙江:zhejiang,
安徽:anhui,
福建:fujian,
江西:jiangxi,
山东:shandong,
河南:henan,
湖北:hubei,
湖南:hunan,
广东:guangdong,
广西:guangxi,
海南:hainan,
四川:sichuan,
贵州:guizhou,
云南:yunnan,
西藏:xizang,
陕西:shanxi1,
甘肃:gansu,
青海:qinghai,
宁夏:ningxia,
新疆:xinjiang,
北京市:beijing,
天津市:tianjin,
重庆市:chongqing,
香港:xianggang,
澳门:aomen,
台湾:taiwan,
}
总结
实属不易，显示地图倒是很容易，但是完善细节和用户体验不容易，得一步一步的摸索，不断的百度，看源码的方法来解决。
总之你百度20个肯定能看到我，我也会把我百度的有直接的博客放在下面，看到我就给我留言一起交流，共同进步。
参考内容
https://www.jianshu.com/p/046a7f413630
https://datav.aliyun.com/portal/school/atlas/area_selector
https://www.jianshu.com/p/c29462087134
http://geojson.io/#map=2/20.1/0.0
https://blog.csdn.net/hsany330/article/details/118701178
https://www.csdn.net/tags/NtzaggzsNDQyOTgtYmxvZwO0O0OO0O0O.html
https://blog.csdn.net/weixin_49668076/article/details/119444131
https://www.codenong.com/cs106556136/
直接来源码，地球资源包我上传到资源，有需要自己下。
主要源码
<template>
<div class="mb-2">
<el-radio-group
v-model="choosePosition"
size="small"
@change.native="changePosition"
class="opration-left"
>
<el-radio :label="1">选项1</el-radio>
<el-radio :label="2">选项1</el-radio>
<el-radio :label="3">选项1</el-radio>
<el-radio :label="4">选项1</el-radio>
</el-radio-group>
<div
ref="qualityMap"
style="width: 100%; height: 660px; border: 1px solid #ddd"
></div>
<el-button
@click.native="backToTop"
v-if="currentLevel != 0"
class="el-button"
>返回上一级</el-button
>
</div>
</template> <script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import * as echarts from 'echarts'
import chinaJson from '/@/assets/map/china.json'
import china from '/@/assets/map/china.json'
import worldJson from '/@/assets/map/world.json' import xinjiang from '/@/assets/map/geometryProvince/xinjiang.json'
import shanghai from '/@/assets/map/geometryProvince/shanghai.json'
import hebei from '/@/assets/map/geometryProvince/hebei.json'
import shanxi from '/@/assets/map/geometryProvince/shanxi.json'
import neimenggu from '/@/assets/map/geometryProvince/neimenggu.json'
import liaoning from '/@/assets/map/geometryProvince/liaoning.json'
import jilin from '/@/assets/map/geometryProvince/jilin.json'
import heilongjiang from '/@/assets/map/geometryProvince/heilongjiang.json'
import jiangsu from '/@/assets/map/geometryProvince/jiangsu.json'
import zhejiang from '/@/assets/map/geometryProvince/zhejiang.json'
import anhui from '/@/assets/map/geometryProvince/anhui.json'
import fujian from '/@/assets/map/geometryProvince/fujian.json'
import jiangxi from '/@/assets/map/geometryProvince/jiangxi.json'
import shandong from '/@/assets/map/geometryProvince/shandong.json'
import henan from '/@/assets/map/geometryProvince/henan.json'
import hubei from '/@/assets/map/geometryProvince/hubei.json'
import hunan from '/@/assets/map/geometryProvince/hunan.json'
import guangdong from '/@/assets/map/geometryProvince/guangdong.json'
import guangxi from '/@/assets/map/geometryProvince/guangxi.json'
import hainan from '/@/assets/map/geometryProvince/hainan.json'
import sichuan from '/@/assets/map/geometryProvince/sichuan.json'
import guizhou from '/@/assets/map/geometryProvince/guizhou.json'
import yunnan from '/@/assets/map/geometryProvince/yunnan.json'
import xizang from '/@/assets/map/geometryProvince/xizang.json'
import shanxi1 from '/@/assets/map/geometryProvince/shanxi1.json'
import gansu from '/@/assets/map/geometryProvince/gansu.json'
import qinghai from '/@/assets/map/geometryProvince/qinghai.json'
import ningxia from '/@/assets/map/geometryProvince/ningxia.json'
import beijing from '/@/assets/map/geometryProvince/beijing.json'
import tianjin from '/@/assets/map/geometryProvince/tianjin.json'
import chongqing from '/@/assets/map/geometryProvince/chongqing.json'
import xianggang from '/@/assets/map/geometryProvince/xianggang.json'
import aomen from '/@/assets/map/geometryProvince/aomen.json'
import taiwan from '/@/assets/map/geometryProvince/taiwan.json'
import axios from 'axios' //地图数据
let jsonMap:any = {
上海市:shanghai,
河北:hebei,
山西:shanxi,
内蒙古:neimenggu,
辽宁:liaoning,
吉林:jilin,
黑龙江:heilongjiang,
江苏:jiangsu,
浙江:zhejiang,
安徽:anhui,
福建:fujian,
江西:jiangxi,
山东:shandong,
河南:henan,
湖北:hubei,
湖南:hunan,
广东:guangdong,
广西:guangxi,
海南:hainan,
四川:sichuan,
贵州:guizhou,
云南:yunnan,
西藏:xizang,
陕西:shanxi1,
甘肃:gansu,
青海:qinghai,
宁夏:ningxia,
新疆:xinjiang,
北京市:beijing,
天津市:tianjin,
重庆市:chongqing,
香港:xianggang,
澳门:aomen,
台湾:taiwan,
} let currentLevel = ref(0) //0-全球 1 全国下省份, 2 省份下市区 3 县区
let currentClick:any = null //单选条件
const choosePosition = ref(1) //切换条件
const changePosition = (label: any) => {
//加载数据
} let currentCityList = []
const qualityMap = ref()
let chart: any = ref() onMounted(() => {
chart = echarts.init(qualityMap.value as unknown as HTMLElement)
initEcharts()
})
onUnmounted(() => {
chart.dispose()
})
// 全球地域中文映射
let nameMap = {
Canada: '加拿大',
Turkmenistan: '土库曼斯坦',
'Saint Helena': '圣赫勒拿',
'Lao PDR': '老挝',
Lithuania: '立陶宛',
Cambodia: '柬埔寨',
Ethiopia: '埃塞俄比亚',
'Faeroe Is.': '法罗群岛',
Swaziland: '斯威士兰',
Palestine: '巴勒斯坦',
Belize: '伯利兹',
Argentina: '阿根廷',
Bolivia: '玻利维亚',
Cameroon: '喀麦隆',
'Burkina Faso': '布基纳法索',
Aland: '奥兰群岛',
Bahrain: '巴林',
'Saudi Arabia': '沙特阿拉伯',
'Fr. Polynesia': '法属波利尼西亚',
'Cape Verde': '佛得角',
'W. Sahara': '西撒哈拉',
Slovenia: '斯洛文尼亚',
Guatemala: '危地马拉',
Guinea: '几内亚',
'Dem. Rep. Congo': '刚果（金）',
Germany: '德国',
Spain: '西班牙',
Liberia: '利比里亚',
Netherlands: '荷兰',
Jamaica: '牙买加',
'Solomon Is.': '所罗门群岛',
Oman: '阿曼',
Tanzania: '坦桑尼亚',
'Costa Rica': '哥斯达黎加',
'Isle of Man': '曼岛',
Gabon: '加蓬',
Niue: '纽埃',
Bahamas: '巴哈马',
'New Zealand': '新西兰',
Yemen: '也门',
Jersey: '泽西岛',
Pakistan: '巴基斯坦',
Albania: '阿尔巴尼亚',
Samoa: '萨摩亚',
'Czech Rep.': '捷克',
'United Arab Emirates': '阿拉伯联合酋长国',
Guam: '关岛',
India: '印度',
Azerbaijan: '阿塞拜疆',
'N. Mariana Is.': '北马里亚纳群岛',
Lesotho: '莱索托',
Kenya: '肯尼亚',
Belarus: '白俄罗斯',
Tajikistan: '塔吉克斯坦',
Turkey: '土耳其',
Afghanistan: '阿富汗',
Bangladesh: '孟加拉国',
Mauritania: '毛里塔尼亚',
'Dem. Rep. Korea': '朝鲜',
'Saint Lucia': '圣卢西亚',
'Br. Indian Ocean Ter.': '英属印度洋领地',
Mongolia: '蒙古',
France: '法国',
'Cura?ao': '库拉索岛',
'S. Sudan': '南苏丹',
Rwanda: '卢旺达',
Slovakia: '斯洛伐克',
Somalia: '索马里',
Peru: '秘鲁',
Vanuatu: '瓦努阿图',
Norway: '挪威',
Malawi: '马拉维',
Benin: '贝宁',
'St. Vin. and Gren.': '圣文森特和格林纳丁斯',
Korea: '韩国',
Singapore: '新加坡',
Montenegro: '黑山共和国',
'Cayman Is.': '开曼群岛',
Togo: '多哥',
China: '中国',
'Heard I. and McDonald Is.': '赫德岛和麦克唐纳群岛',
Armenia: '亚美尼亚',
'Falkland Is.': '马尔维纳斯群岛（福克兰）',
Ukraine: '乌克兰',
Ghana: '加纳',
Tonga: '汤加',
Finland: '芬兰',
Libya: '利比亚',
'Dominican Rep.': '多米尼加',
Indonesia: '印度尼西亚',
Mauritius: '毛里求斯',
'Eq. Guinea': '赤道几内亚',
Sweden: '瑞典',
Vietnam: '越南',
Mali: '马里',
Russia: '俄罗斯',
Bulgaria: '保加利亚',
'United States': '美国',
Romania: '罗马尼亚',
Angola: '安哥拉',
Chad: '乍得',
'South Africa': '南非',
Fiji: '斐济',
Liechtenstein: '列支敦士登',
Malaysia: '马来西亚',
Austria: '奥地利',
Mozambique: '莫桑比克',
Uganda: '乌干达',
Japan: '日本',
Niger: '尼日尔',
Brazil: '巴西',
Kuwait: '科威特',
Panama: '巴拿马',
Guyana: '圭亚那',
Madagascar: '马达加斯加',
Luxembourg: '卢森堡',
'American Samoa': '美属萨摩亚',
Andorra: '安道尔',
Ireland: '爱尔兰',
Italy: '意大利',
Nigeria: '尼日利亚',
'Turks and Caicos Is.': '特克斯和凯科斯群岛',
Ecuador: '厄瓜多尔',
'U.S. Virgin Is.': '美属维尔京群岛',
Brunei: '文莱',
Australia: '澳大利亚',
Iran: '伊朗',
Algeria: '阿尔及利亚',
'El Salvador': '萨尔瓦多',
"C?te d'Ivoire": '科特迪瓦',
Chile: '智利',
'Puerto Rico': '波多黎各',
Belgium: '比利时',
Thailand: '泰国',
Haiti: '海地',
Iraq: '伊拉克',
'S?o Tomé and Principe': '圣多美和普林西比',
'Sierra Leone': '塞拉利昂',
Georgia: '格鲁吉亚',
Denmark: '丹麦',
Philippines: '菲律宾',
'S. Geo. and S. Sandw. Is.': '南乔治亚岛和南桑威奇群岛',
Moldova: '摩尔多瓦',
Morocco: '摩洛哥',
Namibia: '纳米比亚',
Malta: '马耳他',
'Guinea-Bissau': '几内亚比绍',
Kiribati: '基里巴斯',
Switzerland: '瑞士',
Grenada: '格林纳达',
Seychelles: '塞舌尔',
Portugal: '葡萄牙',
Estonia: '爱沙尼亚',
Uruguay: '乌拉圭',
'Antigua and Barb.': '安提瓜和巴布达',
Lebanon: '黎巴嫩',
Uzbekistan: '乌兹别克斯坦',
Tunisia: '突尼斯',
Djibouti: '吉布提',
Greenland: '格陵兰',
'Timor-Leste': '东帝汶',
Dominica: '多米尼克',
Colombia: '哥伦比亚',
Burundi: '布隆迪',
'Bosnia and Herz.': '波斯尼亚和黑塞哥维那',
Cyprus: '塞浦路斯',
Barbados: '巴巴多斯',
Qatar: '卡塔尔',
Palau: '帕劳',
Bhutan: '不丹',
Sudan: '苏丹',
Nepal: '尼泊尔',
Micronesia: '密克罗尼西亚',
Bermuda: '百慕大',
Suriname: '苏里南',
Venezuela: '委内瑞拉',
Israel: '以色列',
'St. Pierre and Miquelon': '圣皮埃尔和密克隆群岛',
'Central African Rep.': '中非',
Iceland: '冰岛',
Zambia: '赞比亚',
Senegal: '塞内加尔',
'Papua New Guinea': '巴布亚新几内亚',
'Trinidad and Tobago': '特立尼达和多巴哥',
Zimbabwe: '津巴布韦',
Jordan: '约旦',
Gambia: '冈比亚',
Kazakhstan: '哈萨克斯坦',
Poland: '波兰',
Eritrea: '厄立特里亚',
Kyrgyzstan: '吉尔吉斯斯坦',
Montserrat: '蒙特塞拉特',
'New Caledonia': '新喀里多尼亚',
Macedonia: '马其顿',
Paraguay: '巴拉圭',
Latvia: '拉脱维亚',
Hungary: '匈牙利',
Syria: '叙利亚',
Honduras: '洪都拉斯',
Myanmar: '缅甸',
Mexico: '墨西哥',
Egypt: '埃及',
Nicaragua: '尼加拉瓜',
Cuba: '古巴',
Serbia: '塞尔维亚',
Comoros: '科摩罗',
'United Kingdom': '英国',
'Fr. S. Antarctic Lands': '南极洲',
Congo: '刚果（布）',
Greece: '希腊',
'Sri Lanka': '斯里兰卡',
Croatia: '克罗地亚',
Botswana: '博茨瓦纳',
'Siachen Glacier': '锡亚琴冰川地区',
'São Tomé and Principe': '圣多美及普林西比',
} //地图展示的数据
let showData = [
{ name: '北京市', value: 9999 },
{ name: '中国', value: 9999 },
{ name: 'China', value: 9999 },
{ name: '天津市', value: Math.round(Math.random() * 100) },
{ name: '上海', value: Math.round(Math.random() * 100) },
{ name: '重庆市', value: Math.round(Math.random() * 100) },
{ name: '河北', value: Math.round(Math.random() * 100) },
{ name: '河南', value: Math.round(Math.random() * 100) },
{ name: '云南', value: Math.round(Math.random() * 100) },
{ name: '辽宁', value: Math.round(Math.random() * 100) },
{ name: '黑龙江', value: Math.round(Math.random() * 100) },
{ name: '湖南', value: Math.round(Math.random() * 100) },
{ name: '安徽', value: Math.round(Math.random() * 100) },
{ name: '山东', value: Math.round(Math.random() * 100) },
{ name: '新疆', value: Math.round(Math.random() * 100) },
{ name: '江苏', value: Math.round(Math.random() * 100) },
{ name: '浙江', value: Math.round(Math.random() * 100) },
{ name: '江西', value: Math.round(Math.random() * 100) },
{ name: '湖北', value: Math.round(Math.random() * 100) },
{ name: '广西', value: Math.round(Math.random() * 100) },
{ name: '甘肃', value: Math.round(Math.random() * 100) },
{ name: '山西', value: Math.round(Math.random() * 100) },
{ name: '内蒙古', value: Math.round(Math.random() * 100) },
{ name: '陕西', value: Math.round(Math.random() * 100) },
{ name: '吉林', value: Math.round(Math.random() * 100) },
{ name: '福建', value: Math.round(Math.random() * 100) },
{ name: '贵州', value: Math.round(Math.random() * 100) },
{ name: '广东', value: Math.round(Math.random() * 100) },
{ name: '青海', value: Math.round(Math.random() * 100) },
{ name: '西藏', value: Math.round(Math.random() * 100) },
{ name: '四川', value: Math.round(Math.random() * 100) },
{ name: '宁夏', value: Math.round(Math.random() * 100) },
{ name: '海南', value: Math.round(Math.random() * 100) },
{ name: '台湾', value: Math.round(Math.random() * 100) },
{ name: '香港', value: Math.round(Math.random() * 100) },
{ name: '澳门', value: Math.round(Math.random() * 100) },
{ name: '成都市', value: 9999 },
{ name: '马祖', value: 9999 },
{ name: '台湾', value: 9999 },
{ name: '那曲地区', value: 9999 },
] let userParam:any = sessionStorage.getItem("userParam")
let userInfo:any = JSON.parse(userParam); //请求本地的数据
const requestJsonData = (id:any) => { // 根据名字来匹配地图数据
return jsonMap[currentClick]
// return new Promise((resolve) => {
// axios.get(`/src/assets/map/geometryProvince/${id}.json`).then((res) => {
// resolve(res.data)
// })
// })
} const initEcharts = async () => {
let regionsList = []
// 在点击一级地图时，将一级地图的地图绘制清空。重新绘制 就可以每次都居中显示
chart.clear() //全球
if (currentLevel.value == 0) {
regionsList = worldJson.features.map((item) => ({
name: item.properties.name,
value: 1500,
type: '全球',
itemStyle: {
color: 'rgba(222, 224, 232, 1)',
areaColor: 'rgba(222, 224, 232, 1)',
},
})) //地图上要显示的区域以及颜色 let outProvince = [] //数组定义在这里, 可以在地图上去除部分省份 =》 ['江苏', '江西']
let objMap = {
...worldJson,
features: worldJson.features.filter(
(item) => !outProvince.includes(item.properties.name)
), //这里可以过滤不需要展示省份，可以和regionsList联动使用
}
echarts.registerMap('worldJson', objMap) //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
} //全国下省份
if (currentLevel.value == 1) {
regionsList = chinaJson.features.map((item) => ({
name: item.properties.name,
value: 1500,
type: '省份',
itemStyle: {
color: 'rgba(222, 224, 232, 1)',
areaColor: 'rgba(222, 224, 232, 1)',
},
})) //地图上要显示的区域以及颜色 let outProvince = [] //数组定义在这里, 可以在地图上去除部分省份 =》 ['江苏', '江西']
let objMap = {
...chinaJson,
features: chinaJson.features.filter(
(item) => !outProvince.includes(item.properties.name)
), //这里可以过滤不需要展示省份，可以和regionsList联动使用
}
echarts.registerMap('china', objMap) //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
} //省份下市区
if (currentLevel.value == 2) {
let { id } = china.features.filter(
(item) => currentClick == item.properties.name
)[0]?.properties
//找出 @/core/map/china.json 里面内蒙古id 同事在此路径geometryProvince文件下 id.json就是对应该省份对应的市级数据
let cityList = await requestJsonData(id) regionsList = cityList.features.map((item) => ({
name: item.properties.name,
type: '城市',
itemStyle: {
color: 'rgba(222, 224, 232, 1)',
areaColor: 'rgba(222, 224, 232, 1)',
},
}))
currentCityList = cityList
let outCityList = [] //剔除不需要城市
let objMap = {
...china,
features: cityList.features.filter(
(item) => !outCityList.includes(item.properties.name)
), //这里可以过滤不需要展示城市，可以和regionsList联动使用
}
echarts.registerMap('chinaJson', objMap) //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
} //市区下县区
// if(currentLevel.value== 3) {
// //console.log(currentLevel.value, currentClick, currentCityList)
// let { id } = currentCityList.features.filter((item) => currentClick == item.properties.name)[0].properties
// //console.log(id, currentCityList.features.filter((item) => currentClick == item.properties.name)[0])
// let areaList = require(`@/core/map/geometryCouties/${id}00.json`) //获取区县数据
// //console.log(areaList)
// regionsList = areaList.features.map((item) => ({
// name: item.properties.name,
// type: '县区',
// itemStyle: {
// color: 'rgba(222, 224, 232, 1)',
// areaColor: 'rgba(222, 224, 232, 1)'
// }
// })) // let outAreaList = [] //剔除不需要县区
// let objMap = {
// ...chinaJson,
// features: areaList.features.filter((item) => !outAreaList.includes(item.properties.name)) //这里可以过滤不需要展示县区，可以和regionsList联动使用
// }
// echarts.registerMap('chinaJson', objMap) //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
// } let option = {
tooltip: {
show: true,
triggerOn: 'mousemove',
formatter: function (params, ticket, callback) {
let value = params?.data?.value || 0
return value
},
}, // 鼠标移到图里面的浮动提示框
visualMap: {
min: 0,
max: 1500,
left: 'left',
top: 'bottom',
text: ['高', '低'], //取值范围的文字
inRange: {
color: ['#e0ffff', '#006edd'], //取值范围的颜色
},
show: true, //图注
},
// geo: {
// type: 'map',
// zlevel:2,//geo显示级别，默认是0
// map: 'chinaJson', //china可以显示右下加南海诸岛，别的名称无法显示
// roam: false,
// zoom: 1.2,
// aspectScale: 0.8, // 拉伸地图 值为0-1
// regions: regionsList,
// label: {
// show: true,
// // color: '#000',
// },
// emphasis: {
// // 设置鼠标移上去hover效果
// show: true,
// label: {
// // color: '#000',
// show: true,
// fontSize: '40',
// fontWeight: 'bold',
// },
// },
// },
series: [
{
type: 'map',
map:
currentLevel.value == 0
? 'worldJson'
: currentLevel.value == 1
? 'china'
: currentLevel.value == 2
? 'chinaJson'
: '', //显示china时候才有南海渚岛
geoIndex: 0,
label: {
show: true,
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold',
},
},
zoom: 1.2,
roam: currentLevel.value == 0 ? true : true,
scaleLimit: {
// 缩放的极限控制
min: 0.5,
max: 6,
},
data: showData,
nameMap: currentLevel.value == 0 ? nameMap : {},
},
],
dataZoom: { // 放大和缩放
type: 'inside'
},
} chart.setOption(option)
chart.off('click') //解决点击地图会触发两次问题
chart.off('contextmenu') //解决点击地图会触发两次问题
//禁用浏览器的右键事件
document.oncontextmenu = function () {
return false
}
chart.on('click', (params) => {
if (currentLevel.value == 2) {
return
}
if (currentLevel.value == 0 && params.name != '中国') {
return
} if (params.name == '南海诸岛') {
return
}
currentLevel.value += 1
currentClick = params.name initEcharts() //县区下没有别的级别
})
chart.on('contextmenu', (params) => {
if (currentLevel.value == 0) {
return
}
currentLevel.value -= 1
currentClick = params.name
initEcharts()
})
} const backToTop = () => {
if (currentLevel.value == 0) {
return
}
currentLevel.value -= 1
initEcharts()
} defineExpose({
changePosition
})
</script> <style lang="postcss" scoped>
.opration-left {
z-index: 9999;
position: absolute;
left: 50px;
top: 20px;
display: flex;
flex-direction: column;
align-items: unset;
} .el-button {
position: absolute;
left: 220px;
top: 20px;
}
</style>
echarts来显示世界地图和全国地图，并且可以下钻层级的更多相关文章
- vue中使用echarts来绘制世界地图和中国地图
第一步,下载echarts cnpm install echarts --save-dev 第二步,在main.js中全局引入 //引入echarts import echarts from 'ech ...
- vue+echarts可视化大屏,全国地图下钻,页面自适应
之前写过一篇关于数据大屏及地图下钻的文章 https://www.cnblogs.com/weijiutao/p/13977011.html ,但是存在诸多问题,如地图边界线及行政区划老旧,无法自适应 ...
- echarts 如何在世界地图中绘制中国地图
1.导入 world.china.js 这个js是将world.js 文件 以及china.js文件进行合并 (网上一些中国地图勾勒的身份曲线感觉很飘 所以自己加工了一下china.js中的数据, ...
- MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等
@{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"> ...
- echart 插件实现全国地图
最近的项目要用到一个能展现全国地图的功能,并且全国各个省份显示的颜色不同,点击省份后会返回省份名称.经过反复的查找最终确定了echart这个插件,最后的成果还不错,在这里写下来希望对大家有所帮助.话不 ...
- vue+echarts+datav大屏数据展示及实现中国地图省市县下钻
随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够 ...
- arcgis for flex全国地图天气预报的具体实现过程解析
系统架构是B/S,开发语言是flex,开发工具是myeclise或者flashbuild,通过调用百度提供的在线天气预报web api接口的方式来实现. 采用地图是ArcGIS全国地图,开发接口为ar ...
- arcgis for flex或silverlight全国地图天气预报的实现
系统架构是B/S,目前有两个不同的版本,1.开发语言是C#.silverlight,开发平台是.NET:2.开发语言是java.flex,开发平台是myeclise. 采用地图是ArcGIS全国地图, ...
- 如何在WindowsPhone Bing Map控件中显示必应中国中文地图、谷歌中国中文地图。
原文:如何在WindowsPhone Bing Map控件中显示必应中国中文地图.谷歌中国中文地图. 最近正好有点业余时间,所以在做做各种地图.Bing Map控件本身就能显示必应地图,但是很遗憾微软 ...
- ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。
1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...
随机推荐
- python运算符与基本数据类型
Python种类 JavaPython cPython ***** pypy 字节码 和 机器码 Python程序: 1. 终端: C:\python35\python.exe D:\1.py 解释器 ...
- Jmeter 之吞吐量控制器
作用: 吞吐量控制器可用来模拟混合场景的压测业务,即一部分用户执行场景A,一部分用户执行场景B 字段说明: Total Excutions:执行请求总数 Percent Excutions:执行线程数 ...
- Jmeter 函数助手之__time
接口中需要传入time时,可使用Jmeter 函数助手中的__time函数传入当前时间 格式和参数名称两个字段非必填,当都不填时直接点击生成按钮,得到13位时间戳:按图填写后,得到10位时间戳,获取当 ...
- 基于SqlSugar的开发框架循序渐进介绍（23）-- Winform端管理系统中平滑增加对Web API对接的需求
在前面随笔介绍的基于SqlSugar的WInform端管理系统中,数据提供者是直接访问数据库的方式,不过窗体界面调用数据接口获取数据的时候,我们传递的是标准的接口,因此可扩展性比较好.我曾经在随笔&l ...
- 基于U-Net网络的图像分割的MindStudio实践
摘要:本实践是基于Windows版MindStudio 5.0.RC3,远程连接ECS服务器使用,ECS是基于官方分享的CANN6.0.RC1_MindX_Vision3.0.RC3镜像创建的. 本文 ...
- Hive详解(06) - Hive调优实战
Hive详解(06) - Hive调优实战 执行计划(Explain) 基本语法 EXPLAIN [EXTENDED | DEPENDENCY | AUTHORIZATION] query 案例实操 ...
- linux系统一键开启root登陆
服务器只能key登陆,用这个后直接可以root方式登陆 sudo -i echo root:要设置的密码 |sudo chpasswd root sudo sed -i 's/^#\?PermitRo ...
- P8773 [蓝桥杯 2022 省 A] 选数异或
题面 给定一个长度为 \(n\) 的数列 \(A_{1}, A_{2}, \cdots, A_{n}\) 和一个非负整数 \(x\), 给定 \(m\) 次查询, 每次询问能否从某个区间 \([l, ...
- py教学之列表
列表是什么 list 是一些元素按照一定顺序排列的元素集合 序列是 Python 中最基本的数据结构. 序列中的每个值都有对应的位置值,称之为索引,第一个索引是 0,第二个索引是 1,依此类推. Py ...
- vulnhub靶场之RIPPER: 1
准备: 攻击机:虚拟机kali.本机win10. 靶机:Ripper: 1,下载地址:https://download.vulnhub.com/ripper/Ripper.ova,下载后直接vbox打 ...