天天看點

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>
           

  

預覽圖

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

轉載于:https://www.cnblogs.com/MainActivity/p/11341661.html

繼續閱讀