vue3 中国地图组件 动态导入china.js 解决文件导入错误问题

前言

在开发echarts 中国地图时，需要引入china.js文件，有时候总找不到还会莫名报其他错误，动态引入可以完美运行，也不需要其他配置

<template>
	<div id="mapBox"></div>
</template>

js代码

<script setup>
import { statisticsMean } from '@/fetch/http'

// 父组件信息
const prop = defineProps({
	// 项目id
	projectId: {
		type: String,
		default: '',
	},
})

const echartsMap = mapData => {
	// 基于准备好的dom，初始化echarts实例
	const myChart = echarts.init(document.querySelector('#mapBox'))

	// 均值颜色
	const colors = [
		{ color: '#13b9f0' },
		{ color: '#31dfe3' },
		{ color: '#03e3ac' },
		{ color: '#e3b603' },
		{ color: '#e36c31' },
	]

	const dataList = ref([
		{ name: '澳门', value: -1, code: 91 },
		{ name: '香港', value: -1, code: 92 },
		{ name: '台湾', value: -1, code: 83 },
		{ name: '新疆', value: -1, code: 65 },
		{ name: '宁夏', value: -1, code: 64 },
		{ name: '青海', value: -1, code: 63 },
		{ name: '甘肃', value: -1, code: 62 },
		{ name: '陕西', value: -1, code: 61 },
		{ name: '西藏', value: -1, code: 54 },
		{ name: '云南', value: -1, code: 53 },
		{ name: '贵州', value: -1, code: 52 },
		{ name: '四川', value: -1, code: 51 },
		{ name: '重庆', value: -1, code: 50 },
		{ name: '海南', value: -1, code: 46 },
		{ name: '广西', value: -1, code: 45 },
		{ name: '广东', value: -1, code: 44 },
		{ name: '湖南', value: -1, code: 43 },
		{ name: '湖北', value: -1, code: 42 },
		{ name: '河南', value: -1, code: 41 },
		{ name: '山东', value: -1, code: 37 },
		{ name: '江西', value: -1, code: 36 },
		{ name: '福建', value: -1, code: 35 },
		{ name: '安徽', value: -1, code: 34 },
		{ name: '浙江', value: -1, code: 33 },
		{ name: '江苏', value: -1, code: 32 },
		{ name: '上海', value: -1, code: 31 },
		{ name: '黑龙江', value: -1, code: 23 },
		{ name: '吉林', value: -1, code: 22 },
		{ name: '辽宁', value: -1, code: 21 },
		{ name: '内蒙古', value: -1, code: 15 },
		{ name: '山西', value: -1, code: 14 },
		{ name: '河北', value: -1, code: 13 },
		{ name: '天津', value: -1, code: 12 },
		{ name: '北京', value: -1, code: 11 },
	])

	let city = ''

	const option = {
		tooltip: {
			trigger: 'item',
			formatter: function (e) {
				return (
					// e.seriesName +
					// '<br />' +
					e.name + '：' + (e.value > -1 ? e.value : ' -- ')
				)
			},
		},
		// 均值区间
		visualMap: {
			min: 0,
			max: 100000,
			left: 0,
			bottom: 0,
			showLabel: !0,
			pieces: [
				{
					gt: -2,
					lt: 0,
					label: '无数据',
					color: '#ffffff50',
				},
			],
			// show: !0,
		},
		geo: {
			map: 'china',
			roam: !1,
			scaleLimit: {
				min: 1,
				max: 2,
			},
			zoom: 1.23,
			top: 50,
			label: {
				normal: {
					show: !0,
					fontSize: '14',
					color: 'rgba(0,0,0,0.7)',
				},
			},
			itemStyle: {
				normal: {
					shadowBlur: 50,
					shadowColor: 'rgba(0, 0, 0, 0.1)',
					borderColor: 'rgba(0, 0, 0, 0.2)',
				},
				emphasis: {
					areaColor: 'rgba(0, 0, 0, 0.05)',
					shadowOffsetX: 0,
					shadowOffsetY: 0,
					borderWidth: 0,
				},
			},
		},
		series: [
			{
				name: '',
				type: 'map',
				geoIndex: 0,
				data: dataList.value,
			},
		],
	}

	if (mapData?.distribution) {
		// 处理接口数据
		mapData.distribution.forEach((item, index) => {
			// 遍历城市数据
			mapData.provinceIds[index].forEach(ele => {
				// 为指定城市赋值数据
				Object.keys(ele).forEach(ele_ => {
					city = dataList.value.find(element => element.code === Number(ele_))
					city.value = Number(ele[ele_])
				})
			})
			// 修改均值范围 当数量恰好在极端范围时，无法显示，就扩大0.01的范围
			option.visualMap.pieces.push({
				gt: Number(item.split(' - ')[0]) - 0.01,
				lt: Number(item.split(' - ')[1]) + 0.01,
				label: `${item.split(' - ')[0]} ~ ${item.split(' - ')[1]}`,
				color: colors[index].color,
			})
		})
	}

	myChart.setOption(option)
	window.addEventListener('resize', () => {
		myChart && myChart.resize()
	})
}

// 导入echarts文件
const loadScriptEcharts = () => {
	return new Promise(resolve => {
		const script = document.createElement('script')
		script.type = 'text/javascript'
		script.src = '/echarts/echarts.min.js'
		script.onload = resolve
		document.head.appendChild(script)
	})
}

// 导入china.js 文件
const loadScriptEchartsChina = () => {
	return new Promise(resolve => {
		const script = document.createElement('script')
		script.type = 'text/javascript'
		script.src = '/echarts/china.js'
		script.onload = resolve
		document.head.appendChild(script)
	})
}

// 用户信息
const userData = useCookie('userData')

// 对接接口
watch(
	() => prop.projectId,
	() => {
		// 获取地图数据
		statisticsMean({
			unitId: userData.value.roles.find(item => item.code === '1')
				? 0
				: userData.value.departments.find(item => item.level === 2)?.id,
			projectId: prop.projectId,
		}).then(res => {
			// 重构地图
			echartsMap(res.data)
		})
	}
)

onMounted(async () => {
	await loadScriptEcharts()
	await loadScriptEchartsChina()

	statisticsMean({
		unitId: userData.value.roles.find(item => item.code === '1')
			? 0
			: userData.value.departments.find(item => item.level === 2)?.id,
		projectId: prop.projectId,
	})
	// 初始化地图
	echartsMap()
})
</script>

接口的数据格式

<style lang="scss">
#mapBox {
	width: 100%;
	height: 90%;
}
</style>

运行效果