案例

教你用 ECharts 快速制作地图图表：10个实用案例详解

2026-11-03 0 阅读

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。地图图表在展示地理分布数据时非常有效，可以帮助用户直观地理解数据在不同地区之间的分布情况。下面，我将通过10个实用案例，详细讲解如何使用 ECharts 快速制作地图图表。

案例一：中国地图

步骤一：引入 ECharts 和地图数据

首先，你需要引入 ECharts 的 JavaScript 库和对应的地图数据文件。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

步骤二：创建地图实例并设置配置项

接下来，创建一个地图实例，并设置相应的配置项。

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

var option = {
    title: {
        text: '中国地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

步骤三：展示地图

将上述代码放入 HTML 文档中，并添加一个具有相应 ID 的 div 元素，即可展示中国地图。

<div id="main" style="width: 600px;height:400px;"></div>

案例二：世界地图

步骤一：引入 ECharts 和世界地图数据

与世界地图相关的数据文件可以从 ECharts 官网下载。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/world.js"></script>

步骤二：创建地图实例并设置配置项

与世界地图相关的配置项与国内地图类似，只需将 mapType 属性设置为 'world'。

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

var option = {
    title: {
        text: '世界地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [{
            name: '中国',
            value: 100
        }]
    }]
};

myChart.setOption(option);

步骤三：展示地图

与世界地图相关的展示步骤与国内地图相同。

案例三：自定义地图

步骤一：引入 ECharts 和自定义地图数据

自定义地图数据需要根据实际需求进行设计。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/custom.js"></script>

步骤二：创建地图实例并设置配置项

自定义地图的配置项与国内地图类似，只需将 mapType 属性设置为 'custom'。

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

var option = {
    title: {
        text: '自定义地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '自定义地图',
        type: 'map',
        mapType: 'custom',
        label: {
            show: true
        },
        data: [{
            name: '区域1',
            value: 100
        }]
    }]
};

myChart.setOption(option);

步骤三：展示地图

自定义地图的展示步骤与国内地图相同。

案例四：多级联动地图

步骤一：引入 ECharts 和多级联动地图数据

多级联动地图数据可以从 ECharts 官网下载。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

步骤二：创建地图实例并设置配置项

多级联动地图的配置项与国内地图类似，只需在 series 属性中添加 levels 属性，用于设置地图的级别。

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

var option = {
    title: {
        text: '多级联动地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        levels: [{
            // 第一级
            itemStyle: {
                areaColor: '#323c48'
            }
        }, {
            // 第二级
            itemStyle: {
                areaColor: '#2c343c'
            }
        }]
    }]
};

myChart.setOption(option);

步骤三：展示地图

多级联动地图的展示步骤与国内地图相同。

案例五：热力地图

步骤一：引入 ECharts 和热力地图数据

热力地图数据可以从 ECharts 官网下载。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

步骤二：创建地图实例并设置配置项

热力地图的配置项与国内地图类似，只需将 type 属性设置为 'heatmap'。

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

var option = {
    title: {
        text: '热力地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'heatmap',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

步骤三：展示地图

热力地图的展示步骤与国内地图相同。

案例六：散点地图

步骤一：引入 ECharts 和散点地图数据

散点地图数据可以从 ECharts 官网下载。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

步骤二：创建地图实例并设置配置项

散点地图的配置项与国内地图类似，只需将 type 属性设置为 'scatter'。

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

var option = {
    title: {
        text: '散点地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'scatter',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: [116.46, 39.92]
        }]
    }]
};

myChart.setOption(option);

步骤三：展示地图

散点地图的展示步骤与国内地图相同。

案例七：路径地图

步骤一：引入 ECharts 和路径地图数据

路径地图数据可以从 ECharts 官网下载。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

步骤二：创建地图实例并设置配置项

路径地图的配置项与国内地图类似，只需将 type 属性设置为 'lines'。

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

var option = {
    title: {
        text: '路径地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'lines',
        mapType: 'china',
        coordinateSystem: 'geo',
        data: [{
            name: '北京',
            coords: [[116.46, 39.92], [121.4737, 31.2304]]
        }]
    }]
};

myChart.setOption(option);

步骤三：展示地图

路径地图的展示步骤与国内地图相同。

案例八：地图动画

步骤一：引入 ECharts 和地图动画数据

地图动画数据可以从 ECharts 官网下载。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

步骤二：创建地图实例并设置配置项

地图动画的配置项与国内地图类似，只需在 animation 属性中设置动画效果。

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

var option = {
    title: {
        text: '地图动画示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut'
    }]
};

myChart.setOption(option);

步骤三：展示地图

地图动画的展示步骤与国内地图相同。

案例九：地图交互

步骤一：引入 ECharts 和地图交互数据

地图交互数据可以从 ECharts 官网下载。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

步骤二：创建地图实例并设置配置项

地图交互的配置项与国内地图类似，只需在 tooltip 和 label 属性中设置交互效果。

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

var option = {
    title: {
        text: '地图交互示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            formatter: '{b}'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

步骤三：展示地图

地图交互的展示步骤与国内地图相同。

案例十：地图组合

步骤一：引入 ECharts 和地图组合数据

地图组合数据可以从 ECharts 官网下载。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/map/js/china.js"></script>

步骤二：创建地图实例并设置配置项

地图组合的配置项与国内地图类似，只需在 series 属性中添加多个系列，实现组合效果。

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

var option = {
    title: {
        text: '地图组合示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }, {
        name: '世界',
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [{
            name: '中国',
            value: 100
        }]
    }]
};

myChart.setOption(option);

步骤三：展示地图

地图组合的展示步骤与国内地图相同。

通过以上10个实用案例，相信你已经掌握了使用 ECharts 快速制作地图图表的方法。在实际应用中，你可以根据自己的需求，灵活运用这些案例，制作出更加美观、实用的地图图表。

分享到：
上一篇 掌握Java 8，看这12个实用新特性案例，轻松提升编程效率！
下一篇 探索高中英语阅读教学新策略：案例分享与实战技巧解析

相关文章

掌握Java 8，看这12个实用新特性案例，轻松提升编程效率！
2026-11-03
揭秘高中英语课堂：如何巧妙融入思政教育，培养未来世界公民
2026-11-03
探索高中英语阅读教学新策略：案例分享与实战技巧解析
2026-11-03
揭秘不同屏幕尺寸下的网页神奇变身：响应式设计实战解析
2026-11-03