使用echarts结合地图经纬度坐标信息实现重庆热点echarts图

HTML代码:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>重庆热点地图</title>
	<style type="text/css">
		.area-echarts{
			width: 100%;
		}
	</style>
</head>
<body>
	
    <div class="area-echarts" id="areaEcharts"></div>
    
</body>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts3.8.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

</html>
注意:此demo使用echarts版本需要3.8

JS代码:
/**
 * echarts 重庆热点地图
 * @param {Object} window
 * @param {Object} $
 */
(function(window, $){

	var myChart; // 初始化echarts图表
	var mapDataURL = "./chongqing.json"; // 定义json数据路径
    var arrayMax;
    var arrayMin = 9;
    var maxSize4Pin = 100;
    var minSize4Pin = 20;
    var districtData = []; // 区县显示数据

    // 区县中心点经纬度
    var geoCoordMap = {
        '渝中区': [106.568892,29.55275],
        '大渡口区': [106.4905, 29.4214],
        '江北区': [106.574271,29.606703],
        '沙坪坝区': [106.456878,29.541145],
        '九龙坡区': [106.510676,29.502272],
        '南岸区': [106.644428,29.500297],
        '北碚区': [106.395612,29.805108],
        '渝北区': [106.631187,29.718143],
        '巴南区': [106.540257,29.402408],
        '万州区': [108.408661,30.807667],
        '涪陵区': [107.389298,29.703113],
        '永川区': [105.927376,29.356117],
        '璧山区': [106.227305,29.592024],
        '大足区': [105.721733,29.707032],
        '綦江区': [106.651362,29.028067],
        '江津区': [106.259281,29.290069],
        '合川区': [106.27613,29.972084],
        '黔江区': [108.770678,29.53361],
        '长寿区': [107.081283,29.857996],
        '南川区': [107.099266,29.157891],
        '铜梁区': [106.056404,29.844811],
        '潼南区': [105.840556,30.191013],
        '荣昌区': [105.594623,29.405002],
        '开州区': [108.393135,31.160711],
        '梁平区': [107.769581,30.65423],
        '武隆区': [107.760025,29.325601],

        '城口县': [108.664214,31.947633],
        '丰都县': [107.730895,29.8635],
        '垫江县': [107.33339,30.327717],
        '忠县': [108.039002,30.29956],
        '云阳县': [108.697324,30.930613],
        '奉节县': [109.463987,31.018498],
        '巫山县': [109.879153,31.074834],
        '巫溪县': [109.570062,31.398604],

        '石柱土家族自治县': [108.114069,29.999285],
        '酉阳土家族苗族自治县': [108.767747,28.841244],
        '秀山土家族苗族自治县': [109.007094,28.447997],
        '彭水苗族土家族自治县': [108.165538,29.293902]
    }

	echartsHot = {

		init: function(){

            // 区县显示数据
            districtData = [
                { name: '渝中区', value: 200 },
                { name: '大渡口区', value: 190 },
                { name: '江北区', value: 185 },
                { name: '沙坪坝区', value: 180 },
                { name: '九龙坡区', value: 175 },
                { name: '南岸区', value: 160 },
                { name: '北碚区', value: 5 },
                { name: '渝北区', value: 5 },
                { name: '巴南区', value: 10 },
                { name: '万州区', value: 15 },
                { name: '涪陵区', value: 20 },
                { name: '永川区', value: 25 },
                { name: '璧山区', value: 30 },
                { name: '大足区', value: 35 },
                { name: '綦江区', value: 40 },
                { name: '江津区', value: 45 },
                { name: '合川区', value: 50 },
                { name: '黔江区', value: 55 },
                { name: '长寿区', value: 60 },
                { name: '南川区', value: 65 },
                { name: '铜梁区', value: 70 },
                { name: '潼南区', value: 75 },
                { name: '荣昌区', value: 80 },
                { name: '开州区', value: 85 },
                { name: '梁平区', value: 90 },
                { name: '武隆区', value: 95 },

                { name: '城口县', value: 100 },
                { name: '丰都县', value: 105 },
                { name: '垫江县', value: 110 },
                { name: '忠县', value: 115 },
                { name: '云阳县', value: 120 },
                { name: '奉节县', value: 125 },
                { name: '巫山县', value: 130 },
                { name: '巫溪县', value: 135 },

                { name: '石柱土家族自治县', value: 140 },
                { name: '秀山土家族苗族自治县', value: 145 },
                { name: '酉阳土家族苗族自治县', value: 150 },
                { name: '彭水苗族土家族自治县', value: 155 }
            ];

			// 图表高度
			var winHeight = $(window).height();
			$("#areaEcharts").css("height",winHeight - 100);

			// 取数据最大值
			var valArr = [];
			for(var i = 0; i < districtData.length; i++){
				valArr.push(districtData[i].value);
			}
			arrayMax = Math.max.apply(null, valArr) + 200;
			arrayMin = Math.min.apply(null, valArr);

			// 初始化图表到dom
			myChart = echarts.init(document.getElementById('areaEcharts'));

			// 显示加载动画效果
			myChart.showLoading();

		},

		// 获取json中地图经纬度数据
		getJsonData: function(){
			$.getJSON(mapDataURL, function(geoJson){

				// 注册可用地图
			    echarts.registerMap('chongqing', geoJson);

                // 隐藏加载动画效果
                myChart.hideLoading();

                // 图表初始化
                echartsHot.echartsInit();

			})
		},

		// 处理地图中心点经纬度及点数据集合
		mapPointDataInitialization: function(){
			var dataResult = [];
		    // 合并区县经纬度信息及描点数据信息到数组
	        for (var i = 0; i < districtData.length; i++) {
	            var geoCoord = geoCoordMap[districtData[i].name];
	            if (geoCoord) {
	                dataResult.push({
	                    name: districtData[i].name,
	                    value: geoCoord.concat(districtData[i].value)
	                });
	            }
	        }
	        return dataResult;
		},

		// echarts图表初始化
		echartsInit: function(){

			// 合并经纬度及地图需要的显示数据
			var echartsData = echartsHot.mapPointDataInitialization(districtData);

			var options = {

		        tooltip: {
		            trigger: 'item',
		            formatter: function(data){
                        if(typeof (data.value)[2] == "undefined"){
                            return '<font size="4">' + data.name + ' : ' + data.value + '</font>';
                        }else{
                            return '<font size="4">' + data.name + ' : ' + data.value[2] + '</font>';
                        }
		            }
		        },
		        geo: {
		            show: true,
		            map: 'chongqing',
		            label: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: false,
		                }
		            },
		            roam: true,
		            itemStyle: {
		                normal: {
		                    areaColor: '#fcf9f2',
		                    borderColor: '#ff1717'
		                },
		                emphasis: {
		                    areaColor: '#ffa35c'
		                }
		            }
		        },
		        series: [
		            {
		                type: 'scatter',
		                coordinateSystem: 'geo',
		                data: echartsData,
		                symbolSize: '5',
		                label: {
		                    normal: {
		                        formatter: '{b}',
		                        position: 'bottom',
		                        show: true,
		                        color: '#333333'
		                    },
		                    emphasis: {
		                        show: true
		                    }
		                },
		                itemStyle: {
		                    normal: {
		                        color: '#333333',
		                        opacity: '0.5'
		                    }
		                }
		            },
		            {
		                type: 'map',
		                map: 'chongqing',
		                geoIndex: 0,
		                aspectScale: 0.75,
		                showLegendSymbol: false,
		                roam: true,
		                animation: true,
		                data: districtData
		            },
		            {
		                type: 'scatter',
		                coordinateSystem: 'geo',
		                symbol: 'pin',
		                symbolSize: function (val) {
		                    var a = (maxSize4Pin - minSize4Pin) / (arrayMax - arrayMin);
		                    var b = minSize4Pin - a * arrayMin;
		                    b = maxSize4Pin - a * arrayMax;
		                    return a * val[2] + b;
		                },
		                label: {
		                    normal: {
		                        show: true,
		                        textStyle: {
		                            color: '#FFFFFF',
		                            fontSize: 10
		                        }
		                    }
		                },
		                itemStyle: {
		                    normal: {
		                        color: '#333333'
		                    }
		                },
		                zlevel: 6,
		                data: echartsData,
		            }
		        ]
		    };
		    myChart.setOption(options);
		},


	}

	$(function(){

		echartsHot.init();
		echartsHot.getJsonData(); //获取Json文本中重庆地图区划数据

	})

})(window, $)

效果截图:

下载地址:https://pan.baidu.com/s/1OmQ-O2cENx0qwFwzisjBRw
提取密码:6bj2
解压密码:www.angbike.com