案例

掌握ECharts地图图表：50个实用案例，轻松制作数据可视化地图

2026-11-05 0 阅读

在数据可视化领域，地图图表是一种非常直观且强大的工具，它可以帮助我们更好地理解地理分布和空间关系。ECharts作为一款功能丰富的图表库，提供了强大的地图图表绘制能力。本文将为您提供50个实用案例，帮助您轻松掌握ECharts地图图表的制作技巧。

案例一：世界人口分布地图

1.1 案例描述

通过ECharts绘制世界人口分布地图，展示各国的人口数量。

1.2 实现步骤

  1. 准备世界地图数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'world'。
  4. 添加series对象，设置type为'map'，并传入地图数据和配置项。

1.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'world',
        data: [
            {name: '中国', value: 1409517397},
            {name: '印度', value: 1339180127},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

案例二：中国省份GDP地图

2.1 案例描述

展示中国各省份的GDP数据，通过颜色深浅表示数值大小。

2.2 实现步骤

  1. 准备中国省份地图数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'china'。
  4. 添加series对象，设置type为'map'，并传入地图数据和配置项。

2.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 3447},
            {name: '天津', value: 1931},
            // ... 其他省份数据
        ]
    }]
};

myChart.setOption(option);

案例三：城市交通流量地图

3.1 案例描述

展示城市交通流量数据，通过线条的粗细表示流量大小。

3.2 实现步骤

  1. 准备城市交通流量数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'china'。
  4. 添加series对象，设置type为'lines'，并传入数据。

3.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'lines',
        coordinateSystem: 'geo',
        data: [
            {source: '北京', target: '上海', value: 100},
            {source: '北京', target: '广州', value: 150},
            // ... 其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例四：全球疫情地图

4.1 案例描述

展示全球疫情数据，通过散点图表示疫情严重程度。

4.2 实现步骤

  1. 准备全球疫情数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'world'。
  4. 添加series对象，设置type为'scatter'，并传入数据。

4.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [
            {name: '美国', value: [100, 40]},
            {name: '意大利', value: [80, 50]},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

案例五：中国城市人口密度地图

5.1 案例描述

展示中国各城市的人口密度数据，通过颜色深浅表示数值大小。

5.2 实现步骤

  1. 准备中国城市人口密度数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'china'。
  4. 添加series对象，设置type为'map'，并传入数据。

5.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 1409517397},
            {name: '上海', value: 242568000},
            // ... 其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例六：全球GDP排名地图

6.1 案例描述

展示全球GDP排名数据，通过气泡大小表示GDP数值大小。

6.2 实现步骤

  1. 准备全球GDP排名数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'world'。
  4. 添加series对象，设置type为'effectScatter'，并传入数据。

6.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: [
            {name: '美国', value: [100, 40, 2000000000]},
            {name: '中国', value: [120, 50, 1000000000]},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

案例七：中国城市空气质量地图

7.1 案例描述

展示中国各城市空气质量指数数据，通过颜色深浅表示数值大小。

7.2 实现步骤

  1. 准备中国城市空气质量指数数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'china'。
  4. 添加series对象，设置type为'map'，并传入数据。

7.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 80},
            // ... 其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例八：全球地震分布地图

8.1 案例描述

展示全球地震分布数据，通过散点图表示地震发生位置。

8.2 实现步骤

  1. 准备全球地震数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'world'。
  4. 添加series对象，设置type为'scatter'，并传入数据。

8.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [
            {name: '美国', value: [100, 40]},
            {name: '日本', value: [140, 50]},
            // ... 其他地震数据
        ]
    }]
};

myChart.setOption(option);

案例九：中国城市降水量地图

9.1 案例描述

展示中国各城市降水量数据，通过颜色深浅表示数值大小。

9.2 实现步骤

  1. 准备中国城市降水量数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'china'。
  4. 添加series对象，设置type为'map'，并传入数据。

9.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 80},
            // ... 其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例十：全球森林覆盖率地图

10.1 案例描述

展示全球森林覆盖率数据，通过颜色深浅表示数值大小。

10.2 实现步骤

  1. 准备全球森林覆盖率数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'world'。
  4. 添加series对象，设置type为'map'，并传入数据。

