案例

新手必看！用echarts轻松绘制地图图表：20个实战案例教你轻松上手

2026-10-31 0 阅读

ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够帮助开发者轻松创建交互式图表。其中，地图图表是 ECharts 中非常实用的一种图表类型，能够直观地展示地理位置信息和数据分布。对于新手来说，通过实战案例学习地图图表的制作无疑是一个快速上手的好方法。本文将为您介绍 20 个实战案例，帮助您轻松掌握 ECharts 地图图表的制作技巧。

实战案例一：中国地图

案例简介：绘制中国地图，展示各省份的名称和数据。

实现步骤：

  1. 引入 ECharts 库和中国地图数据。
  2. 初始化地图实例，设置地图类型为 'map'。
  3. 设置地图的 mapType 为 'china'。
  4. 使用 series 配置项添加数据系列，设置数据类型为 'map'。
  5. 设置数据项的 name 属性为各省份名称，value 属性为对应的数据值。

代码示例：

// 引入 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'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true,
            position: 'center'
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 90
        }, {
            name: '广东',
            value: 80
        }]
    }]
};

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

实战案例二：世界地图

案例简介：绘制世界地图，展示各个国家的名称和数据。

实现步骤：

  1. 引入 ECharts 库和世界地图数据。
  2. 初始化地图实例，设置地图类型为 'map'。
  3. 设置地图的 mapType 为 'world'。
  4. 使用 series 配置项添加数据系列，设置数据类型为 'map'。
  5. 设置数据项的 name 属性为各国名称，value 属性为对应的数据值。

代码示例：

// 引入 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'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        roam: false,
        label: {
            show: true,
            position: 'center'
        },
        data: [{
            name: '美国',
            value: 100
        }, {
            name: '中国',
            value: 90
        }, {
            name: '日本',
            value: 80
        }]
    }]
};

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

实战案例三：省份地图

案例简介：绘制某个省份的地图，展示各个市州的名称和数据。

实现步骤：

  1. 引入 ECharts 库和省份地图数据。
  2. 初始化地图实例，设置地图类型为 'map'。
  3. 设置地图的 mapType 为具体省份的名称，例如 '广东'。
  4. 使用 series 配置项添加数据系列，设置数据类型为 'map'。
  5. 设置数据项的 name 属性为各市州名称，value 属性为对应的数据值。

代码示例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入广东省地图数据
require('echarts/map/js/guangdong');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '广东省地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '广东',
        type: 'map',
        mapType: 'guangdong',
        roam: false,
        label: {
            show: true,
            position: 'center'
        },
        data: [{
            name: '广州',
            value: 100
        }, {
            name: '深圳',
            value: 90
        }, {
            name: '珠海',
            value: 80
        }]
    }]
};

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

实战案例四：多地图组合

案例简介：在同一个图表中展示多个地图，例如中国地图和世界地图。

实现步骤：

  1. 引入 ECharts 库和中国地图、世界地图数据。
  2. 初始化地图实例，设置地图类型为 'map'。
  3. 设置地图的 mapType 分别为 'china' 和 'world'。
  4. 使用 series 配置项添加多个数据系列，分别设置数据类型为 'map'。
  5. 设置数据项的 name 属性为地图名称，value 属性为对应的数据值。

代码示例：

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

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '多地图组合示例'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true,
            position: 'center'
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 90
        }, {
            name: '广东',
            value: 80
        }]
    }, {
        name: '世界',
        type: 'map',
        mapType: 'world',
        roam: false,
        label: {
            show: true,
            position: 'center'
        },
        data: [{
            name: '美国',
            value: 100
        }, {
            name: '中国',
            value: 90
        }, {
            name: '日本',
            value: 80
        }]
    }]
};

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

实战案例五：散点地图

案例简介：在地图上展示散点数据，例如展示某个地区的疫情数据。

实现步骤：

  1. 引入 ECharts 库和散点地图数据。
  2. 初始化地图实例，设置地图类型为 'map'。
  3. 设置地图的 mapType 为 'china' 或 'world'。
  4. 使用 series 配置项添加数据系列，设置数据类型为 'scatter'。
  5. 设置数据项的 name 属性为散点名称，value 属性为对应的数据值。

代码示例：

