echarts景点分布及购票人数展示
注意：需要在服务端预览，加载外部json数据文件，本地预览会有跨域问题！<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>襄阳市景点分布及购票人数</title>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
<div style="position: relative; margin: auto; text-align: center; width: 100%; height: 600px;">
<div id="backMap" style="text-align: right; position: absolute; top: 30px; right: 14px; z-index: 1;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAAAkCAYAAAATvM09AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAOoSURBVGiB7Zq/b9NAFMc/D/kfANFIDLAi1VERW9XwowvMpENTiaEMnWBt1iC6pitlYYCNZKDMdAmlibpS2ZFYy1Apkdr/gGOwz1xcx7Frp5TInymxL8+X771793z3hJQope4CT4BFYB64DdwArqW1dUX5DZwBx0AfOAT2RORnGiOStKFSah3YAB6kecAMcQC8F5GPSRpPFFYp9Qx4Ayxk7NiscAS8FpEvcY1ihVVKvQVe5tmrGWJHRF6NuxkprFLqFvAJeDStXs0I+8CaiJyEb5wT1hf1K1C+hI7NAg7wNCxulLDfKDw1Lfsi8ti8MJIi+TG1EDU9j5RSO+aFwGP91X/30rs0W1R1tmAK+4MipcrKkYjcAz8U+Ml/IWp2Fnwtgxi7MY2ndAcO1U5jGqavMhsAlv/un/tratNt0XRbeZsdS3fgBJ8rpXLk9SSYv70gD5RSdy28DZVcqXYaqf9QHHqA6nYt+N4busBf4bQgm/OrI7/d7rcT96VSKuchLMATC2+XKhfGTf3uwKE3dANh0lK3a1Q7DZpuK7CxNGcntre7vDVRsO7AYbvfvlD/Ili08Lb+MhM39bXYpuelFTnsib2hG+mJOXlcVuYt4E4WC3qk00x9PQhpBI4SLOxh3YETazMqRFVKZXaXtxL2PDG3LeB6FgvjPCcJ4dg5qd3SnE2lVKY3dFmas4PvmlJ7ZaItMyzkPP1NbmTe9b/ItDZpuq3YgdH3ekM3WLA02/12ILoZf68C14DTrEbqdi12gZi02sZ5TaVUpm7XWJqzg2t6yuspXO00Mi2OU+DMAn4BN7Na0uJFLWJmDNMZgtmmO3DoDpxEC0/W3Hi7357W9Dc5tvAOzO7nZdHMNaPQA1C3ayOD0Bu6iYTVnmnGx93lLZpui1J7JXbmhDOLKdK38E4hn+dpVcfdSW9fUQl/HHrR0rY351cDEZOEgUtMxQ4tYG9a1pP82Ukerl86dJwNtwsvfHqATBEvafqb7AmAUuo7//hYu9ReYbD6+dz1qLc2U1zT0/UCZ7atdhpBahaHzjpyyGkPROShFnYd+JDVYhaSLl7/AS9E5GOx0Z0voxvdPq//UWdmiUDDQFj/rGYnsnlBEnbM6pji+Dsf4o+/fdbwihAKkuHgaTbCOWH9io6neOUzBfHsE1EFA2NqWkXkxHftIuaO552IPI4SFSYUC/vVdFW80sUCjyO8wozYKsyi8Dg5+RYeh4kolb+DdwoxS6Xyp3jbqRculf8DylqoRdWvEWcAAAAASUVORK5CYII="
style="cursor: pointer;">
</div>
<div id="echart" style="width: 100%; height: 95%; margin: auto;">
</div>
<h3>双击进入下一级，单击呈现选中状态</h3>
</div>
<div style="text-align: center; margin-top: 50px;;">
<h3>下载地图数据：<a
href="http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.316551722910077&lng=106.68898666525287&zoom=3.5">http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.316551722910077&lng=106.68898666525287&zoom=3.5</a>
</h3>
<img src="https://www.jq22.com/demo/echartsMpzs202311202306/img/地图数据.png">
</div>
<script>
$(document).ready(function () {
var mapStack = [];// 保存历史地图
var curMap = {};// 保存当前地图
var mapData = {};
//
function initOption(mapName) { // 地图名称
return {
legend: {
show: false
},
tooltip: {
// 默认显示在右边
position: "right",
// 自定义标签内容
formatter: function (params) {
return [
'【' + params.name + '】',
'合计 ' + params.data.detail + ' 人',
'线上 ' + params.data.detail + ' 人',
'线下 ' + params.data.detail + ' 人'
].join('<br>');
}
},
geo: {
map: mapName,
roam: true,
aspectScale: 1,
scaleLimit: {
min: 1,
max: 3
},
selectedMode: "single",
zoom: 1.2,
size: ['100%', '100%'],
label: {
// 默认显示效果
normal: {
show: true,
color: "black",
fontStyle: "normal",
fontSize: '14px'
}
},
itemStyle: {
normal: {
areaColor: "white",// 区域的颜色
borderColor: "black",// 边界的颜色
borderWidth: 2,// 边界的粗细
opacity: 1// 透明度
},
emphasis: {
areaColor: "#16a951",// 悬浮时区域的颜色
borderWidth: 2, // 悬浮时边界的粗细
opacity: 1// 透明度
}
}
},
series: [
{
name: '',
type: 'scatter',
coordinateSystem: 'geo',
color: ['#FBA417'],// 点的颜色
roam: false,
label: {
normal: {
show: true,// 显示 value 的内容
position: "top",// 默认显示在上边
formatter: function (params) {
return params.name;
}
},
emphasis: {
show: false// 悬浮式显示坐标
}
},
data: [
{ 'name': 'A', 'value': , 'detail': },
{ 'name': 'B', 'value': , 'detail': },
{ 'name': 'C', 'value': , 'detail': },
{ 'name': 'D', 'value': , 'detail': },
{ 'name': 'E', 'value': , 'detail': },
{ 'name': 'F', 'value': , 'detail': },
{ 'name': 'G', 'value': , 'detail': },
{ 'name': 'H', 'value': , 'detail': },
{ 'name': 'I', 'value': , 'detail': },
{ 'name': 'J', 'value': , 'detail': },
{ 'name': 'K', 'value': , 'detail': },
{ 'name': 'L', 'value': , 'detail': },
{ 'name': 'M', 'value': , 'detail': },
{ 'name': 'N', 'value': , 'detail': },
{ 'name': 'O', 'value': , 'detail': },
{ 'name': 'P', 'value': , 'detail': },
{ 'name': 'Q', 'value': , 'detail': },
{ 'name': 'R', 'value': , 'detail': },
{ 'name': 'S', 'value': , 'detail': },
{ 'name': 'T', 'value': , 'detail': },
{ 'name': 'U', 'value': , 'detail': },
{ 'name': 'V', 'value': , 'detail': },
{ 'name': 'W', 'value': , 'detail': },
{ 'name': 'X', 'value': , 'detail': },
{ 'name': 'Y', 'value': , 'detail': },
{ 'name': 'Z', 'value': , 'detail': }
]
}
]
}
}
// 定义地图 echarts
var myChart = echarts.init($("#echart"));
// 默认展示的地图（可根据具体的业务信息展示默认区域的地图）
loadMap(420600, '襄阳市');
// 加载地图数据
function loadMap(mapCode, mapName) { // 区域编码，区域名称
$.ajax({
type: "get",
url: './json/' + mapCode + '.json',
dataType: "text",
success: function (data) {
if (data) {
var _data = JSON.parse(data);
mapData = {};
for (var i = 0; i < _data.features.length; i++) {
var _name = _data.features.properties.name;
var obj = {};
obj = {
mapName: _name,
mapCode: _data.features.properties.adcode,
center: _data.features.properties.center
}
mapData = { ...mapData, ...obj };
}
//存储当前地图的信息
curMap = {
mapCode: mapCode,
mapName: mapName
};
echarts.registerMap(mapName, _data);
var option = initOption(mapName);
myChart.clear();
myChart.setOption(option);
} else {
return;
}
}, error: function () {
alert('未能加载该区域的地图！');
}
});
}
// 监听地图绑定单击事件
myChart.on("click", function (params) { });
// 监听地图绑定双击事件（双击进入地图下一级）
myChart.on("dblclick", function (params) {
// 地图只展示省市区三级，再往下点击将不再展示更详细的地图
if (mapStack.length >= 2) return;
var item = mapData;
loadMap(item.mapCode, params.name);
mapStack.push({
mapCode: curMap.mapCode,
mapName: curMap.mapName
});
})
// 返回上一级地图
$('#backMap').onclick = function () {
var map = mapStack.pop();
if (!map) return;
loadMap(map.mapCode, map.mapName);
}
});
</script>
</body>
</html>
页:
[1]