基於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();
        });

    }

});

三、兩者進行合併（地圖下鑽+遷徙圖）

效果：