案例

轻松上手ECharts地图图表：20个实用案例解析，让你轻松制作地理数据可视化

2026-08-25 0 阅读

ECharts地图图表是一种强大的数据可视化工具，它可以帮助我们轻松地将地理数据以图表的形式展示出来。无论是展示国家、省份、城市的数据分布，还是进行区域对比分析，ECharts地图图表都能提供直观、生动的视觉效果。下面，我将通过20个实用案例，带你轻松上手ECharts地图图表的制作。

案例一：中国地图数据可视化

案例描述：展示中国各省份的人口数量。

实现步骤：

  1. 准备数据：获取中国各省份的人口数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的mapType为china。
  5. 添加series组件，配置type为map，并设置data属性为省份人口数据。
  6. 渲染地图。

代码示例：

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');
// 引入中国地图数据
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',
        data: [
            {name: '北京', value: 2154.2},
            {name: '天津', value: 1556.6},
            // ... 其他省份数据
        ]
    }]
};

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

案例二：全球地图数据可视化

案例描述：展示全球各国家的GDP数据。

实现步骤：

  1. 准备数据：获取全球各国家的GDP数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的mapType为world。
  5. 添加series组件，配置type为map，并设置data属性为国家GDP数据。
  6. 渲染地图。

代码示例：

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

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国家GDP数据'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: 'GDP',
        type: 'map',
        mapType: 'world',
        data: [
            {name: '美国', value: 210932},
            {name: '中国', value: 114367},
            // ... 其他国家数据
        ]
    }]
};

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

案例三：城市地图数据可视化

案例描述：展示某个城市的交通拥堵情况。

实现步骤：

  1. 准备数据：获取某个城市的交通拥堵数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的mapType为城市名称。
  5. 添加series组件，配置type为map，并设置data属性为交通拥堵数据。
  6. 渲染地图。

代码示例：

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

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '重庆市交通拥堵情况'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '交通拥堵',
        type: 'map',
        mapType: 'chongqing',
        data: [
            {name: '渝中区', value: 80},
            {name: '江北区', value: 70},
            // ... 其他区域数据
        ]
    }]
};

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

案例四：行政区划数据可视化

案例描述：展示某个省份的行政区划数据。

实现步骤：

  1. 准备数据：获取某个省份的行政区划数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的mapType为省份名称。
  5. 添加series组件，配置type为map，并设置data属性为行政区划数据。
  6. 渲染地图。

代码示例：

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');
// 引入省份地图数据
require('echarts/map/js/chongqing');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '重庆市行政区划数据'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '行政区划',
        type: 'map',
        mapType: 'chongqing',
        data: [
            {name: '渝中区', value: 1},
            {name: '江北区', value: 1},
            // ... 其他区域数据
        ]
    }]
};

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

案例五：区域对比数据可视化

案例描述：展示两个区域的GDP对比。

实现步骤：

  1. 准备数据：获取两个区域的GDP数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的mapType为区域名称。
  5. 添加series组件，配置type为map，并设置data属性为GDP数据。
  6. 渲染地图。

代码示例：

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');
// 引入区域地图数据
require('echarts/map/js/chongqing');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '重庆市与成都市GDP对比'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: 'GDP',
        type: 'map',
        mapType: 'chongqing',
        data: [
            {name: '重庆', value: 114367},
            {name: '成都', value: 10250},
            // ... 其他区域数据
        ]
    }]
};

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

案例六：人口密度数据可视化

案例描述：展示某个区域的 人口密度。

实现步骤：

  1. 准备数据：获取某个区域的人口密度数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的mapType为区域名称。
  5. 添加series组件，配置type为map，并设置data属性为人口密度数据。
  6. 渲染地图。

代码示例：

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');
// 引入区域地图数据
require('echarts/map/js/chongqing');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '重庆市人口密度'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '人口密度',
        type: 'map',
        mapType: 'chongqing',
        data: [
            {name: '渝中区', value: 20000},
            {name: '江北区', value: 15000},
            // ... 其他区域数据
        ]
    }]
};

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

案例七：交通流量数据可视化

案例描述：展示某个城市的交通流量。

实现步骤：

  1. 准备数据：获取某个城市的交通流量数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的mapType为城市名称。
  5. 添加series组件，配置type为map，并设置data属性为交通流量数据。
  6. 渲染地图。

