echarts 如何在世界地圖中繪制中國地圖


1.導入 world.china.js  這個js是將world.js 文件 以及china.js文件進行合並 (網上一些中國地圖勾勒的身份曲線感覺很飄  所以自己加工了一下china.js中的數據, 然后合並到了word.js中)

(可以在這里進行下載  https://github.com/a1115040996/MyHTML/blob/master/world-china.js)

2.現在echarts.js源碼

3.生成地圖

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box" style="width: 1000px;height: 1000px;"></div>
		<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/world-china.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var myCharts = echarts.init(document.getElementById('box'));
			myCharts.setOption({
				visualMap: {
			        min: 0,
			        max: 1000000,
			        text:['High','Low'],
			        realtime: false,
			        calculable: true,
			        color: ['orangered','yellow','lightskyblue']
			    },
				 series: [{
			        name: 'chinaMap',
			        type: 'map',
			        map: 'world',
			        roam: true,
			        itemStyle:{
		                emphasis:{label:{show:true}}
		            },
		            center: [115.97, 29.71],
		            zoom: 12,
			        label: {
			            normal: {
			                show: true,
			                position: 'center',
			                formatter: '{b}'
			            }
			        },
			        data: [
			        	{name: '山東省', value: '1000'}
			        ],
			        zlevel: 3
			    }]
			});
		</script>
	</body>
</html>

  

 

預覽圖

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM