新手必看！用echarts轻松制作地图图表，10个实用案例解析，一学就会！

地图图表是一种直观展示地理分布和空间关系的图表类型，它能够帮助人们更好地理解数据与地理位置之间的关系。ECharts 是一款使用 JavaScript 实现的开源可视化库，它支持丰富的图表类型，其中就包括了地图图表。本文将为您介绍如何使用 ECharts 制作地图图表，并提供 10 个实用案例，让您快速上手。

一、ECharts 地图图表的基本使用

1.1 引入 ECharts 库

首先，您需要在 HTML 文件中引入 ECharts 库。可以通过以下方式引入：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

1.2 准备地图数据

地图数据通常包含地理坐标和对应的数据信息。ECharts 提供了多种地图数据格式，如 JSON、GeoJSON 等。以下是一个简单的地图数据示例：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "北京",
        "value": 100
      },
      "geometry": {
        "type": "Point",
        "coordinates": [116.46, 39.92]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "上海",
        "value": 200
      },
      "geometry": {
        "type": "Point",
        "coordinates": [121.47, 31.23]
      }
    }
  ]
}

1.3 创建地图图表

在 HTML 中创建一个用于渲染地图图表的容器，并设置地图图表的配置项：

<div id="mapChart" style="width: 600px;height:400px;"></div>
<script>
  var myChart = echarts.init(document.getElementById('mapChart'));

  var option = {
    title: {
      text: '地图图表示例'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '地图',
        type: 'map',
        mapType: 'china', // 设置地图类型为'china'，表示中国地图
        data: [
          {name: '北京', value: 100},
          {name: '上海', value: 200}
        ]
      }
    ]
  };

  myChart.setOption(option);
</script>

二、10个实用案例解析

2.1 案例一：展示全球国家GDP分布

2.1.1 数据准备

首先，我们需要准备全球国家的 GDP 数据，并将其转换为 ECharts 所需的格式。

2.1.2 配置项设置

接下来，根据数据格式和需求，设置地图图表的配置项。

var option = {
  title: {
    text: '全球国家GDP分布'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: 'GDP分布',
      type: 'map',
      mapType: 'world',
      data: data
    }
  ]
};

2.2 案例二：展示中国各省人口密度

2.2.1 数据准备

准备中国各省的人口密度数据，并将其转换为 ECharts 所需的格式。

2.2.2 配置项设置

根据数据格式和需求，设置地图图表的配置项。

var option = {
  title: {
    text: '中国各省人口密度'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '人口密度',
      type: 'map',
      mapType: 'china',
      data: data
    }
  ]
};

2.3 案例三：展示城市交通拥堵情况

2.3.1 数据准备

准备城市交通拥堵情况的数据，并将其转换为 ECharts 所需的格式。

2.3.2 配置项设置

根据数据格式和需求，设置地图图表的配置项。

var option = {
  title: {
    text: '城市交通拥堵情况'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '拥堵情况',
      type: 'map',
      mapType: 'china',
      data: data
    }
  ]
};

2.4 案例四：展示全球疫苗接种情况

2.4.1 数据准备

准备全球疫苗接种情况的数据，并将其转换为 ECharts 所需的格式。

2.4.2 配置项设置

根据数据格式和需求，设置地图图表的配置项。

var option = {
  title: {
    text: '全球疫苗接种情况'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '疫苗接种情况',
      type: 'map',
      mapType: 'world',
      data: data
    }
  ]
};

2.5 案例五：展示全球疫情感染情况

2.5.1 数据准备

准备全球疫情感染情况的数据，并将其转换为 ECharts 所需的格式。

2.5.2 配置项设置

根据数据格式和需求，设置地图图表的配置项。

var option = {
  title: {
    text: '全球疫情感染情况'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '感染情况',
      type: 'map',
      mapType: 'world',
      data: data
    }
  ]
};

2.6 案例六：展示中国城市经济实力排名

2.6.1 数据准备

准备中国城市经济实力排名的数据，并将其转换为 ECharts 所需的格式。

2.6.2 配置项设置

根据数据格式和需求，设置地图图表的配置项。

var option = {
  title: {
    text: '中国城市经济实力排名'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '经济实力',
      type: 'map',
      mapType: 'china',
      data: data
    }
  ]
};

2.7 案例七：展示中国城市创新能力排名

2.7.1 数据准备

准备中国城市创新能力排名的数据，并将其转换为 ECharts 所需的格式。

2.7.2 配置项设置

根据数据格式和需求，设置地图图表的配置项。

var option = {
  title: {
    text: '中国城市创新能力排名'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '创新能力',
      type: 'map',
      mapType: 'china',
      data: data
    }
  ]
};

2.8 案例八：展示中国城市人口密度分布

2.8.1 数据准备

准备中国城市人口密度分布的数据，并将其转换为 ECharts 所需的格式。

2.8.2 配置项设置

根据数据格式和需求，设置地图图表的配置项。

var option = {
  title: {
    text: '中国城市人口密度分布'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '人口密度',
      type: 'map',
      mapType: 'china',
      data: data
    }
  ]
};

2.9 案例九：展示中国城市绿化覆盖率

2.9.1 数据准备

准备中国城市绿化覆盖率的数据，并将其转换为 ECharts 所需的格式。

2.9.2 配置项设置

根据数据格式和需求，设置地图图表的配置项。

var option = {
  title: {
    text: '中国城市绿化覆盖率'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '绿化覆盖率',
      type: 'map',
      mapType: 'china',
      data: data
    }
  ]
};

2.10 案例十：展示中国城市空气质量指数

2.10.1 数据准备

准备中国城市空气质量指数的数据，并将其转换为 ECharts 所需的格式。

2.10.2 配置项设置

根据数据格式和需求，设置地图图表的配置项。

var option = {
  title: {
    text: '中国城市空气质量指数'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '空气质量指数',
      type: 'map',
      mapType: 'china',
      data: data
    }
  ]
};

通过以上 10 个实用案例，您已经可以熟练使用 ECharts 制作地图图表了。在实际应用中，可以根据需求调整地图类型、数据格式、配置项等，以展示出更加丰富的地图图表。祝您在使用 ECharts 制作地图图表的过程中一切顺利！