当前位置：首页 > article >正文

ECharts 地图合规整改，实现一个最基础的中国地图

article 2024/11/29 17:15:40

前言

早在 2019 年的时候，我们公司就使用 ECharts 的开发了许多的可视化大屏项目，其中主要用到的组件有：折线图、柱状图、饼图、坐标图、地图、线图等等，这些图表也是我们在使用 ECharts 开发大屏项目中最常使用的图表类型，因此掌握这些图表的开发技巧是必不可少的。

但是，项目近期暴露出来的一个问题，中国地图展示不合规，需要整改，避免涉及一些法务问题。如下所示：

以上的地图就是不规范的，可能不经常开发地图的不太容易察觉，因为 ECharts 的可视化社区里提供的 demo 展示基本上就是同样的效果。大部分 option 复制粘贴到自己项目中，修改一下就直接使用了，但是涉及到中国地图，我们就要注意了：需要修改为下面的效果才是正确的，必须要将将整个中国地图的领土边界范围描绘清楚！必须要将南海的领土边界描绘清楚。

原则：中国，一点都不能少

因此本篇文章的主要目的是总结项目经验，解决了中国地图展示不合规的问题，并输出一些经验，说明如何利用 ECharts 按照一套标准化的流程开发一个合规的中国地图。

ECharts 简介

ECharts 是一个基于 JavaScript 的开源可视化图表库，提供了丰富的图表类型和交互功能。其中，地图组件是 ECharts 中非常实用的一个功能，可以帮助我们快速搭建数字信息可视化页面。

其中，在这些可视化组件中，地图组件是 ECharts 的一大亮点，使得在数据可视化中展示地理信息变得简单而直观。本文将重点介绍如何利用 ECharts 地图组件展示中国地图的开发方法，包括加载地图、自定义地图样式以及添加各种数据标记等操作。

开发中国地图

为了开发中国地图展示，我们需要以下基本的步骤进行开发：

1. 获取 ECharts

在引入 ECharts 库之前，请确保你已经下载了最新版本的 ECharts，在项目中进行引入。有以下几种引入方式

从 GitHub 获取

在apache/echarts 项目的 release 页面可以找到各个版本的链接。下载后导入本地项目中即可使用。

从 npm 获取

npm install echarts

从 CDN 获取

从第三方 CDN 网站 cdnjs 进行引入

2. 获取 geoJson

为了展示中国地图，你还需要下载中国地图的 JSON 数据文件。你可以在 ECharts 的官方网站或 GitHub 上找到并下载这些文件。

特别注意：由于在之前开发地图的时候，项目中大部分 echarts 组件都是基于可视化社区 Demo 的基础上进行开发的，链接如下：

ECharts 可视化社区

其实这里的地图展示相对来说已经过时了，地图加载的 JSON 也已经过时了，大家可以进行参考但是需要慎用生产。

因此在以后的项目开发中，我们需要使用最新的 JSON 文件，那么我们需要在哪里进行获取呢？我们可以在一些其他网站获取最新的 geoJson，比如：通过阿里云 DataV 数据可视化平台也可以下载最新的 json 数据文件

如下图所示，选择数据版本后，点击页面上的下载按钮后即可以下载 json 文件

3. 创建 HTML 页面并引入 ECharts

在 HTML 页面中创建一个容器元素，用于承载地图。然后，在页面头部或 scripts 部分引入 ECharts 库的 JavaScript 文件，确保可以正常使用 ECharts 的功能。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中国地图</title>
  </head>
  <body>
    <!-- 主页面 -->
    <div id="main"></div>
    <!-- jquery 库 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
    <!-- echarts 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  </body>
</html>

4. 注册地图

在 JavaScript 中，通过 ECharts 的 setOption 方法来配置地图组件，并指定使用中国地图。示例代码如下：

// 初始化 ECharts 实例
const myChart = echarts.init(document.getElementById("main"));

echarts.registerMap("china", json);

以上代码中，我们首先初始化了一个 ECharts 实例，并指定了容器元素的 id。然后，通过 setOption 方法设置地图组件的相关配置，其中 map 属性指定了使用的地图类型为 "china"，即中国地图。

5. 设置 option

const option = {
  // 地理坐标系组件用于地图的绘制
  geo: {
    // 使用 registerMap 注册的地图名称。
    map: "china",
  },
  series: [
    {
      type: "map",
      map: "china",
    },
  ],
};
myChart.setOption(option, true);

个性化设置

ECharts 提供了丰富的配置选项，可以自定义地图的样式。你可以设置地图的颜色、边框、选中样式等，以便更好地展示地理数据。

1. 设置区域颜色

通过 itemStyle 属性设置了地图区域的颜色和边界的颜色。label 属性用于设置地图标注的字体颜色。

如下面代码所示：设置区域颜色为绿色，省份边界描边的颜色为蓝色

myChart.setOption({
  geo: {
    // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
    label: {
      show: true,
      color: "#666666",
    },
    // 地图区域的多边形 图形样式。
    itemStyle: {
      // 地图区域的颜色
      areaColor: "#71d5a1", // 绿色
      // 图形的描边颜色
      borderColor: "#2979ff", // 蓝色
    },
  },
});

2. 设置鼠标指向样式

通过 emphasis 属性设置高亮状态下的多边形和标签样式，label 属性用于设置地图标注的字体颜色

如下面代码所示：设置高亮状态下区域颜色为黄色，省份边界描边的颜色为深黄色，高亮字体为黄色

myChart.setOption({
  geo: {
    // 设置高亮状态下的多边形和标签样式
    emphasis: {
      // 设置区域样式
      itemStyle: {
        areaColor: "#ffff99", // 黄色
        borderColor: "#f29100", // 描边颜色黄色
      },
      // 设置字体
      label: {
        fontSize: 16, // 16px
        color: "#f29100", // 黄色
      },
    },
  },
});

3. 设置地图缩放及拖动支持

通过 roam 属性设置为true，来开启鼠标缩放和平移漫游。也可以设置成 scale 或者 move单独开启某一种效果。

如下面代码所示：开启鼠标缩放和平移漫游

myChart.setOption({
  // 地理坐标系组件用于地图的绘制
  geo: {
    // 是否开启鼠标缩放和平移漫游。默认不开启。
    // 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
    roam: true,
  },
});

4. 添加数据标记

在地理信息可视化中，常常需要在地图上添加数据标记，以突出显示特定的地理数据。ECharts 地图组件提供了多种方式来添加数据标记。

以下是一个简单的示例：通过定义scatter来定义点位

myChart.setOption({
  series: [
    {
      type: "map",
      map: "china",
      geoIndex: 0,
      roam: true,
    },
    {
      type: "scatter",
      coordinateSystem: "geo",
      data: [
        { name: "北京", value: [116.4074, 39.9042] },
        { name: "上海", value: [121.4737, 31.2304] },
        { name: "广州", value: [113.2644, 23.1292] },
        // 更多数据...
      ],
    },
  ],
});

通过上述代码，我们通过添加 scatter 类型的系列来实现数据标记。coordinateSystem 属性指定了使用地理坐标系进行定位。data 属性用于设置数据标记的位置，这里的数据以经纬度的形式表示。