基于Echarts数据可视化地图模块（地图下钻+地图迁徙线）

数据可视化大屏展示使用频率最高的应该就是地图了，无论是做功能性的还是做装饰用的，都是非常实用的，放上它项目才有了灵魂，显得非常的炫酷。这里分别对地图下钻，迁徙图，地图下钻+迁徙图的合并，记录介绍一下：

一、地图下钻

先看下效果：

核心源码(js文件)：

//地图容器
var chart = echarts.init(document.getElementById('main'));
//34个省、市、自治区的名字拼音映射数组
var provinces = {
	//23个省
	"台湾": "taiwan",
	"河北": "hebei",
	"山西": "shanxi",
	"辽宁": "liaoning",
	"吉林": "jilin",
	"黑龙江": "heilongjiang",
	"江苏": "jiangsu",
	"浙江": "zhejiang",
	"安徽": "anhui",
	"福建": "fujian",
	"江西": "jiangxi",
	"山东": "shandong",
	"河南": "henan",
	"湖北": "hubei",
	"湖南": "hunan",
	"广东": "guangdong",
	"海南": "hainan",
	"四川": "sichuan",
	"贵州": "guizhou",
	"云南": "yunnan",
	"陕西": "shanxi1",
	"甘肃": "gansu",
	"青海": "qinghai",
	//5个自治区
	"新疆": "xinjiang",
	"广西": "guangxi",
	"内蒙古": "neimenggu",
	"宁夏": "ningxia",
	"西藏": "xizang",
	//4个直辖市
	"北京": "beijing",
	"天津": "tianjin",
	"上海": "shanghai",
	"重庆": "chongqing",
	//2个特别行政区
	"香港": "xianggang",
	"澳门": "aomen"
};

//直辖市和特别行政区-只有二级地图，没有三级地图
var special = ["北京", "天津", "上海", "重庆", "香港", "澳门"];
var mapdata = [];
//绘制全国地图
$.getJSON('static/map/china.json', function(data) {
	d = [];
	for (var i = 0; i < data.features.length; i++) {
		d.push({
			name: data.features[i].properties.name
		})
	}
	mapdata = d;
	//注册地图
	echarts.registerMap('china', data);
	//绘制地图
	renderMap('china', d);
});

//地图点击事件
chart.on('click', function(params) {
	console.log(params);
	if (params.name in provinces) {
		//如果点击的是34个省、市、自治区，绘制选中地区的二级地图
		$.getJSON('static/map/province/' + provinces[params.name] + '.json', function(data) {
			echarts.registerMap(params.name, data);
			var d = [];
			for (var i = 0; i < data.features.length; i++) {
				d.push({
					name: data.features[i].properties.name
				})
			}
			renderMap(params.name, d);
		});
	} else if (params.seriesName in provinces) {
		//如果是【直辖市/特别行政区】只有二级下钻
		if (special.indexOf(params.seriesName) >= 0) {
			renderMap('china', mapdata);
		} else {
			//显示县级地图
			$.getJSON('static/map/city/' + cityMap[params.name] + '.json', function(data) {
				echarts.registerMap(params.name, data);
				var d = [];
				for (var i = 0; i < data.features.length; i++) {
					d.push({
						name: data.features[i].properties.name
					})
				}
				renderMap(params.name, d);
			});
		}
	} else {
		renderMap('china', mapdata);
	}
});

//初始化绘制全国地图配置
var option = {
	title: {
		text: '中国地图下钻',
		subtext: '三级下钻',
		link: 'http://www.ldsun.com',
		left: 'center',
		textStyle: {
			color: '#fff',
			fontSize: 16,
			fontWeight: 'normal',
			fontFamily: "Microsoft YaHei"
		},
		subtextStyle: {
			color: '#ccc',
			fontSize: 13,
			fontWeight: 'normal',
			fontFamily: "Microsoft YaHei"
		},
	},
	tooltip: {
		trigger: 'item',
		formatter: '{b}'
	},

	animationDuration: 1000,
	animationEasing: 'cubicOut',
	animationDurationUpdate: 1000,

};

function renderMap(map, data) {
	option.title.subtext = map;

	option.series = [{
		name: map,
		type: 'map',
		mapType: map,
		roam: false,
		zoom: 1,
		nameMap: {
			'china': '中国'
		},
		label: {
			emphasis: {
				show: false
			}
		},
		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)' // 0% 处的颜色
					}, {
						offset: 1,
						color: 'rgba(	47,79,79, .1)' // 100% 处的颜色
					}],
					globalCoord: false // 缺省为 false
				},
				shadowColor: 'rgba(128, 217, 248, 1)',
				shadowOffsetX: -2,
				shadowOffsetY: 2,
				shadowBlur: 10
			},
			emphasis: {
				areaColor: '#389BB7',
				borderWidth: 0
			}
		},
		data: data
	}];

	//渲染地图
	chart.setOption(option);
}

二、地图迁徙线

先看下效果：

核心源码(js文件)：

$(function () {
    echart_map();
    // echart_map中国地图
    function echart_map() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_map'));

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

        /*获取地图数据*/
        myChart.showLoading();
        var mapFeatures = echarts.getMap(mapName).geoJson.features;
        myChart.hideLoading();
        var geoCoordMap = {
            '福州': [119.4543, 25.9222],
            '长春': [125.8154, 44.2584],
            '重庆': [107.7539, 30.1904],
            '西安': [109.1162, 34.2004],
            '成都': [103.9526, 30.7617],
            '常州': [119.4543, 31.5582],
            '北京': [116.4551, 40.2539],
            '北海': [109.314, 21.6211],
            '海口': [110.3893, 19.8516],
            '长沙': [113.019455, 28.200103],
            '上海': [121.40, 31.73],
            '内蒙古': [106.82, 39.67]
        };

        var GZData = [
            [{
                name: '长沙'
            }, {
                name: '福州',
                value: 95
            }],
            [{
                name: '长沙'
            }, {
                name: '长春',
                value: 80
            }],
            [{
                name: '长沙'
            }, {
                name: '重庆',
                value: 70
            }],
            [{
                name: '长沙'
            }, {
                name: '西安',
                value: 60
            }],
            [{
                name: '长沙'
            }, {
                name: '成都',
                value: 50
            }],
            [{
                name: '长沙'
            }, {
                name: '常州',
                value: 40
            }],
            [{
                name: '长沙'
            }, {
                name: '北京',
                value: 30
            }],
            [{
                name: '长沙'
            }, {
                name: '北海',
                value: 20
            }],
            [{
                name: '长沙'
            }, {
                name: '海口',
                value: 10
            }],
            [{
                name: '长沙'
            }, {
                name: '上海',
                value: 80
            }],
            [{
                name: '长沙'
            }, {
                name: '内蒙古',
                value: 80
            }]
        ];

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [fromCoord, toCoord]
                    });
                }
            }
            return res;
        };

        var color = ['#c5f80e'];
        var series = [];
        [
            ['石家庄', GZData]
        ].forEach(function (item, i) {
            series.push({
                name: item[0],
                type: 'lines',
                zlevel: 2,
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: 'arrow',
                    symbolSize: 5
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                name: item[0],
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function (val) {
                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
        });

        option = {
            tooltip: {
                trigger: 'item'
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        //          	color: '#ddd',
                        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)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(	47,79,79, .1)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(128, 217, 248, 1)',
                        // shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                }
            },
            series: series
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

    }

});

三、两者进行合并（地图下钻+迁徙图）

效果：