案例

轻松上手ECharts地图图表：10个实用案例教你绘制地理数据可视化

2026-08-21 0 阅读

ECharts地图图表是一种非常实用的数据可视化工具，它能够将地理数据以直观、生动的方式呈现出来。无论是展示国家、省份、城市的数据分布，还是分析地理位置信息，ECharts地图图表都能大显身手。本文将为你带来10个实用案例，让你轻松上手ECharts地图图表。

案例一：中国省份地图

1.1 准备工作

首先，你需要引入ECharts和china地图数据文件。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <!-- 引入china地图数据 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
</body>
</html>

1.2 配置ECharts实例

接下来，配置ECharts实例。

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

var option = {
    title: {
        text: '中国省份地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '省份',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '北京',value: Math.round(Math.random() * 1000)},
            {name: '天津',value: Math.round(Math.random() * 1000)},
            // ... 其他省份数据
        ]
    }]
};

myChart.setOption(option);

1.3 解释

在这个案例中，我们使用ECharts的地图图表功能，绘制了中国省份地图。通过设置mapType: 'china'，我们可以直接使用中国地图数据。同时，我们通过visualMap组件设置了颜色范围，并通过series组件中的data属性添加了每个省份的数据。

案例二：世界地图

2.1 准备工作

与世界地图相比，中国地图数据更加丰富，因此我们需要下载一个世界地图数据文件。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <!-- 引入world地图数据 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/world.js"></script>
</body>
</html>

2.2 配置ECharts实例

与世界地图相比，配置ECharts实例的步骤基本相同。

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

var option = {
    title: {
        text: '世界地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '国家',
        type: 'map',
        mapType: 'world',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: 'United States',value: Math.round(Math.random() * 1000)},
            {name: 'Canada',value: Math.round(Math.random() * 1000)},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

2.3 解释

在这个案例中，我们使用ECharts的地图图表功能，绘制了世界地图。与上一个案例类似，我们通过设置mapType: 'world'，直接使用世界地图数据。

案例三：自定义地图

3.1 准备工作

除了内置地图数据，ECharts还支持自定义地图数据。下面我们将使用一个简单的例子来展示如何绘制自定义地图。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
</body>
</html>

3.2 配置ECharts实例

在自定义地图案例中，我们需要自己定义地图数据。下面是一个简单的例子：

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

var option = {
    title: {
        text: '自定义地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '地区',
        type: 'map',
        mapType: 'custom',
        roam: false,
        label: {
            show: true
        },
        data: [
            {name: '地区1',value: Math.round(Math.random() * 1000)},
            {name: '地区2',value: Math.round(Math.random() * 1000)},
            // ... 其他地区数据
        ],
        // 自定义地图数据
        regions: [
            {
                name: '地区1',
                itemStyle: {
                    areaColor: '#FF0000'
                }
            },
            {
                name: '地区2',
                itemStyle: {
                    areaColor: '#00FF00'
                }
            }
        ]
    }]
};

myChart.setOption(option);

3.3 解释

在这个案例中，我们使用ECharts的地图图表功能，绘制了一个自定义地图。通过设置mapType: 'custom'，我们可以使用自定义地图数据。同时，我们通过regions属性设置了每个地区的样式。

案例四：散点图地图

4.1 准备工作

除了绘制地图，ECharts还支持在地图上绘制散点图。下面我们将使用一个例子来展示如何在地图上绘制散点图。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <!-- 引入china地图数据 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
</body>
</html>

4.2 配置ECharts实例

在散点图地图案例中，我们需要使用series组件中的type: 'scatter'属性来绘制散点图。

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

var option = {
    title: {
        text: '散点图地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '散点',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [
            {name: '北京',value: [116.46,39.92]},
            {name: '上海',value: [121.47,31.23]},
            // ... 其他散点数据
        ]
    }]
};

myChart.setOption(option);

4.3 解释

在这个案例中，我们使用ECharts的地图图表功能，在地图上绘制了散点图。通过设置type: 'scatter'和coordinateSystem: 'geo'，我们可以绘制散点图地图。

案例五：地图热力图

5.1 准备工作

除了散点图，ECharts还支持在地图上绘制热力图。下面我们将使用一个例子来展示如何在地图上绘制热力图。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <!-- 引入china地图数据 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
</body>
</html>

5.2 配置ECharts实例

在地图热力图案例中，我们需要使用type: 'heatmap'属性来绘制热力图。

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

