案例

轻松上手echarts地图图表：30个实用案例解析，助你快速掌握数据可视化技巧

2026-06-21 0 阅读

在数据可视化领域，ECharts 地图图表以其强大的功能和灵活性，成为了许多开发者首选的工具之一。通过 ECharts 地图图表，我们可以将地理位置信息与数据直观地结合在一起，让数据更具说服力和吸引力。本文将为你带来30个实用案例解析，帮助你轻松上手 ECharts 地图图表，快速掌握数据可视化技巧。

案例一：中国地图销量分布

案例描述

展示中国地图上各省份的销量分布情况，颜色深浅代表销量高低。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图销量分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 省份销量数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和中国地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例二：全球疫情实时地图

案例描述

展示全球疫情实时数据，包括确诊病例、治愈病例和死亡病例。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球疫情实时地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + '<br/>' + '确诊病例：' + params.value[0] + '<br/>' + '治愈病例：' + params.value[1] + '<br/>' + '死亡病例：' + params.value[2];
        }
    },
    series: [
        {
            name: '疫情数据',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                // 全球疫情数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和世界地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例三：城市交通流量分析

案例描述

展示城市交通流量情况，包括道路、桥梁和隧道。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入城市地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '城市交通流量分析'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '交通流量',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 城市交通流量数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和中国地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例四：中国各省份GDP排名

案例描述

展示中国各省份的GDP排名情况。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国各省份GDP排名'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: 'GDP',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 省份GDP数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和中国地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例五：全球各国人口密度分布

案例描述

展示全球各国人口密度分布情况。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国人口密度分布'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            name: '人口密度',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                // 各国人口密度数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和世界地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

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

案例描述

展示中国各城市空气质量排名情况。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国各城市空气质量排名'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '空气质量',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 城市空气质量数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和中国地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例七：全球各国 GDP 分布

案例描述

展示全球各国 GDP 分布情况。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国 GDP 分布'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            name: 'GDP',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                // 各国 GDP 数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和世界地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例八：中国各省份人口密度分布

案例描述

展示中国各省份人口密度分布情况。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国各省份人口密度分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '人口密度',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 省份人口密度数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和中国地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例九：全球各国人口排名

案例描述

展示全球各国人口排名情况。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国人口排名'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            name: '人口',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                // 各国人口数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和世界地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例十：中国各城市人口排名

案例描述

展示中国各城市人口排名情况。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国各城市人口排名'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '人口',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 城市人口数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和中国地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例十一：全球各国 GDP 排名

案例描述

展示全球各国 GDP 排名情况。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国 GDP 排名'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            name: 'GDP',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                // 各国 GDP 数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和世界地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例十二：中国各省份人口排名

案例描述

展示中国各省份人口排名情况。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国各省份人口排名'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '人口',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 省份人口数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和中国地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例十三：全球各国人口密度排名

案例描述

展示全球各国人口密度排名情况。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国人口密度排名'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            name: '人口密度',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                // 各国人口密度数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和世界地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例十四：中国各省份人口密度排名

案例描述

展示中国各省份人口密度排名情况。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国各省份人口密度排名'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '人口密度',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 省份人口密度数据
            ]
        }
    ]
};

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

实现步骤

  1. 引入 ECharts 和中国地图数据。
  2. 初始化 ECharts 实例。
  3. 设置图表配置项，包括标题、提示框、系列等。
  4. 使用 setOption 方法显示图表。

案例十五：全球各国 GDP

分享到：
上一篇 从小孩玩具到高科技：TensorFlow如何改变我们的世界，十大创新应用案例解析
下一篇 揭秘如何用MongoDB轻松应对海量数据挑战：实战案例分析，助你提升数据处理效率

相关文章

从小孩玩具到高科技：TensorFlow如何改变我们的世界，十大创新应用案例解析
2026-06-21
掌握AlmaLinux，轻松搭建高效项目：企业级应用、Web开发、容器化实践案例解析
2026-06-21
揭秘如何用MongoDB轻松应对海量数据挑战：实战案例分析，助你提升数据处理效率
2026-06-21
Java 8新特性轻松上手：实战案例解析，告别入门难题
2026-06-21