共计 4234 个字符，预计需要花费 11 分钟才能阅读完成。
完成效果图
; “ 复制代码 ”)
var data=[{“name”:” 耒阳市 ”,”value”:762},{“name”:” 衡东县 ”,”value”:738},{“name”:” 雁峰区 ”,”value”:3891},{“name”:” 衡山县 ”,”value”:232},{“name”:” 石鼓区 ”,”value”:3240},{“name”:” 蒸湘区 ”,”value”:2512},{“name”:” 衡阳县 ”,”value”:922},{“name”:” 祁东县 ”,”value”:219},{“name”:” 珠晖区 ”,”value”:3229},{“name”:” 南岳区 ”,”value”:67},{“name”:” 衡南县 ”,”value”:739},{“name”:” 常宁市 ”,”value”:545}]; // 获取衡阳市的地图信息
function GetGeoMap() { var geoJson = null; var url = “/js/430400_full.json”;
MapChart.showLoading();
$.get(url, null, function (ret) {
geoJson \= ret;
loadMap(geoJson); // $.getJSON(uploadedDataURL, function(geoJson) {});
} // 初始化地图容器
var MapChart = echarts.init(document.getElementById(‘main’)); // 设置地图。
var loadMap = function (geoJson) {
echarts.registerMap('tianjin', geoJson);
MapChart.hideLoading(); var data = MapMarkLine; var xData = \[\]; for (var i = 0; i < data.length; i++) {xData.push(data\[i\].value);
} var geoCoordMap = {'珠晖区': \[112.626324,26.891063\], '雁峰区': \[112.612241,26.893694\], '石鼓区': \[112.607635,26.903908\], '蒸湘区': \[112.570608,26.89087\], '南岳区': \[112.734147,27.240536\], '衡阳县': \[112.379643,26.962388\], '衡南县': \[112.677459,26.739973\], '衡山县': \[112.86971,27.234808\], '衡东县': \[112.950412,27.083531\], '祁东县': \[112.111192,26.787109\], '耒阳市': \[112.847215,26.414162\], '常宁市': \[112.396821,26.406773\],
}
xData.sort(function (a, b) {return a - b;}); var min = xData\[0\], max = xData\[xData.length - 1\]; var maxSize4Pin = 100, minSize4Pin = 20; var convertData = function (data) {var res = \[\]; for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap\[data\[i\].name\]; if (geoCoord) {
res.push({name: data\[i\].name,
value: geoCoord.concat(data\[i\].value)
});
}
} return res;
}; var option = {
title: {
text: '投资人员分布',
subtext: '1,2803 人',
x: 'left',
textStyle: {
color: '#fff',
fontSize:13 },
subtextStyle: {
color: '#ff9c00',
fontSize:22 }
},
tooltip: {
trigger: 'item',
formatter: function (params) {if (typeof (params.value)\[2\] == "undefined") {return params.name + ':' + params.value;} else {return params.name + ':' + params.value\[2\];
}
}
}, // legend: {
// orient: 'vertical',
// y: 'bottom',
// x: 'right',
// data: \['credit\_pm2.5'\],
// textStyle: {
// color: '#fff'
// }
// },visualMap: {
show: true,
type: 'piecewise',
pieces: \[{ min: 2000},
{min: 1000, max: 1999,},
{min: 100, max: 999},
{max: 99}, // {min:0,max: 2000},
// {max:100}// 不指定 min，表示 min 为无限大（-Infinity）。],
showLabel: true,
right: '5%',
bottom: '10%',
text: \[''\], // 文本，默认为数值文本 textStyle: {
color: '#7B93A7' },
calculable: true,
seriesIndex: \[1\],
inRange: {color: \['#f6e294', '#FFABA6', '#FC6258', '#FA3225'\]
}
},
geo: {
show: true,
map: 'tianjin',
label: {
normal: {show: false},
emphasis: {show: false,}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#fff',
borderWidth: 2,
},
emphasis: {areaColor: '#56ddff', // 鼠标放上去的亮色 }
}
},
series: \[
{
name: 'credit\_pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {//var a = (maxSize4Pin - minSize4Pin) / (max - min);
//var b = minSize4Pin - a \* min;
//b = maxSize4Pin - a \* max;
//return a \* val\[2\] + b;
return 15;
},
label: {
normal: {formatter: '{b}',
position: 'right',
show: true },
emphasis: {show: true}
},
itemStyle: {
normal: {
color: '#FBE805',
areaColor: '#FBE805',
borderColor: '#FBE805',
},
emphasis: {areaColor: '#FBE805'}
},
},
{
type: 'map',
map: 'tianjin',
geoIndex: 0,
aspectScale: 0.75, // 长宽比
showLegendSymbol: false, // 存在 legend 时显示 label: {
normal: {show: false},
emphasis: {
show: false,
textStyle: {color: '#fff'}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {areaColor: '#2B91B7'}
},
animation: false,
data: data
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
data: convertData(data),
symbolSize: function (val) {var a = (maxSize4Pin - minSize4Pin) / (max - min); var b = minSize4Pin - a \* min;
b \= maxSize4Pin - a \* max; return a \* val\[2\] + b;// 计算并返回气泡大小 },
label: {
normal: {
show: true,
formatter: '{@\[2\]}',// 将集合中序号为 2 的显示在气泡上，默认为 1{x,y,val}textStyle: {
color: '#fff',// 文字颜色
fontSize: 9,
}
}
},
itemStyle: {
normal: {color: '#5d2bb5', // 标志颜色 }
},
zlevel: 6,
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 5)),
symbolSize: function (val) {//var a = (maxSize4Pin - minSize4Pin) / (max - min);
//var b = minSize4Pin - a \* min;
//b = maxSize4Pin - a \* max;
//return a \* val\[2\] + b;
return 15;
},
showEffectOn: 'render',
rippleEffect: {brushType: 'stroke'},
hoverAnimation: true,
label: {
normal: {formatter: '{b}',
position: 'right',
show: true }
},
itemStyle: {
normal: {
color: '#fbe903',
shadowBlur: 10,
shadowColor: '#dece00' }
},
zlevel: 1 },
\]
};
MapChart.setOption(option);
GetUserCountByAre("");}
正文完