var option = {
    title: {
        text: '地图热力图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '热力',
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京',value: [116.46,39.92]},
            {name: '上海',value: [121.47,31.23]},
            // ... 其他热力数据
        ]
    }]
};

myChart.setOption(option);

5.3 解释

在这个案例中，我们使用ECharts的地图图表功能，在地图上绘制了热力图。通过设置type: 'heatmap'和coordinateSystem: 'geo'，我们可以绘制地图热力图。

案例六：地图气泡图

6.1 准备工作

除了热力图，ECharts还支持在地图上绘制气泡图。下面我们将使用一个例子来展示如何在地图上绘制气泡图。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <!-- 引入china地图数据 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
</body>
</html>

6.2 配置ECharts实例

在地图气泡图案例中，我们需要使用type: 'bmap'属性来绘制气泡图。

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

var option = {
    title: {
        text: '地图气泡图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '气泡',
        type: 'bmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京',value: [116.46,39.92]},
            {name: '上海',value: [121.47,31.23]},
            // ... 其他气泡数据
        ]
    }]
};

myChart.setOption(option);

6.3 解释

在这个案例中，我们使用ECharts的地图图表功能，在地图上绘制了气泡图。通过设置type: 'bmap'和coordinateSystem: 'geo'，我们可以绘制地图气泡图。

案例七：地图雷达图

7.1 准备工作

除了气泡图，ECharts还支持在地图上绘制雷达图。下面我们将使用一个例子来展示如何在地图上绘制雷达图。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <!-- 引入china地图数据 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
</body>
</html>

7.2 配置ECharts实例

在地图雷达图案例中，我们需要使用type: 'radar'属性来绘制雷达图。

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

var option = {
    title: {
        text: '地图雷达图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '雷达',
        type: 'radar',
        coordinateSystem: 'geo',
        data: [
            {name: '北京',value: [116.46,39.92]},
            {name: '上海',value: [121.47,31.23]},
            // ... 其他雷达数据
        ]
    }]
};

myChart.setOption(option);

7.3 解释

在这个案例中，我们使用ECharts的地图图表功能，在地图上绘制了雷达图。通过设置type: 'radar'和coordinateSystem: 'geo'，我们可以绘制地图雷达图。

案例八：地图饼图

8.1 准备工作

除了雷达图，ECharts还支持在地图上绘制饼图。下面我们将使用一个例子来展示如何在地图上绘制饼图。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <!-- 引入china地图数据 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
</body>
</html>

8.2 配置ECharts实例

在地图饼图案例中，我们需要使用type: 'pie'属性来绘制饼图。

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

var option = {
    title: {
        text: '地图饼图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '饼图',
        type: 'pie',
        coordinateSystem: 'geo',
        data: [
            {name: '北京',value: Math.round(Math.random() * 1000)},
            {name: '上海',value: Math.round(Math.random() * 1000)},
            // ... 其他饼图数据
        ]
    }]
};

myChart.setOption(option);

8.3 解释

在这个案例中，我们使用ECharts的地图图表功能，在地图上绘制了饼图。通过设置type: 'pie'和coordinateSystem: 'geo'，我们可以绘制地图饼图。

案例九：地图柱状图

9.1 准备工作

除了饼图，ECharts还支持在地图上绘制柱状图。下面我们将使用一个例子来展示如何在地图上绘制柱状图。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <!-- 引入china地图数据 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>
</body>
</html>

9.2 配置ECharts实例

在地图柱状图案例中，我们需要使用type: 'bar'属性来绘制柱状图。

”`javascript var myChart = echarts.init(document.getElementById(‘container’));

var option = {

title: {
    text: '地图柱状图'
},
tooltip: {
    trigger: 'item'
},
visualMap: {
    min: 0,
    max: 1000,
    left: 'left',
    top: 'bottom',
分享到：
上一篇 揭秘常见造谣文字案例分析，视频素材助你识别谣言陷阱
下一篇 新冠死亡案例背后真相：还原真实数据与防疫措施重要性

相关文章

揭秘常见造谣文字案例分析，视频素材助你识别谣言陷阱
2026-08-21
“揭秘网络谣言：视频案例教你辨别真相与谣言的技巧”
2026-08-21
新冠死亡案例背后真相：还原真实数据与防疫措施重要性
2026-08-21
Java 8新特性轻松上手：实战案例解析，提升开发效率秘籍
2026-08-21