ecahrts给地图添加贴图纹理

有个可视化需求给地图添加纹理，翻了好久没翻到成品，希望这篇文章对后面的人有所帮助吧。虽然echarts文档里面也有说明，但是echarts文档对一些配置属性确实不敢恭维实现是以html实现的，vue其实一样的道理，不会差距太大html代码：<!DOCTYPE html><html><head><meta charset="utf-8" /><t

微笑い一刀

11003人浏览 · 2021-04-24 22:03:58

微笑い一刀 · 2021-04-24 22:03:58 发布

有个可视化需求给地图添加纹理，翻了好久没翻到成品，希望这篇文章对后面的人有所帮助吧。

虽然echarts文档里面也有说明，但是echarts文档对一些配置属性确实不敢恭维

实现是以html实现的，vue其实一样的道理，不会差距太大

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="application/javascript" src="js/echarts.js"></script>
		<script type="application/javascript" src="js/jquery.min.js"></script>
	</head>
	<body style="background: url(img/bg.png);background-repeat: no-repeat;background-size: 100%;overflow: hidden;">
		<div style="width: 100%;height: 100vh;" id="map"></div>
		<img src="img/1.jpg" id="img1" style="display: none;" />
		<img src="img/2.jpg" id="img2" style="display: none;" />
		<img src="img/3.jpg" id="img3" style="display: none;" />
		<img src="img/4.jpg" id="img4" style="display: none;" />
		<img src="img/5.jpg" id="img5" style="display: none;" />
	</body>
	<script>
		var myChart = echarts.init(document.getElementById('map'));
		//通过后台接口返回的数据  value计算取值范围得到5个等级其一 选择img的对应五张图片纹理显示
		var data = [{
				name: "呈贡区",
				value: 12,
				itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img1"),
							repeat: 'repeat'
						}
					}
				}
			},
			{
				name: "安宁市",
				value: 12,
				itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img2"),
							repeat: 'repeat'
						}
					}
				}
			},
			{
				name: "安宁市",
				value: 12,
				itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img2"),
							repeat: 'repeat'
						}
					}
				}
			},
			{
				name: "晋宁区",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img3"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "宜良县",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img4"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "石林彝族自治县",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img5"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "官渡区",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img1"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "五华区",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img2"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "盘龙区",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img3"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "富民县",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img3"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "寻甸回族彝族自治县",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img5"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "禄劝彝族苗族自治县",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img5"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "东川区",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img1"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "嵩明县",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img2"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "西山区",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img3"),
						repeat: 'repeat'
					}
				}
			}
		];
		$.getJSON("js/kunmingMap.js", function(geoJson) {
			echarts.registerMap('昆明', geoJson);
			let option = {
				//不触发事件
				silent:true,
				//要显示纹理要关闭这个属性
				visualMap: {
					show: false
				},
				//公共的一些设置  我理解为容器
				geo: {
					map: '昆明',
					aspectScale: 1,
					roam: false,
					itemStyle: {
						//容器外边框设置
						normal: {
							borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#00F6FF'
							}, {
								offset: 1,
								color: '#53D9FF'
							}], false),
							borderWidth: 3.5, //设置外层边框
							shadowColor: 'rgba(0,54,255, 1)',
							shadowOffsetY: 0,
							shadowBlur: 60
						},
						//选中状态
						emphasis: {
							show:false
						}
					}
				},
				//我的理解为每个小区域的容器的公共设置
				series: [{
					type: "map",
					map: '昆明',
					aspectScale: 1,
					itemStyle:{
						normal: {
							borderColor: '#6FE7FF',
							borderWidth: 1
						},
						emphasis: {
							show:false
						}
					},
					label: {
						normal: {
							show: true,
							fontSize: 12,
							color: "#6FE7FF"
						},
						emphasis: {
							color: '#6FE7FF'
						}
					},
					//每个小区域的独立设置
					data: data
				}]
			};
			myChart.setOption(option);
		})
	</script>
</html>

再单独说明下属性：我理解的属性

geo:整个地图的父级容器,再这里设置一些属性如果后面不对其进行覆盖，就会使用这个对象里面的属性值，可以用来节省一些公关代码和设置外边框

visualMap：这个属性说是什么视觉什么的，看不懂我只知道删除这个属性，纹理就不会显示了

silent:true 这是取消全局地图事件，因为我这个地图有个BUG 就是鼠标移入会被颜色覆盖，也就是贴图纹理会被覆盖所以我就干脆取消全局事件

最终放上结果图：不喜勿喷，我应该也算这个地图纹理的开荒者吧...

补充下：

1. echarts版本是5.1.0 可以通过echarts.version得到当前框架版本号

2. data中的数据的name必须与地图显示的名字一样比如安宁市, 如果你地图是显示安宁.那么data的name就得是安宁可以理解为这是一个映射关系

3. 鼠标移入高亮问题我之前是通过禁用全局事件解决的但是可以通过一个echarts支持的函数方式解决，这样既不禁用事件，又能解决鼠标移入纹理被覆盖的问题

echarts.on("mouseover", function (params){
    echarts.dispatchAction({
        type: 'downplay'
	});
});

4. vue中使用5.1.0 貌似需要使用下面的方式引入，不然会找不到对象

import * as echarts from 'echarts';

5. echarts的itemStyle的层级、barBorderRaudis属性名在新版本中属于过时状态浏览器控制台也会提示 itemStyle中的nomal删了就行，直接把color等属性定义在itemStyle下就行，barBorderRaudis改为borderRaudis就行-->这个只是给我提个醒，我怕以后高版本直接不支持了，现在虽然过时，但是还是支持的..无视就好

上传了一个html版本的demo，若需要vue版本的，自行更改就行。已经实现过，并不难，按需修改就行 demo下载链接：https://download.csdn.net/download/u012169821/25612191

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^