从杭州出发，游览中国八大名山旅游路线图

<div id="map" style="width: 100%;height:calc(100vh - 20px);"></div>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('map'));

var mapName = 'china'
var data = []
var toolTipData = [];

/*获取地图数据*/
myChart.showLoading();
var mapFeatures = echarts.getMap(mapName).geoJson.features;
myChart.hideLoading();
var geoCoordMap = {
	'杭州': [120.21551 , 30.25308],
	'长白山': [128.07988 , 42.02792],
	'峨眉山': [103.35630 , 29.57383],
	'华山': [110.07303 , 34.49765],
	'老君山': [111.66300 , 33.75186],
	'张家界': [110.49151 , 29.05291],
	'武功山': [114.18521 , 27.45765],
	'黄山': [118.19424 , 30.09709],
	'泰山': [117.09474 , 36.26989]
};
var GMDData = [
	[{name: '杭州'}, {name: '杭州',value: 150}],
	[{name: '杭州'}, {name: '长白山',value: 80}],
	[{name: '杭州'}, {name: '峨眉山',value: 80}],
	[{name: '杭州'}, {name: '华山',value: 80}],
	[{name: '杭州'}, {name: '老君山',value: 80}],
	[{name: '杭州'}, {name: '张家界',value: 80}],
	[{name: '杭州'}, {name: '武功山',value: 80}],
	[{name: '杭州'}, {name: '黄山',value: 80}],
	[{name: '杭州'}, {name: '泰山',value: 100}]
];

var option = {
	title: {
		show: true,
		x: "center",
		y: "15",
		text: "中国八大名山旅游路线图",
		textStyle: {
			color: "#fff",
			fontSize: 18,
			fontWeight: 'normal'
		}
	},
	geo: {
		map: 'china',
		label: {
			normal: { //静态的时候展示样式
				show: true, //是否显示地图份得名称
				textStyle: {
					color: "#fff",
					fontSize: 12
				}
			},
			emphasis: { //动态展示的样式
				color: '#fff',
			},
		},
		layoutCenter: ['40%', '58%'], 
        layoutSize: '100%',
		roam: true,
		zoom: 1.6,
		itemStyle: {
			normal: {
				borderColor: 'rgba(147, 235, 248, 1)',
				borderWidth: 1,
				areaColor: {
					type: 'radial',
					x: 0.5,
					y: 0.5,
					r: 0.8,
					colorStops: [{
						offset: 0,
						color: 'rgba(175,238,238, 0)'
					}, {
						offset: 1,
						color: 'rgba(47,79,79, .1)' 
					}],
					globalCoord: false 
				},
				shadowColor: 'rgba(128, 217, 248, 1)',
				// shadowColor: 'rgba(255, 255, 255, 1)',
				shadowOffsetX: -2,
				shadowOffsetY: 2,
				shadowBlur: 10
			},
			emphasis: {
				areaColor: '#389BB7',
				borderWidth: 0
			}
		},
		itemStyle: {
			normal: {
				areaColor: 'rgba(58, 127, 213, .2)',
				borderColor: '#0a53e9', //线
				shadowColor: '#092f8f', //外发光
				shadowBlur: 50
			},
			emphasis: {
				color: 'rgba(58, 127, 213, 1)' //悬浮背景
			}
		},
	},
	series: series
};

myChart.setOption(option);
window.addEventListener("resize", function () {
  myChart.resize();
});
</script>

呱呱工具箱