echart 中国地图并标记城市

<template>
	<div class="chinaMap">
		<div id="china_map"></div>
	</div>
</template>
<script>
	const echarts = require("echarts");
	import 'echarts/map/js/china.js'
	export default {
		data() {
			return {};
		},
		mounted() {
			this.drawPie();
		},
		methods: {
			drawPie() {
				// 初始化echarts实例
				let chinaMap = echarts.init(
					document.getElementById('china_map')
				);
				// 进行相关配置
				var geoCoordMap = { //自定义城市坐标
					"郑州": [113.62, 34.75],
					"西安": [108.95, 34.27],
					"青岛": [120.33, 36.07],
					"宁波": [121.56, 29.86],
					"芜湖": [118.38, 31.33]
				};
				var convertData = function(data) {
					var res = [];
					for (var i = 0; i < data.length; i++) {
						var geoCoord = geoCoordMap[data[i].name];
						if (geoCoord) {
							res.push({
								name: data[i].name,
								value: geoCoord.concat(data[i].value)
							});
						}
					}
					return res;
				};

				var chartOption = {
					// geo配置详解： https://echarts.baidu.com/option.html#geo
					geo: { // 地理坐标系组件用于地图的绘制
						map: 'china', // 表示中国地图
						// roam: true, // 是否开启鼠标缩放和平移漫游
						zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
						label: {
							show: false
						},
						regions: [{ //隐藏南海区域
							name: '南海诸岛',
							value: 0,
							itemStyle: {
								normal: {
									opacity: 0,
									label: {
										show: false
									}
								}
							}
						}],
						itemStyle: {
							normal: {
								areaColor: '#131727',
								borderColor: '#4c505c'
							},
							emphasis: {
								borderWidth: 0,
								borderColor: '#3082ff',
								areaColor: "#3082ff",
								shadowBlur: 20,
								shadowColor: 'rgba(145, 194, 215, 0.5)'
							}
						}
					},
					series: [
						{
							name: '计划单列市',
							type: 'effectScatter', //影响散点
							coordinateSystem: 'geo',
							symbolSize: 12,
							showEffectOn: 'render',
							rippleEffect: {
								brushType: 'stroke'
							},
							hoverAnimation: true,
							label: {
								normal: {
									color: '#3cfbf0',
									formatter: '{b}',
									position: 'right',
									show: false
								},
								emphasis: {
									show: true
								}
							},
							itemStyle: {
								normal: {
									color: '#3cfbf0',
									shadowBlur: 10,
									shadowColor: '#333'
								},
							},
							data: convertData([{
									name: "郑州"
								},
								{
									name: "西安"
								},
								{
									name: "青岛"
								},
								{
									name: "宁波"
								},
								{
									name: "芜湖"
								},
							]),
						}
					]
				}
				// 使用刚指定的配置项和数据显示地图数据
				chinaMap.setOption(chartOption);
				// -----------------------------------------------------------------
				// 响应式变化
				window.addEventListener("resize", () => chinaMap.resize(), false);
			}
		},
		destroyed() {
			window.onresize = null;
		}
	}
</script>