案例

轻松掌握echarts地图图表：10个实用案例解析，助力数据可视化展示

2026-09-16 0 阅读

地图图表作为ECharts库中的一个重要组成部分，它能够帮助我们以直观、生动的方式展示地理分布数据。在当今大数据时代，地图图表已经成为数据可视化的主流工具之一。本篇文章将为大家介绍10个实用案例，通过这些案例的学习，帮助你轻松掌握ECharts地图图表的制作技巧。

案例一：世界地图

主题句：世界地图是最基础的地图图表之一，可以展示全球范围内的数据分布情况。

案例说明：

  1. 准备工作：首先，我们需要准备一个世界地图的JSON数据。
  2. 代码实现：
// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入地图数据
require('echarts/map/js/world');

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    title: {
        text: '世界地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '访问来源',
        type: 'map',
        mapType: 'world',
        roam: true,
        label: {
            show: false,
            color: '#fff'
        },
        data: [{
            name: '非洲',
            value: Math.round(Math.random() * 1000)
        }]
    }]
});

案例二：中国地图

主题句：中国地图适用于展示国内各个省份的数据分布情况。

案例说明：

  1. 准备工作：我们需要准备中国地图的JSON数据。
  2. 代码实现：
// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    title: {
        text: '中国地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '访问来源',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: false,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: Math.round(Math.random() * 1000)
        }]
    }]
});

案例三：省份地图

主题句：省份地图可以展示特定省份内的数据分布情况。

案例说明：

  1. 准备工作：我们需要准备省份地图的JSON数据。
  2. 代码实现：
// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入省份地图数据
require('echarts/map/js/province');

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    title: {
        text: '省份地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '访问来源',
        type: 'map',
        mapType: 'province',
        roam: true,
        label: {
            show: false,
            color: '#fff'
        },
        data: [{
            name: '河南省',
            value: Math.round(Math.random() * 1000)
        }]
    }]
});

案例四：城市地图

主题句：城市地图适用于展示城市级别的数据分布情况。

案例说明：

  1. 准备工作：我们需要准备城市地图的JSON数据。
  2. 代码实现：
// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入城市地图数据
require('echarts/map/js/city');

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    title: {
        text: '城市地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '访问来源',
        type: 'map',
        mapType: 'city',
        roam: true,
        label: {
            show: false,
            color: '#fff'
        },
        data: [{
            name: '郑州市',
            value: Math.round(Math.random() * 1000)
        }]
    }]
});

案例五：街道地图

主题句：街道地图适用于展示街道级别的数据分布情况。

案例说明：

  1. 准备工作：我们需要准备街道地图的JSON数据。
  2. 代码实现：
// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入街道地图数据
require('echarts/map/js/roadmap');

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    title: {
        text: '街道地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '访问来源',
        type: 'map',
        mapType: 'roadmap',
        roam: true,
        label: {
            show: false,
            color: '#fff'
        },
        data: [{
            name: '二七路',
            value: Math.round(Math.random() * 1000)
        }]
    }]
});

案例六：行政区域地图

主题句：行政区域地图适用于展示各级别行政区域的数据分布情况。

案例说明：

  1. 准备工作：我们需要准备行政区域地图的JSON数据。
  2. 代码实现：
// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入行政区域地图数据
require('echarts/map/js/administrative');

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    title: {
        text: '行政区域地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '访问来源',
        type: 'map',
        mapType: 'administrative',
        roam: true,
        label: {
            show: false,
            color: '#fff'
        },
        data: [{
            name: '郑州市',
            value: Math.round(Math.random() * 1000)
        }]
    }]
});

案例七：地形地貌地图

主题句：地形地貌地图适用于展示地理特征，如山脉、河流、湖泊等。

案例说明：

  1. 准备工作：我们需要准备地形地貌地图的JSON数据。
  2. 代码实现：
// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入地形地貌地图数据
require('echarts/map/js/topo');

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    title: {
        text: '地形地貌地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '访问来源',
        type: 'map',
        mapType: 'topo',
        roam: true,
        label: {
            show: false,
            color: '#fff'
        },
        data: [{
            name: '嵩山',
            value: Math.round(Math.random() * 1000)
        }]
    }]
});

案例八：三维地图

主题句：三维地图能够更加立体地展示地理信息，增强视觉效果。

案例说明：

  1. 准备工作：我们需要准备三维地图的JSON数据。
  2. 代码实现：
// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入三维地图数据
require('echarts/map/js/3d');

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    title: {
        text: '三维地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '访问来源',
        type: 'map3D',
        mapType: '3d',
        roam: true,
        label: {
            show: false,
            color: '#fff'
        },
        data: [{
            name: '嵩山',
            value: Math.round(Math.random() * 1000)
        }]
    }]
});

案例九：热力地图

主题句：热力地图能够根据数据的密度展示地理分布的热度。

案例说明：

  1. 准备工作：我们需要准备热力地图的JSON数据。
  2. 代码实现：
// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入热力地图数据
require('echarts/map/js/heatMap');

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    title: {
        text: '热力地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '访问来源',
        type: 'heatmap',
        mapType: 'heatmap',
        roam: true,
        label: {
            show: false,
            color: '#fff'
        },
        data: [{
            name: '郑州市',
            value: Math.round(Math.random() * 1000)
        }]
    }]
});

案例十：散点地图

主题句：散点地图适用于展示地理空间上的点状数据。

案例说明：

  1. 准备工作：我们需要准备散点地图的JSON数据。
  2. 代码实现：
// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入散点地图数据
require('echarts/map/js/scatter');

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    title: {
        text: '散点地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '访问来源',
        type: 'scatter',
        mapType: 'scatter',
        roam: true,
        label: {
            show: false,
            color: '#fff'
        },
        data: [{
            name: '郑州市',
            value: [113.65, 34.76]
        }]
    }]
});

通过以上10个案例的解析，相信大家对ECharts地图图表的制作技巧有了更加深入的了解。在实际应用中，我们可以根据具体需求选择合适的地图类型，并通过调整参数实现个性化定制。希望这些案例能够帮助你轻松掌握ECharts地图图表的制作技巧，为数据可视化展示提供更多可能性。

分享到：
上一篇 探索TensorFlow：从图像识别到自然语言处理，实战案例解析与技巧分享
下一篇 揭秘企业大数据难题，MongoDB如何助力高效处理海量数据案例深度解析

相关文章

探索TensorFlow：从图像识别到自然语言处理，实战案例解析与技巧分享
2026-09-16
AlmaLinux：企业级项目如何选择稳定可靠的Linux发行版？
2026-09-16
揭秘企业大数据难题，MongoDB如何助力高效处理海量数据案例深度解析
2026-09-16
Java 8新特性助你轻松提升开发效率，实战案例解析，让你快速上手！
2026-09-16