代码示例：

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

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '重庆市交通流量'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '交通流量',
        type: 'map',
        mapType: 'chongqing',
        data: [
            {name: '渝中区', value: 100},
            {name: '江北区', value: 80},
            // ... 其他区域数据
        ]
    }]
};

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

案例八：空气质量数据可视化

案例描述：展示某个城市的空气质量。

实现步骤：

  1. 准备数据：获取某个城市的空气质量数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的mapType为城市名称。
  5. 添加series组件，配置type为map，并设置data属性为空气质量数据。
  6. 渲染地图。

代码示例：

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

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '重庆市空气质量'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '空气质量',
        type: 'map',
        mapType: 'chongqing',
        data: [
            {name: '渝中区', value: 50},
            {name: '江北区', value: 60},
            // ... 其他区域数据
        ]
    }]
};

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

案例九：降雨量数据可视化

案例描述：展示某个区域的降雨量。

实现步骤：

  1. 准备数据：获取某个区域的降雨量数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的mapType为区域名称。
  5. 添加series组件，配置type为map，并设置data属性为降雨量数据。
  6. 渲染地图。

代码示例：

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');
// 引入区域地图数据
require('echarts/map/js/chongqing');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '重庆市降雨量'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '降雨量',
        type: 'map',
        mapType: 'chongqing',
        data: [
            {name: '渝中区', value: 100},
            {name: '江北区', value: 80},
            // ... 其他区域数据
        ]
    }]
};

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

案例十：地震数据可视化

案例描述：展示某个区域的地震数据。

实现步骤：

  1. 准备数据：获取某个区域的地震数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的mapType为区域名称。
  5. 添加series组件，配置type为map，并设置data属性为地震数据。
  6. 渲染地图。

代码示例：

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');
// 引入区域地图数据
require('echarts/map/js/chongqing');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '重庆市地震数据'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地震',
        type: 'map',
        mapType: 'chongqing',
        data: [
            {name: '渝中区', value: 1},
            {name: '江北区', value: 2},
            // ... 其他区域数据
        ]
    }]
};

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

案例十一：人口迁移数据可视化

案例描述：展示某个区域的人口迁移情况。

实现步骤：

  1. 准备数据：获取某个区域的人口迁移数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的mapType为区域名称。
  5. 添加series组件，配置type为map，并设置data属性为人口迁移数据。
  6. 渲染地图。

代码示例：

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');
// 引入区域地图数据
require('echarts/map/js/chongqing');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '重庆市人口迁移情况'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '人口迁移',
        type: 'map',
        mapType: 'chongqing',
        data: [
            {name: '渝中区', value: 1000},
            {name: '江北区', value: 800},
            // ... 其他区域数据
        ]
    }]
};

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

案例十二：旅游景点数据可视化

案例描述：展示某个城市的旅游景点。

实现步骤：

  1. 准备数据：获取某个城市的旅游景点数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的mapType为城市名称。
  5. 添加series组件，配置type为map，并设置data属性为旅游景点数据。
  6. 渲染地图。

代码示例：

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

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '重庆市旅游景点'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '旅游景点',
        type: 'map',
        mapType: 'chongqing',
        data: [
            {name: '洪崖洞', value: 1},
            {name: '解放碑', value: 1},
            // ... 其他景点数据
        ]
    }]
};

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

案例十三：交通路线数据可视化

案例描述：展示某个城市的交通路线。

实现步骤：

  1. 准备数据：获取某个城市的交通路线数据。
  2. 引入ECharts地图插件。
  3. 创建地图实例，设置地图类型为map。
  4. 设置地图的
分享到：
上一篇 从新手到高手：护理实战案例深度解析，助你快速掌握护理技巧
下一篇 小发明大智慧：揭秘日常生活里实用的新型案例解析

相关文章

从新手到高手：护理实战案例深度解析，助你快速掌握护理技巧
2026-08-25
双眼皮手术揭秘：真实案例分享，轻松掌握术后恢复技巧
2026-08-25
小发明大智慧：揭秘日常生活里实用的新型案例解析
2026-08-25
揭秘：如何用MongoDB轻松应对海量数据挑战，案例分析带你一探究竟
2026-08-25