ECharts中国区域地图

2019独角兽企业重金招聘Python工程师标准>>>

function loadAreaMap() {
	
	$("#areaMap").show();

	require(

	[

	'echarts',

	'echarts/chart/map',

	], function(ec) {

		var myChart = ec.init(document.getElementById('areaMap'));
		
		var option = {
				
			    color: colorArea,
			    
			    legend: {
			        orient: 'vertical',
			        x:'left',
			        y:'bottom',
			        data: ['北部地区','东部地区','南部地区','西北地区','东北地区','中部地区','东南地区',
			               {
			                   name:'城市地区',
			                   icon : 'images/red_dot.png',

			               },
			               {
			                   name:'农村地区',
			                   icon : 'images/purple_dot.png',
			               }
			           ],
			        // 选择模式，默认开启图例开关，可选single，multiple
			        selectedMode:'multiple', 
			        //配置默认选中状态
			        selected:{
			        	'北部地区' : true,
			        	'东部地区' : true,
			        	'南部地区' : true,
			        	'西北地区 ' : true,
			        	'东北地区' : true,
			        	'中部地区' : true,
			        	'东南地区' : true,
			        	'城市地区' : true,
			        	'农村地区' : true
			       }
			      },
			    // 提示框
				tooltip : {
					// 类目提示框
					trigger : 'item',
					// 提示文字格式
					formatter : '{a}：{b}'
				},
			    dataRange: {
			    	show : false,
			    	max : 1400,
			    	min : 0,
			        calculable : false,
			        splitNumber : 7,
			        color: ['#99F1DB', '#F8EBDB', '#ECFAEB','#00B5A3','#F5966A','#16C7C1','#61FB8D']
			    },
			    series : [
			        {
			            name: '北部地区',
			            type: 'map',
			            mapType: 'china',
			            roam: false,
			            itemStyle:{
			                normal:{label:{show:false}},
			                emphasis:{label:{show:true}}
			            },
			            data:[
			                {name: '北京',value: 1300},
			                {name: '天津',value: 1300},
			                {name: '河北',value: 1300},
			                {name: '山西',value: 1300},
			                {name: '内蒙古',value: 1300},
			            ]
			        },
			        {
		        	 	name: '东部地区',
			            type: 'map',
			            mapType: 'china',
			            roam: false,
			            itemStyle:{
			                normal:{label:{show:false}},
			                emphasis:{label:{show:true}}
			            },
			            data:[
			                {name: '上海',value: 1100},
			                {name: '安徽',value: 1100},
			                {name: '山东',value: 1100},
			                {name: '江苏',value: 1100},
			                {name: '浙江',value: 1100},
			                {name: '江西',value: 1100},
			                {name: '福建',value: 1100},
			                {name: '台湾',value: 1100}
			            ]
			        },
			        {
		        	 	name: '南部地区',
			            type: 'map',
			            mapType: 'china',
			            roam: false,
			            itemStyle:{
			                normal:{label:{show:false}},
			                emphasis:{label:{show:true}}
			            },
			            data:[
			                {name: '广西',value: 900},
			                {name: '广东',value: 900},
			                {name: '海南',value: 900},
			                {name: '香港',value: 900},
			                {name: '澳门',value: 900}
			            ]
			        },
			        {
		        	 	name: '西北地区',
			            type: 'map',
			            mapType: 'china',
			            roam: false,
			            itemStyle:{
			                normal:{label:{show:false}},
			                emphasis:{label:{show:true}}
			            },
			            data:[
			                {name: '新疆',value: 700},
			                {name: '陕西',value: 700},
			                {name: '青海',value: 700},
			                {name: '宁夏',value: 700},
			                {name: '甘肃',value: 700}
			            ]
			        },
			        {
		        	    name: '东北地区',
			            type: 'map',
			            mapType: 'china',
			            roam: false,
			            itemStyle:{
			                normal:{label:{show:false}},
			                emphasis:{label:{show:true}}
			            },
			            data:[
							{name: '辽宁',value: 500},
							{name: '吉林',value: 500},
							{name: '黑龙江',value: 500},
			            ]
			        },
			        {
		        	    name: '中部地区',
			            type: 'map',
			            mapType: 'china',
			            roam: false,
			            itemStyle:{
			                normal:{label:{show:false}},
			                emphasis:{label:{show:true}}
			            },
			            data:[
							{name: '河南',value: 300},
							{name: '湖北',value: 300},
							{name: '湖南',value: 300},
			            ]
			        },
			        {
		        	    name: '东南地区',
			            type: 'map',
			            mapType: 'china',
			            roam: false,
			            itemStyle:{
			                normal:{label:{show:false}},
			                emphasis:{label:{show:true}}
			            },
			            data:[
							 {name: '重庆',value: 100},
							 {name: '云南',value: 100},
							 {name: '西藏',value: 100},
				             {name: '四川',value: 100},
				             {name: '贵州',value: 100},
			            ]
			        },
			        {
			        	    name: '城市地区',
				            type: 'map',
				            mapType: 'china',
				            roam: false,
				            itemStyle:{
				                normal:{label:{show:false}},
				                emphasis:{label:{show:true}}
				            },
				            data:[],
				            markPoint : {
								symbolSize : 3,
								itemStyle: {
					                normal: {
					        			color: '#FF0000',
					                },
					                emphasis: {}
					               
					            },
								
								// 城市
								data : [ {name : '上海市'},
								         {name : '上虞市'},
								         {name : '中山市'},
								         {name : '丹东市'},
								         {name : '保定市'},
								         {name : '北京市'}, 
								         {name : '厦门市'},
								         {name : '哈尔滨市'},
								         {name : '嘉兴市'},
								         {name : '四会市'},
								         {name : '大丰市'},
								         {name : '沈阳市'},
								         {name : '泰兴市'},
								         {name : '海宁市'},
								         {name : '苏州市'}, 
								         {name : '西宁市'}, 
								         {name : '赤峰市'},
								         {name : '连云港市'},
								         {name : '铜陵市'},
								         {name : '长乐市'},
								         {name : '阳泉市'},
								         {name : '大连市'}, 
								         {name : '鞍山市'}, 
								         {name : '杭州市'}, 
								         {name : '马鞍山市'}, 
								         {name : '武汉市'}, 
								         {name : '广州市'}, 
								         {name : '柳州市'}, 
								         {name : "延吉市"},
								         {name : "扬中市"},
								         {name : "淮安市"}
								]
							},
							// 城市坐标
							geoCoord :  coordinate
			        	},
			        {
			            name: '农村地区',
			            type: 'map',
			            mapType: 'china',
			            roam: false,
			            itemStyle:{
			                normal:{label:{show:false}},
			                emphasis:{label:{show:true}}
			            },
			            data:[],
			            markPoint : {
							symbolSize : 3,
							itemStyle: {
				                normal: {
				        			color: '#8A00E4'
				                },
				                emphasis: {}
				            },
				        // 农村
						data : [ {name: "金坛区"},
						         {name: "新源县"},
						         {name: "扶绥县"},
						         {name: "磁县"},
						         {name: "阳城县"},
						         {name: "南岗区"},
						         {name: "海安县"},
						         {name: "东海县"},
						         {name: "灌云县"},
						         {name: "盱眙县"},
						         {name: "金湖县"},
						         {name: "建湖县"},
						         {name: "射阳县"},
						         {name: "嘉善县"},
						         {name: "仙居县"},
						         {name: "肥西县"},
						         {name: "章贡区"},
						         {name: "临朐县"},
						         {name: "汶上县"},
						         {name: "西平县"},
						         {name: "云梦县"},
						         {name: "衡东县"},
						         {name: "九龙坡区"},
						         {name: "景泰县"},
						         {name: "自流井区"},
						         {name: "盐亭县"},
						         {name: "凉州区"},
						         {name: "青羊区"},
						]
					},// 农村坐标
					geoCoord :  coordinate
			        },
			    ]
			};
			                    
		myChart.setOption(option);
	});
}

效果图

转载于:https://my.oschina.net/Tsher2015/blog/821481