如何使用 ECharts 将中国地图省份合并为大区保姆级教程,GeoJSON数据合并，真实项目实践

如何使用 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的地图中的其他属性

最终效果分为两个版本：
下图是实验版本，根据不同大区上色：

下图是鼠标移入大区显示对应瑕疵种类：

以上就是省份，市区合并为一个地区的所有教程，如果对您有帮助，一键三联哟~