最近接到一个小需求，领导让做一个地图分区，无论是七大区也好，六，五大区，其实逻辑都一样，都是基于echarts合并大区里省份，将合并后的省份信息作为源数据传入option，好了废话不多说，直接开始
由于目前只写了jquery版本的，所以其它版本的如vue、react的，如果有需要，我可以帮忙整理；
就不分享源码了，都在链接里面了，可以自行查看：https://jianghaifei.top/map2/map.html
个人服务器访问速度有点慢，多等一会，如果地址失效，可以直接私信我
分区.png
<!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>echarts地图合并-生成中国大区</title>
</head>
<body>
<div class="echarts-map">
<div class="echarts-map-box" id="echartsMapBox" style="width: 1000px;height:700px;border:1px solid #ccc;"></div>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./echarts.min.js"></script>
<script type="text/javascript" src="./china.js"></script>
<script type="text/javascript">
$(document).ready(function () {
repRegionStrategy();
})
var mergeProvinces = function (chinaJson, names, properties) {//合并大区里省份的coordinates
var features = chinaJson.features;
var polygons = [];
var polygons2 = [];
for (var i = 0; i < names.length; i++) {
var polygonsCoordinates = [];
var polygonsEncodeOffsets = [];
for (var z = 0; z < names[i].length; z++) {
for (var j = 0; j < features.length; j++) {
if (features[j].properties.name == names[i][z]) {
if (features[j].geometry.coordinates[0].constructor == String) {//合并coordinates
for (var l = 0; l < features[j].geometry.coordinates.length; l++) {
polygonsCoordinates.push(features[j].geometry.coordinates[l]);
}
} else if (features[j].geometry.coordinates[0].constructor == Array) {
for (var k = 0; k < features[j].geometry.coordinates.length; k++) {
for (var d = 0; d < features[j].geometry.coordinates[k].length; d++) {
polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);
}
}
}
if (features[j].geometry.encodeOffsets[0].constructor == String) {//合并encodeOffsets
polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets);
} else if (features[j].geometry.encodeOffsets[0].constructor == Array) {
for (var k = 0; k < features[j].geometry.encodeOffsets.length; k++) {
if (features[j].geometry.encodeOffsets[k][0].constructor == Array) {
for (var e = 0; e < features[j].geometry.encodeOffsets[k].length; e++) {
polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k][e]);
}
} else {
polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k]);
}
}
}
break;
}
}
}
polygons.push(polygonsCoordinates);
polygons2.push(polygonsEncodeOffsets);
}
// 构建新的合并区域
var features = [];
for (var a = 0; a < names.length; a++) {
var feature = {
id: features.length.toString(),
type: "FeatureCollection",
geometry: {
type: "Polygon",
coordinates: polygons[a],
encodeOffsets: polygons2[a]
},
properties: {
name: properties.name[a] || "",
childNum: polygons[a].length
},
temStyle: { normal: { areaColor: 'red', label: { show: false } } }
};
if (properties.cp[a]) {
feature.properties.cp = properties.cp[a];
}
// 将新的合并区域添加到地图中
features.push(feature);
}
chinaJson.features = features;
};
function repRegionStrategy() {
$.get('./china.json', function (chinaJson) {
var params = {
names: [//把各个大区的省份用二维数组分开
['北京', '天津', '河北', '山西', '山东', "河南"],
["黑龙江", "吉林", "辽宁", '内蒙古'],
['江苏', '安徽', '浙江', '福建', '上海', '台湾'],
[],
['广东', '广西', '湖南', '湖北', '江西', '海南', '香港', '澳门'],
['重庆', '四川', '云南', '西藏', '贵州'],
['陕西', '甘肃', '青海', '宁夏', '新疆']
],
properties: {//自定义大区的名字，要和上面的大区省份一一对应
name: ['华北区', '东北区', '华东区', '', '中南区', '西南区', '西北区'],
cp: [//经纬度可以自己随意定义
[115.24, 37.04],
[120.32, 44.50],
[121.28, 30.13],
[114.20, 30.32],
[113.00, 24.08],
[104.04, 29.39],
[96.49, 37.03]
]
}
};
// 如果时候五大区，您就修改上面的数据，不能山删掉，可以空着
mergeProvinces(chinaJson, params.names, params.properties);
console.log(chinaJson)
echarts.registerMap('china', chinaJson); // 注册地图
var pRChart = echarts.init(document.getElementById('echartsMapBox'));
var data = [//地图数据
{
"name": "东北区",
"value": 3685,
"color": "#90ca88"
},
{
"name": "华北区",
"value": 7342,
"color": "#f09b7a"
},
{
"name": "华南",
"value": 21416,
"color": "yellow"
},
{
"name": "华东区",
"value": 25314,
"color": "#7ab8e2"
},
{
"name": "中南区",
"value": 2500,
"color": "#f1bd4c"
},
{
"name": "西南区",
"value": 10427,
"color": "#c1e2cf"
},
{
"name": "西北区",
"value": 2440,
"color": "#edb365"
},
{
"name": "南海诸岛",
"value": 2440,
"color": "#f1bd4c"
}
];
var customSettings = [];
data.forEach(function (item, index) {
customSettings.push({
name: item.name,
itemStyle: {
normal: {
areaColor: item.color,
color: item.color,
},
}
})
})
option = {
tooltip: {
show: false,// 是否显示提示
formatter: function (params, ticket, callback) {
return params.seriesName + '<br />' + params.name + '：' + params.value
}//数据格式化
},
geo: {
map: 'china',
zoom: 1,//视角缩放比例
center: [108.5525, 34.3227],
label: {
normal: {
show: true,
fontSize: '10',
color: 'rgba(0,0,0,0.7)',// 大区文本颜色
fontSize: '20',
}
},
itemStyle: {
normal: {
borderWidth: 2,
borderColor: 'rgba(0, 0, 0, 0.1)'// 边界框线颜色
},
emphasis: {
areaColor: '',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 10,
borderWidth: 0,
borderColor: 'rgba(0, 0, 0, 0)',
shadowColor: ''
}
},
regions: customSettings // 设置大区单独的样式。
},
series: [
{
name: '',
type: 'map',
geoIndex: 0,
data: data
}
]
};
pRChart.setOption(option, true);
pRChart.on('mouseover', function (params) {// 监听被划过状态
// console.log(params)
});
setTimeout(function () {
pRChart.dispatchAction({// 测试js设置某个模块高亮，被选中状态
type: 'highlight',
// 可选，系列 index，可以是一个数组指定多个系列
// seriesIndex: 0,
// 可选，系列名称，可以是一个数组指定多个系列
// seriesName: string|Array,
// 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
// dataIndex: number,
// 可选，数据名称，在有 dataIndex 的时候忽略
name: '东北区'
});
}, 3000)
setTimeout(function () {
console.log("22222");
pRChart.dispatchAction({
type: 'downplay',
// 可选，系列 index，可以是一个数组指定多个系列
// seriesIndex: 0,
// 可选，系列名称，可以是一个数组指定多个系列
// seriesName: string|Array,
// 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
// dataIndex: number,
// 可选，数据名称，在有 dataIndex 的时候忽略
name: '东北区'
});
}, 6000)
});
}
</script>
</div>
</body>
</html>
根据业务需求，我的各大区都是自定义颜色，如果需要设置能动态颜色，根据数值来自动设置各区块颜色，我也处理过，私信就行了
jquery的json文件加载是需要一个服务器环境的，代码下载后可以直接放在您的服务器上访问，或者利用IDEA、webstorm打开，或用vscode安装live-serve插件进行本地打开；
书山有路勤为径，努力吧；
网友评论