ecahrts给地图添加贴图纹理

最新推荐文章于 2025-05-29 17:38:11 发布

原创

最新推荐文章于 2025-05-29 17:38:11 发布 · 1.3w 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#echarts贴图 #echarts纹理

本文档介绍了如何使用Echarts在地图上添加纹理，通过HTML和JavaScript实现，详细展示了代码示例，包括数据映射、纹理应用和解决鼠标移入覆盖问题的方法。同时，提供了版本信息、注意事项和解决高亮问题的方案，以及最终效果展示。适用于Echarts地图可视化开发人员参考。

该文章已生成可运行项目，

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

虽然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;" />
	&l

本文章已经生成可运行项目