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

最新推荐文章于 2023-08-04 00:21:23 发布

wute

最新推荐文章于 2023-08-04 00:21:23 发布

阅读量251

点赞数

文章标签： echarts html css

本文链接：https://blog.csdn.net/linwute/article/details/120254993

版权

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>

海南省Js地图附件：
点击下载

wute

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Exports注入Js地图海南省Js地图

Exports注入Js地图海南省Js地图Js写法：function randomValue() { return Math.round(Math.random() * 1000); } var data = [ { name: '海口市', value: randomValue() }, { name: '三亚市', value: randomValue() }, { name: '儋州市', value: randomValue()
复制链接

扫一扫