案例

新手必学！轻松掌握echarts地图图表制作，30个实战案例带你入门

2026-11-02 0 阅读

在当今数据可视化的世界里，地图图表以其直观、生动的展示方式，成为了数据分析师和前端开发者不可或缺的工具。ECharts 是一款强大的可视化库，它支持多种图表类型，包括地图图表。对于新手来说，掌握 ECharts 地图图表的制作并不难，只需跟随以下 30 个实战案例，你就能轻松入门。

1. 基础地图展示

案例描述：创建一个基础的地图图表，展示世界地图。

实现步骤：

  • 引入 ECharts 和地图数据。
  • 初始化地图图表。
  • 配置地图系列。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'world'
    }]
};

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

2. 省级地图展示

案例描述：创建一个展示中国省级地图的图表。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表。
  • 配置地图系列。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china'
    }]
};

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

3. 地图数据可视化

案例描述：使用地图图表展示不同省份的GDP数据。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表。
  • 配置地图系列，添加数据。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }]
};

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

4. 地图点击事件

案例描述：为地图添加点击事件，点击省份时显示详细信息。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表。
  • 配置地图系列，添加点击事件。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ],
        // 添加点击事件
        label: {
            show: true,
            formatter: function(params) {
                return params.name + '：' + params.value;
            }
        }
    }]
};

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

// 为地图添加点击事件
myChart.on('click', function(params) {
    console.log(params.name + '：' + params.value);
});

5. 地图缩放和拖拽

案例描述：为地图添加缩放和拖拽功能。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表。
  • 配置地图系列，添加缩放和拖拽功能。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china',
        // 添加缩放和拖拽功能
        zoom: 1.2,
        roam: true,
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }]
};

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

6. 地图热力图

案例描述：使用热力图展示城市人口密度。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表。
  • 配置地图系列，使用热力图。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 3000]},
            {name: '上海', value: [121.47, 31.23, 5000]},
            // ... 其他城市数据
        ]
    }]
};

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

7. 地图动画效果

案例描述：为地图添加动画效果，展示数据变化。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表。
  • 配置地图系列，添加动画效果。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china',
        // 添加动画效果
        animation: true,
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }]
};

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

8. 地图多维度数据展示

案例描述：使用地图图表展示多个维度的数据，如人口、GDP、面积等。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表。
  • 配置地图系列，添加多个维度数据。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: [3000, 10000, 20000]},
            {name: '上海', value: [4000, 15000, 25000]},
            // ... 其他省份数据
        ]
    }]
};

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

9. 地图与折线图结合

案例描述：将地图图表与折线图结合，展示数据趋势。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表和折线图。
  • 配置地图系列和折线图系列。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }, {
        type: 'line',
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }]
};

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

10. 地图与柱状图结合

案例描述：将地图图表与柱状图结合，展示数据对比。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表和柱状图。
  • 配置地图系列和柱状图系列。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }, {
        type: 'bar',
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }]
};

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

11. 地图与散点图结合

案例描述：将地图图表与散点图结合，展示数据分布。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表和散点图。
  • 配置地图系列和散点图系列。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }, {
        type: 'scatter',
        data: [
            {name: '北京', value: [116.46, 39.92, 3000]},
            {name: '上海', value: [121.47, 31.23, 4000]},
            // ... 其他城市数据
        ]
    }]
};

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

12. 地图与饼图结合

案例描述：将地图图表与饼图结合，展示数据占比。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表和饼图。
  • 配置地图系列和饼图系列。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }, {
        type: 'pie',
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }]
};

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

13. 地图与雷达图结合

案例描述：将地图图表与雷达图结合，展示数据多维度对比。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表和雷达图。
  • 配置地图系列和雷达图系列。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: [3000, 10000, 20000]},
            {name: '上海', value: [4000, 15000, 25000]},
            // ... 其他省份数据
        ]
    }, {
        type: 'radar',
        data: [
            {name: '北京', value: [3000, 10000, 20000]},
            {name: '上海', value: [4000, 15000, 25000]},
            // ... 其他省份数据
        ]
    }]
};

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

14. 地图与K线图结合

案例描述：将地图图表与K线图结合，展示数据波动。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表和K线图。
  • 配置地图系列和K线图系列。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }, {
        type: 'k',
        data: [
            {name: '北京', value: [3000, 10000, 20000, 30000]},
            {name: '上海', value: [4000, 15000, 25000, 35000]},
            // ... 其他省份数据
        ]
    }]
};

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

15. 地图与漏斗图结合

案例描述：将地图图表与漏斗图结合，展示数据筛选过程。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表和漏斗图。
  • 配置地图系列和漏斗图系列。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图系列
var option = {
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }, {
        type: 'funnel',
        data: [
            {name: '北京', value: 3000},
            {name: '上海', value: 4000},
            // ... 其他省份数据
        ]
    }]
};

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

16. 地图与仪表盘结合

案例描述：将地图图表与仪表盘结合，展示数据指标。

实现步骤：

  • 引入 ECharts 和中国地图数据。
  • 初始化地图图表和仪表盘。
  • 配置地图系列和仪表盘系列。

”`javascript // 引入 ECharts 主模块 var echarts = require(‘echarts/lib/echarts’); // 引入地图组件 require(‘echarts/lib/component/geo’); // 引入中国地图数据 require(‘echarts/map/js/china’);

// 初始化地图图表 var myChart = echarts.init(document.getElementById(‘main’));

// 配置地图系列 var option = {

series: [{
    type: 'map',
    map: 'china',
    data: [
        {name: '北京', value: 3000},
        {name: '上海', value: 4000},
        // ... 其他省份数据
    ]
}, {
    type: 'gauge',
    data: [
        {name: '北京', value: 3000},
        {name: '上海', value: 4000},
        //
分享到：
上一篇 揭秘 TensorFlow 在智能家居领域的创新应用，带你领略智能生活新体验
下一篇 煤气中毒事故如何维权与赔偿？了解关键步骤，保障自身权益

相关文章

揭秘 TensorFlow 在智能家居领域的创新应用，带你领略智能生活新体验
2026-11-02
AlmaLinux应用场景：轻松迁移，高效构建企业级项目的最佳选择
2026-11-02
煤气中毒事故如何维权与赔偿？了解关键步骤，保障自身权益
2026-11-02
煤气灯案例揭秘：家庭暴力背后的心理操纵与自救指南
2026-11-02