// 引入 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'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '散点',
        type: 'scatter',
        mapType: 'china',
        roam: false,
        coordinateSystem: 'geo',
        label: {
            show: true,
            position: 'center'
        },
        data: [{
            name: '北京',
            value: [116.46, 39.92, 100]
        }, {
            name: '上海',
            value: [121.47, 31.23, 90]
        }, {
            name: '广州',
            value: [113.23, 23.16, 80]
        }]
    }]
};

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

实战案例六：热力地图

案例简介：在地图上展示热力数据，例如展示某个地区的气温分布。

实现步骤：

  1. 引入 ECharts 库和热力地图数据。
  2. 初始化地图实例，设置地图类型为 'map'。
  3. 设置地图的 mapType 为 'china' 或 'world'。
  4. 使用 series 配置项添加数据系列，设置数据类型为 'heatmap'。
  5. 设置数据项的 name 属性为热力区域名称，value 属性为对应的数据值。

代码示例：

// 引入 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'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '热力',
        type: 'heatmap',
        mapType: 'china',
        roam: false,
        coordinateSystem: 'geo',
        label: {
            show: true,
            position: 'center'
        },
        data: [{
            name: '北京',
            value: [116.46, 39.92, 100]
        }, {
            name: '上海',
            value: [121.47, 31.23, 90]
        }, {
            name: '广州',
            value: [113.23, 23.16, 80]
        }]
    }]
};

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

实战案例七：折线地图

案例简介：在地图上展示折线数据，例如展示某个地区的气温变化。

实现步骤：

  1. 引入 ECharts 库和折线地图数据。
  2. 初始化地图实例，设置地图类型为 'map'。
  3. 设置地图的 mapType 为 'china' 或 'world'。
  4. 使用 series 配置项添加数据系列，设置数据类型为 'line'。
  5. 设置数据项的 name 属性为折线名称，value 属性为对应的数据值。

代码示例：

// 引入 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'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '折线',
        type: 'line',
        mapType: 'china',
        roam: false,
        coordinateSystem: 'geo',
        label: {
            show: true,
            position: 'center'
        },
        data: [{
            name: '北京',
            value: [116.46, 39.92, 100]
        }, {
            name: '上海',
            value: [121.47, 31.23, 90]
        }, {
            name: '广州',
            value: [113.23, 23.16, 80]
        }]
    }]
};

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

实战案例八：饼图地图

案例简介：在地图上展示饼图数据，例如展示某个地区的行业分布。

实现步骤：

  1. 引入 ECharts 库和饼图地图数据。
  2. 初始化地图实例，设置地图类型为 'map'。
  3. 设置地图的 mapType 为 'china' 或 'world'。
  4. 使用 series 配置项添加数据系列，设置数据类型为 'pie'。
  5. 设置数据项的 name 属性为饼图名称，value 属性为对应的数据值。

代码示例：

// 引入 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'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '饼图',
        type: 'pie',
        mapType: 'china',
        roam: false,
        coordinateSystem: 'geo',
        label: {
            show: true,
            position: 'center'
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 90
        }, {
            name: '广州',
            value: 80
        }]
    }]
};

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

实战案例九：柱状图地图

案例简介：在地图上展示柱状图数据，例如展示某个地区的销量情况。

实现步骤：

  1. 引入 ECharts 库和柱状图地图数据。
  2. 初始化地图实例，设置地图类型为 'map'。
  3. 设置地图的 mapType 为 'china' 或 'world'。
  4. 使用 series 配置项添加数据系列，设置数据类型为 'bar'。
  5. 设置数据项的 name 属性为柱状图名称，value 属性为对应的数据值。

代码示例：

// 引入 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'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '柱状图',
        type: 'bar',
        mapType: 'china',
        roam: false,
        coordinateSystem: 'geo',
        label: {
            show: true,
            position: 'center'
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 90
        }, {
            name: '广州',
            value: 80
        }]
    }]
};

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

实战案例十：环形图地图

案例简介：

分享到：
上一篇 如何从推销员案例中学习高效沟通技巧，提升销售业绩？
下一篇 从失败中学习：揭秘推销大师如何从失败案例中汲取经验，重拾成功之道

相关文章

如何从推销员案例中学习高效沟通技巧，提升销售业绩？
2026-10-31
新手如何做好推销前准备？实战案例分析教你一招制胜
2026-10-31
从失败中学习：揭秘推销大师如何从失败案例中汲取经验，重拾成功之道
2026-10-31
揭秘企业级大数据处理：MongoDB案例分析，教你如何高效管理海量数据
2026-10-31