从北京出发，一生必去的中国50个最美地方

<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],
	'万里长城': [111.12054, 36.90287],
	'杭州西湖': [120.12792, 30.22893],
	'丽江古城': [100.23248, 26.88316],
	'新疆喀纳斯': [87.13838, 48.51354],
	'乌镇': [120.49826, 30.75420],
	'九寨沟': [103.92571, 33.27314],
	'湘西凤凰古城': [109.60903, 27.95321],
	'南京夫子庙': [118.79543, 32.02694],
	'乐山大佛': [103.78144, 29.54754],
	'可可西里': [94.07336, 35.64528],
	'普陀山': [122.39761, 30.00798],
	'西双版纳': [100.90291, 22.09314],
	'三峡大坝': [111.04057, 30.83274],
	'七彩丹霞': [100.07574, 38.96431],
	'珠穆朗玛峰': [86.85929, 28.14345],
	'漠河': [122.54542, 52.97830],
	'洱海': [100.25339, 25.60891],
	'千岛湖': [119.06010 , 29.55299],
	'呼伦贝尔': [117.99483 , 49.50249],
	'长白山天池': [128.07988 , 42.02792],
	'稻城亚丁': [100.29327 , 28.46494 ],
	'泸沽湖': [100.91033 , 27.72223],
	'张家界': [110.49151 , 29.05291],
	'峨眉山': [103.35630 , 29.57383],
	'上海外滩': [121.49720 , 31.24345],
	'黄果树瀑布': [105.67625 , 25.99541],
	'大理': [100.17048 , 25.70080],
	'少林寺': [112.96105 , 34.52004],
	'青海湖': [100.50297 , 36.58430],
	'日月潭': [120.91188 , 23.85447],
	'西安兵马俑': [109.28853 , 34.39202],
	'香格里拉': [99.71086 , 27.81029],
	'纳木错': [90.89619 , 30.76389],
	'林芝': [94.36805 , 29.65404],
	'壶口瀑布': [110.47329 , 36.07729],
	'五大连池': [126.21156 , 48.52261],
	'北戴河': [119.52215 , 39.82232],
	'九寨沟': [103.92571 , 33.27314],
	'大兴安岭': [124.15293 , 50.42003],
	'三亚': [109.51856 , 18.25874],
	'避暑山庄': [117.94121 , 41.00148],
	'云冈石窟': [113.14429 , 40.11927],
	'桂林阳朔': [110.50347 , 24.78452],
	'湖北恩施': [109.48655 , 30.30104],
	'鼓浪屿': [118.07347 , 24.45097],	
	'黄山': [118.19424, 30.09709],
	'泰山': [117.09474, 36.26989],
	'衡山': [112.72207, 27.27567],
	'恒山': [113.73105, 39.66762],
	'台湾': [121.57463 , 25.04094]
};

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

var option = {
	title: {
		show: true,
		x: "center",
		y: "15",
		text: "中国50个最美地方",
		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>

呱呱工具箱