echarts地图-单独给香港和澳门画引导线

因为香港特别行政区和澳门特别行政区的名字特别长又需要显示全名
所以显示在地图上会挤在一起,所以根据天地图的坐标来加了两个引导线(echarts5以下!!!)在这里插入图片描述
在这里插入图片描述


var fullName = {
	北京: '北京市',
	天津: '天津市',
	河北: '河北省',
	山西: '山西省',
	内蒙古: '内蒙古自治区',
	辽宁: '辽宁省',
	吉林: '吉林省',
	黑龙江: '黑龙江省',
	江苏: '江苏省',
	浙江: '浙江省',
	安徽: '安徽省',
	福建: '福建省',
	江西: '江西省',
	山东: '山东省',
	河南: '河南省',
	湖北: '湖北省',
	湖南: '湖南省',
	广东: '广东省',
	广西: '广西壮族自治区',
	海南: '海南省',
	四川: '四川省',
	贵州: '贵州省',
	云南: '云南省',
	西藏: '西藏自治区',
	陕西: '陕西省',
	甘肃: '甘肃省',
	青海: '青海省',
	宁夏: '宁夏回族自治区',
	新疆: '新疆维吾尔自治区',
	香港: '香港特别行政区',
	澳门: '澳门特别行政区',
	台湾: '台湾省',
};

option = {
	title: {
		show: false,
		text: '',
		subtext: '',
		left: 'center',
		textStyle: {
			color: '#121212',
			fontSize: 16,
			fontWeight: 'normal',
			fontFamily: 'Source Han Sans CN',
		},
		subtextStyle: {
			color: '#121212',
			fontSize: 13,
			fontWeight: 'normal',
			fontFamily: 'Source Han Sans CN',
		},
	},
	tooltip: {
		show: true,
		trigger: 'item',
		formatter: '{b}: {c}家',
	},
	toolbox: {
		show: false,
		orient: 'vertical',
		left: 'right',
		top: 'top',
		iconStyle: {
			normal: {
				color: '#fff',
			},
		},
		feature: {
			mark: {
				// '辅助线开关'
				show: true,
			},
			saveAsImage: {
				//保存为图片。
				show: true, //是否显示该工具。
				type: 'png', //保存的图片格式。支持 'png' 和 'jpeg'。
				name: 'pic1', //保存的文件名称,默认使用 title.text 作为名称
				backgroundColor: '#ffffff', //保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色
				title: '中国地图',
				pixelRatio: 1, //保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2
			},
			// dataView: {readOnly: false},
		},
	},
	visualMap: {
		min: 0,
		max: 100,
		text: ['高', '低'],
		realtime: false,
		calculable: true,
		inRange: {
			color: ['#ebdecb', '#8aa87d', '#7d97a8']
		}
	},
	geo: {
		map: 'china',
		roam: true,
		zoom: 1.6,
		center: [104.46, 35.92],

		label: {
			normal: {
				show: true,
				formatter: function (param) {
					var reName = '';
					if (
						param.name == '香港' ||
						param.name == '澳门'
					) {
						reName = '';
					} else {
						if (fullName[param.name]) {
							reName = fullName[param.name];
						} else {
							reName = '';
						}
					}
					return reName;
				},
				textStyle: {
					color: '#000',
					fontSize: 12,
				},
			},
			emphasis: {
				show: true,
				textStyle: {
					color: '#640000',
					fontSize: 13,
				},
			},
		},
		itemStyle: {
			normal: {
				// borderColor: 'rgba(147, 235, 248, 1)',
				borderColor: '#9c978b',
				borderWidth: 1,
				areaColor: {
					type: 'radial',
					x: 0.2,
					y: 0.2,
					r: 0.9,
					colorStops: [
						{
							offset: 0,
							color: 'rgba(255, 255, 255, 0)', // 0% 处的颜色
						},
						{
							offset: 1,
							color: 'rgba(255, 255, 255, .1)', // 100% 处的颜色
						},
					],
					globalCoord: false, // 缺省为 false
				},

				// shadowColor: 'rgba(128, 217, 248, 1)',
				// shadowColor: '#043563',
				// shadowOffsetX: -2,
				// shadowOffsetY: 2,
				// shadowBlur: 10
			},
			emphasis: {
				areaColor: '#ffdf33',
				borderWidth: 0,
			},
		},
	},
	visualMap: {
		min: 0,
		max: 150,
		right: '0',
		bottom: '2px',
		text: ['高', '低'],
		calculable: true,
		// seriesIndex: [1],
		inRange: {
			// color: ['#D2EAFF', '#177FE8']
			color: ['#ebdecb', '#8aa87d', '#7d97a8'],
		},
		show: true,
		textStyle: {
			color: ['#DCE5F5'],
		},
	},
	series: [
		{
			name: 'china',
			type: 'map',
			geoIndex: 0, // 关联到上面的 geo 配置
			data: [],
		},
		{
			name: '引导线',
			type: 'lines',
			zlevel: 3,
			lineStyle: {
				normal: {
					color: 'rgb(36, 36, 36)',
					width: 1,
					type: 'solid',
				},
			},
			data: [
				{
					coords: [
						[114.16, 22.28],
						[116.87, 22.18],
					], // 香港引导线
					label: {
						show: true,
						position: 'end',
						formatter: '香港特别行政区',
						color: '#000',
					},
				},
				{
					coords: [
						[113.55, 22.14],
						[113.27, 21.05],
					], // 澳门引导线
					label: {
						show: true,
						position: 'end',
						formatter: '澳门特别行政区',
						color: '#000',
					},
				},
			],
		},
	]
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值