如何使用 ECharts 将中国地图省份合并为大区
前言：
公司项目要求在中国地图上显示各大区的设备运行情况及其数据，echarts引入地图数据后全是一块一块的省份，但是公司要求将部分省份合并成一个战区，中国地图也就分为了西北战区，北部战区，中部战区，西南战区，东部战区，南部战区六大战区，echarts也没有这个功能只能从echarts支持的map数据入手，如何下载中国地图的json数据，进行处理自定义，将各个省份合并为一个GeoJSON格式的文件，echarts地图可直接引用GeoJson文件进行达到地图合并自定义的效果。
效果：
实现
实现步骤一：去阿里云中国地图下载“中国地图JSON”数据：
步骤二、在边界生成器中上传刚刚下载的中国地图
导入后效果：
步骤三、进行项目要求合并
选择所属省份地级市合并，以东部战区为例，选中浙江，江苏，安徽，上海三块区域
选中完成后，双击两下合并图标，对省份进行合并
合并后的结果：发现省份边界都已经合并完成
依次往下合并，将项目大区省份合并完成，并导出最终效果：
步骤四、echarts地图使用
如果你还没有安装ECharts，可以通过npm进行安装：
npm install echarts --save
接下来，我们将使用一个自定义的GeoJSON文件，该文件已经被处理以包含六个战区的信息，而不是传统的省份划分。确保你已经拥有了这个文件，并将其命名为china.js，放在项目的适 当目录下。
步骤五：初始化ECharts
mounted() {
// 模拟数据
this.regionList = [
{
name: "中部战区", value: 0 },
{
name: "西北战区", value: 999 },
{
name: "北部战区", value: 7777 },
{
name: "南部战区", value: 100000 },
{
name: "西南战区", value: 20000 },
{
name: "东部战区", value: 100000001 },
];
// 初始化
this.drawLine(this.regionList);
}
drawLine方法：
drawLine(regionList) {
this.myChart = this.$echarts.init(
document.querySelector(`#echart_china`)
);
this.myChart.setOption({
legend: {
show: false, // 将 show 设为 false 即可隐藏图例
},
title: {
text: "",
subtext: "",
x: "center",
textStyle: {
color: "#fff",
},
},
tooltip: {
show: false, // 禁用提示框
trigger: "item",
},
visualMap: {
bottom: "10%",
type: "piecewise",
splitNumber: 5,
max: 50000,
text: [],
showLabel: false,
pieces: [
{
min: 1000000,
max: 9999999999,
color: "#11242f",
},
{
min: 100000,
max: 99999999,
color: "#11242f",
},
{
min: 10000, max: 99999, color: "#11242f" },
{
min: 1000, max: 9999, color: "#11242f" },
{
min: 1, max: 999, color: "#11242f" },
{
min: 0, max: 0, color: "#11242f" },
],
textStyle: {
color: "rgb(135,139,153)",
fontSize: this.FontChart(1.5),
},
seriesIndex: 0,
},
selectedMode: false, // 开启选中模式
select: {
// 地图选中区域样式
label: {
// 选中区域的label(文字)样式
show: true,
color: "#fff",
},
itemStyle: {
// 选中区域的默认样式
areaColor: "#11242F",
borderColor: "#FFFF00", // 鼠标悬停时的边界颜色
borderWidth: 3, // 鼠标悬浮时的边界宽度
},
},
series: [
{
name: "调用量",
type: "map",
map: "china", // 使用自定义的战区地图
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: "#fff",
},
},
emphasis: {
show: true,
textStyle: {
color: "#fff",
},
},
select: {
show: true,
textStyle: {
color: "#fff",
},
},
},
data: regionList.map((item) => ({
name: item.name,
value: item.value,
})),
itemStyle: {
normal: {
areaColor: "#48D5F4",
borderColor: "#48D5F4", // 战区边界颜色
borderWidth: 2, // 战区边界宽度
},
emphasis: {
// 11242F
// rgb(1, 162, 235)
areaColor: "#11242F", // 鼠标悬停时的区域颜色
borderColor: "#FFFF00", // 鼠标悬停时的边界颜色
borderWidth: 3, // 鼠标悬浮时的边界宽度
},
},
},
],
geo: {
map: "china", // 使用自定义的战区地图
itemStyle: {
areaColor: "#FFF", // 设置地图背景颜色
borderColor: "#48D5F4", // 设置地图外部边界颜色
borderWidth: 4, // 设置地图外部边界宽度
shadowBlur: 10, // 阴影模糊度，数值越大，阴影范围越大
shadowColor: "#48D5F4", // 阴影颜色，设置为与边框颜色相同以达到发光效果
shadowOffsetX: 0, // 水平方向阴影偏移量
shadowOffsetY: 0, // 垂直方向阴影偏移量
},
},
});
},
步骤六、配置echarts可支持的china.js文件
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['exports', 'echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
factory(exports, require('echarts'));
} else {
factory({
}, require('echarts'));
}
}(this, function (exports, echarts) {
var log = function (msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg);
}
}
if (!echarts) {
log('ECharts is not Loaded');
return;
}
if (!echarts.registerMap) {
log('ECharts Map is not loaded');
return;
}
echarts.registerMap('china', 复制刚刚导入的GeoJson文件的代码);
}));
其中复制从阿里地图上导出的GeoJson文件，复制里面的数据放入china.js的下图红色框框中。
所有china.js文件如下：
echarts中使用自定义的战区地图
echarts的地图中的其他属性
最终效果分为两个版本：
下图是实验版本，根据不同大区上色：
下图是鼠标移入大区显示对应瑕疵种类：
以上就是省份，市区合并为一个地区的所有教程，如果对您有帮助，一键三联哟~