从北京出发，游览三山五岳旅游路线图

<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 = {
	'北京市': [116.4551, 40.2539],
	'黄山': [118.19424 , 30.09709],
	'庐山': [116.00108 , 29.56154],
	'雁荡山': [121.04030 , 28.37967],
	'泰山': [117.09474 , 36.26989],
	'华山': [110.07303 , 34.49765],
	'衡山': [112.72207 , 27.27567],
	'恒山': [113.73105 , 39.66762],
	'嵩山': [112.96105 , 34.52004]
};

var BJData = [
	[{
		name: '北京市'
	}, {
		name: '北京市',
		value: 200
	}],
	[{
		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: 80
	}]
];

var option = {
	title: {
		show: true,
		x: "center",
		y: "15",
		text: "三山五岳游玩路线图",
		textStyle: {
			color: "#fff",
			fontSize: 20,
			fontWeight: 'normal'
		}
	},
	geo: {
		map: 'china',
		label: {
			emphasis: {
				show: false
			}
		},
		layoutCenter: ['50%', '58%'], 
        layoutSize: '100%',
		roam: true,
		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>

呱呱工具箱