10.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'map',
        mapType: 'world',
        data: [
            {name: '美国', value: 30},
            {name: '加拿大', value: 40},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

案例十一：中国城市人口密度热力图

11.1 案例描述

展示中国各城市人口密度数据，通过热力图表示数值大小。

11.2 实现步骤

  1. 准备中国城市人口密度数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'china'。
  4. 添加series对象，设置type为'heatmap'，并传入数据。

11.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 1409517397]},
            {name: '上海', value: [121.47, 31.23, 242568000]},
            // ... 其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例十二：全球人口密度热力图

12.1 案例描述

展示全球人口密度数据，通过热力图表示数值大小。

12.2 实现步骤

  1. 准备全球人口密度数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'world'。
  4. 添加series对象，设置type为'heatmap'，并传入数据。

12.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '美国', value: [100, 40, 2000000000]},
            {name: '中国', value: [120, 50, 1000000000]},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

案例十三：中国城市空气质量热力图

13.1 案例描述

展示中国各城市空气质量指数数据，通过热力图表示数值大小。

13.2 实现步骤

  1. 准备中国城市空气质量指数数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'china'。
  4. 添加series对象，设置type为'heatmap'，并传入数据。

13.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 100]},
            {name: '上海', value: [121.47, 31.23, 80]},
            // ... 其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例十四：全球地震热力图

14.1 案例描述

展示全球地震分布数据，通过热力图表示地震发生位置。

14.2 实现步骤

  1. 准备全球地震数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'world'。
  4. 添加series对象，设置type为'heatmap'，并传入数据。

14.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '美国', value: [100, 40]},
            {name: '日本', value: [140, 50]},
            // ... 其他地震数据
        ]
    }]
};

myChart.setOption(option);

案例十五：中国城市降水量热力图

15.1 案例描述

展示中国各城市降水量数据，通过热力图表示数值大小。

15.2 实现步骤

  1. 准备中国城市降水量数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'china'。
  4. 添加series对象，设置type为'heatmap'，并传入数据。

15.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 100]},
            {name: '上海', value: [121.47, 31.23, 80]},
            // ... 其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例十六：全球森林覆盖率热力图

16.1 案例描述

展示全球森林覆盖率数据，通过热力图表示数值大小。

16.2 实现步骤

  1. 准备全球森林覆盖率数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'world'。
  4. 添加series对象，设置type为'heatmap'，并传入数据。

16.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '美国', value: [100, 40, 30]},
            {name: '加拿大', value: [140, 50, 40]},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

案例十七：中国城市人口密度散点图

17.1 案例描述

展示中国各城市人口密度数据，通过散点图表示数值大小。

17.2 实现步骤

  1. 准备中国城市人口密度数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'china'。
  4. 添加series对象，设置type为'scatter'，并传入数据。

17.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 1409517397]},
            {name: '上海', value: [121.47, 31.23, 242568000]},
            // ... 其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例十八：全球人口密度散点图

18.1 案例描述

展示全球人口密度数据，通过散点图表示数值大小。

18.2 实现步骤

  1. 准备全球人口密度数据。
  2. 使用ECharts的echarts对象创建地图图表。
  3. 设置地图的mapType为'world'。
  4. 添加series对象，设置type为'scatter'，并传入数据。

18.3 代码示例

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [
            {name: '美国', value: [100, 40, 2000000000]},
            {name: '中国', value: [120, 50, 1000000000]},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

案例十九：中国城市空气质量散点图

19.1 案例描述

展示中国各城市空气质量指数数据，通过散点图表示数值大小。

19.2 实现步骤

  1. 准备中国城市空气质量指数数据。 2.
分享到：
上一篇 揭秘 TensorFlow 在智能交通领域的神奇应用，让你轻松驾驭未来出行
下一篇 揭秘：小公司如何用MongoDB轻松驾驭海量数据，实现高效业务增长

相关文章

揭秘 TensorFlow 在智能交通领域的神奇应用，让你轻松驾驭未来出行
2026-11-05
出口商品如何计算税费？解析国际贸易出口计算关键步骤
2026-11-05
揭秘：小公司如何用MongoDB轻松驾驭海量数据，实现高效业务增长
2026-11-05
Java 8革新特性：实战案例解析，轻松上手高效编程
2026-11-05