效果截图：
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