Exports注入Js地图海南省Js地图

最新推荐文章于 2023-08-09 21:42:27 发布

wute

最新推荐文章于 2023-08-09 21:42:27 发布

阅读量308

点赞数

文章标签： echarts html css

本文链接：https://blog.youkuaiyun.com/linwute/article/details/120254993

版权

这篇博客展示了如何利用Echarts库生成一个海南省地图的JS示例，地图上各市县的数据通过randomValue()函数随机生成，实现了动态展示的效果。地图的样式包括正常和鼠标悬停两种状态，同时配置了视觉映射组件进行数据颜色的映射。HTML部分包含了必要的样式设置和Echarts库的引入，确保地图能正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Exports注入Js地图海南省Js地图

例图：
在这里插入图片描述

Js写法：

function randomValue() {
	         return Math.round(Math.random() * 1000);
	     }
	     var data = [
			 { name: '海口市', value: randomValue() },
			 { name: '三亚市', value: randomValue() },
			 { name: '儋州市', value: randomValue() },
			 { name: '五指山市', value: randomValue() },
			 { name: '文昌市', value: randomValue() },
			 { name: '琼海市', value: randomValue() },
			 { name: '万宁市', value: randomValue() },
			 { name: '东方市', value: randomValue() },
			 { name: '定安县', value: randomValue() },
			 { name: '屯昌县', value: randomValue() },
			 { name: '澄迈县', value: randomValue() },
			 { name: '临高县', value: randomValue() },
			 { name: '白沙县', value: randomValue() },
			 { name: '昌江县', value: randomValue() },
			 { name: '乐东县', value: randomValue() },
			 { name: '陵水县', value: randomValue() },
			 { name: '保亭县', value: randomValue() },
			 { name: '琼中县', value: randomValue() }
	     ];
	     var myChart = echarts.init(document.getElementById('map22'));
	     myChart.setOption(option = {
	         title: {
	             text: "示例",
	 
	             left: 'center',
	             textStyle: {
	                 color: '#ffffff'
	             }
	         },
	         visualMap: {
	             min: 0,
	             max: 1000,
	             left: 'left',
	             top: 'bottom',
	             text: ['高', '低'], // 文本，默认为数值文本
	             calculable: true,
	             inRange: {
	                 color: ['yellow', 'lightskyblue', 'orangered']
	             },
	             textStyle: {
	                 color: '#ffffff'
	             }
	         },
	         series: [{
	             type: 'map',
	             map: '海南',
	             label: {
	                 normal: {
	                     show: true
	                 },
	                 emphasis: {
	                     textStyle: {
	                         color: '#fff'
	                     }
	                 }
	             },
	             itemStyle: {
	                 normal: {
	                     borderColor: '#389BB7',
	                     areaColor: '#fff',
	                 },
	                 emphasis: {
	                     areaColor: '#389BB7',
	                     borderWidth: 0
	                 }
	             },
	             animation: false,
	             data: data
	         }]
	     });

Html写法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地图</title>
	</head>
	<style> 
		/* 这里至关重要，不然地图显示不出来  */
		.mainwindow {
			height: 600px;
			width: 500px;
		}

		.mapwindow {
			height: 80%;
			width: 80%;
			margin: auto;
		}
	   </style>
	    
	<body>
	    <div id="main" class="mainwindow">
	        <div id="map22" class="mapwindow"></div>
	    </div>
		
		<script src="./js/echarts.min.js"></script>
		 <script src="./js/hainan.js"></script>
		 <!-- <script src="./js/sichuan.js"></script> -->
		 <script src="./js/ditu.js"></script>
		 
	</body>
	
</html>