vue3.0中echarts实现中图地图的省份切换，并解决多次切换后地图卡死的情况

一、echarts安装及地图的准备

1、安装echarts

npm install echarts

2、下载china.js等json文件到项目中的文件夹
map的下载地址 等审核

二、代码说明

<template>
	<div class="center-body">
		<div class="map" id="map"></div>
		<div class="res-button">
			<button v-if="showButton" @click="reChinaMap()">返回全国</button>
		</div>
	</div>
</template>

<script > 
	import * as echarts from "echarts";
	
	export default {
	name: 'index',
	data() {
		return {
			myChart:null,

			// 省份 
			province: {
				"北京": "beijing",
				"天津": "tianjin",
				"上海": "shanghai",
				"重庆": "chongqing",
				"河北": "hebei",
				"河南": "henan",
				"云南": "yunnan",
				"辽宁": "liaoning",
				"黑龙江": "heilongjiang",
				"湖南": "hunan",
				"安徽": "anhui",
				"山东": "shandong",
				"新疆": "xinjiang",
				"江苏": "jiangsu",
				"浙江": "zhejiang",
				"江西": "jiangxi",
				"湖北": "hubei",
				"广西": "guangxi",
				"甘肃": "gansu",
				"山西": "shanxi",
				"内蒙古": "neimenggu",
				"陕西": "shanxi1",
				"吉林": "jilin",
				"福建": "fujian",
				"贵州": "guizhou",
				"广东": "guangdong",
				"青海": "qinghai",
				"西藏": "xizang",
				"四川": "sichuang",
				"宁夏": "ningxia",
				"海南": "hainan",
				"台湾": "taiwan",
				"香港": "xianggang",
				"澳门": "aomen"
			},
		}
	},
	methods:{
		drawMap(name, json) {
			// 前两部是解决切换卡死的关键
			// 判断地图是否渲染
			let myChart = echarts.getInstanceByDom(document.getElementById("map"))
			// 如果渲染则清空地图 
			if (myChart != null) {
				myChart.dispose()
			}
			// 初始化地图
			myChart = echarts.init(document.getElementById("map"));				
			let size = '95%'
			if (!json) {
				json = require("@/assets/js/map/china.json");
				this.showButton = false
				size = '105%'
			}
			echarts.registerMap(name, json)
			let layoutSize = size
			let option={
				legend: {
					left: '20',
					bottom:'30',
					orient:'vertical',
					textStyle: {
						color: '#c1cadf',
						fontSize: 20
					},
				},
				geo: {
	              map: name,
	              aspectScale: 0.85,
	              layoutCenter: ["50%", "50%"], //地图位置
	              layoutSize: layoutSize,                    
	              // 新版写法 normal
	              itemStyle: {
                  	shadowColor: "#276fce",
	                shadowOffsetX:0,
	                shadowOffsetY:15,
	                opacity:0.5                        
	              },                  
	              // 新版写法 emphasis
	              emphasis: {
	                  itemStyle: {
                      	areaColor: "#276fce",
	                  }
	              },
	              regions:[{
	                  name:'南海诸岛',
	                  itemStyle:{
	                      areaColor: 'rgba(0,10,52,1)',
	                      borderColor: 'rgba(0,10,52,1)',
	                      color:"#009cc9"
	                  },
	                  label:{
	                      show:false,
	                      color:'#ffffff',
	                      fontSize:12,
	                  }
	              }]
	          },
	          series: [
				// 地图
				{
					name: '地图',
					type: "map",
					map: name,
					aspectScale: 0.85,
					layoutCenter: ["50%", "50%"], //地图位置
					layoutSize: layoutSize,
					zoom: 1,
					scaleLimit: {
						min: 1,
						max: 2,
					},
					label:{
						show:true,
						color: "#ffff",
					},               
					// 新版写法 normal
					itemStyle: {
						areaColor: "#0c274b",
						borderColor: "#1cccff",
						borderWidth: 1.5,
					},
					// 新版写法 emphasis
					emphasis: {
						itemStyle: {
								areaColor: "#02102b",
								label: {
										color: "#fff"
								}
						}
					},
					selectedMode: false,
				  },
				],
			}
			myChart.setOption(option,true);
			myChart.on('click', e => {
				if (e.seriesName === "地图") {
					// 
					this.darwProvniceMap(e)
				} 
			}
			window.addEventListener("resize", () => {
				myChart.resize()
			})
			this.myChart = myChart
		},
		// 切换省份
		darwProvniceMap(val) {
			if(this.province[val.name]) {
				let json = require(`@/assets/js/map/province/${this.province[val.name]}.json`)
				this.drawMap(this.province[val.name],json)
				this.showButton = true
			}
		},
		// 返回全国
		reChinaMap() {
			this.drawMap('china')
		},
		
	}
</script>

<style scoped>
	/*提示框容器*/
	.res-button{
	  position: fixed;
	  top: calc(70px);
	  left: calc(22%+10px);;
	  z-index: 999;
	  border-radius: 6px;
	}
</style>

三、运行效果

本人的经验分享希望可以帮助到你们,如何不对的地方可以评论留言帮我指正一下如果帮助了你请给我点个赞吧