案例

掌握echarts地图图表，轻松实现地理数据可视化：5个实用案例详解

2026-08-25 0 阅读

在当今大数据时代，地理数据可视化已经成为数据分析的重要组成部分。ECharts 作为一款强大的可视化库，能够帮助我们轻松实现地理数据的可视化。下面，我将通过5个实用案例，详细介绍如何使用 ECharts 地图图表进行地理数据可视化。

案例一：全球疫情分布图

1.1 案例背景

随着新冠疫情的全球蔓延，了解疫情在不同国家和地区的分布情况变得尤为重要。本案例将展示如何使用 ECharts 地图图表展示全球疫情分布。

1.2 实现步骤

  1. 数据准备：获取全球疫情数据，包括确诊病例、治愈病例、死亡病例等。
  2. 地图配置：使用 ECharts 地图图表，配置地图样式、颜色等。
  3. 数据绑定：将疫情数据与地图进行绑定，实现疫情分布的动态展示。

1.3 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球疫情分布图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['确诊病例', '治愈病例', '死亡病例']
    },
    series: [
        {
            name: '全球疫情分布',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '确诊病例'},
                {value: 310, name: '治愈病例'},
                {value: 234, name: '死亡病例'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例二：中国城市人口密度分布图

2.1 案例背景

了解中国城市人口密度分布情况，有助于我们更好地规划城市发展。本案例将展示如何使用 ECharts 地图图表展示中国城市人口密度分布。

2.2 实现步骤

  1. 数据准备：获取中国城市人口密度数据。
  2. 地图配置：使用 ECharts 地图图表，配置地图样式、颜色等。
  3. 数据绑定：将人口密度数据与地图进行绑定，实现人口密度分布的动态展示。

2.3 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市人口密度分布图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} 人/km²'
    },
    visualMap: {
        min: 100,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '中国城市人口密度',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 1000},
                {name: '上海', value: 800},
                {name: '广州', value: 500},
                // ... 其他城市数据
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例三：全球 GDP 分布图

3.1 案例背景

了解全球 GDP 分布情况，有助于我们更好地把握全球经济格局。本案例将展示如何使用 ECharts 地图图表展示全球 GDP 分布。

3.2 实现步骤

  1. 数据准备：获取全球 GDP 数据。
  2. 地图配置：使用 ECharts 地图图表，配置地图样式、颜色等。
  3. 数据绑定：将 GDP 数据与地图进行绑定，实现 GDP 分布的动态展示。

3.3 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球 GDP 分布图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} 亿美元'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '全球 GDP 分布',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '美国', value: 20000},
                {name: '中国', value: 10000},
                {name: '日本', value: 5000},
                // ... 其他国家数据
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例四：中国城市空气质量排名

4.1 案例背景

了解中国城市空气质量排名，有助于我们关注空气质量，保护身体健康。本案例将展示如何使用 ECharts 地图图表展示中国城市空气质量排名。

4.2 实现步骤

  1. 数据准备：获取中国城市空气质量数据。
  2. 地图配置：使用 ECharts 地图图表，配置地图样式、颜色等。
  3. 数据绑定：将空气质量数据与地图进行绑定，实现空气质量排名的动态展示。

4.3 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市空气质量排名',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '中国城市空气质量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 80},
                {name: '上海', value: 90},
                {name: '广州', value: 70},
                // ... 其他城市数据
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

案例五：中国城市交通流量分析

5.1 案例背景

了解中国城市交通流量情况，有助于我们优化交通规划，缓解交通拥堵。本案例将展示如何使用 ECharts 地图图表展示中国城市交通流量分析。

5.2 实现步骤

  1. 数据准备：获取中国城市交通流量数据。
  2. 地图配置：使用 ECharts 地图图表，配置地图样式、颜色等。
  3. 数据绑定：将交通流量数据与地图进行绑定，实现交通流量分析的动态展示。

5.3 代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市交通流量分析',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '中国城市交通流量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 5000},
                {name: '上海', value: 8000},
                {name: '广州', value: 3000},
                // ... 其他城市数据
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

通过以上5个案例，我们可以看到 ECharts 地图图表在地理数据可视化领域的强大功能。希望这些案例能够帮助你更好地掌握 ECharts 地图图表的使用，实现地理数据的可视化。

分享到：
上一篇 职场实战揭秘：从案例分析看如何轻松应对实务难题
下一篇 揭秘企业大数据难题：MongoDB如何助力高效数据管理及分析

相关文章

职场实战揭秘：从案例分析看如何轻松应对实务难题
2026-08-25
揭秘实务章节案例，如何轻松应对实际工作难题
2026-08-25
揭秘企业大数据难题：MongoDB如何助力高效数据管理及分析
2026-08-25
揭秘实名举报背后的真实奖励与风险：这些案例告诉你，勇敢举报也有回报！
2026-08-25