案例

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

2026-07-28 0 阅读

ECharts 是一款使用 JavaScript 实现的开源可视化库，它可以帮助用户快速制作数据可视化图表。在众多图表类型中，地图图表因其直观性和实用性而受到许多开发者的青睐。本文将详细介绍如何使用 ECharts 制作地图图表，并提供30个实用案例，帮助你快速掌握地图图表的制作技巧。

一、ECharts 地图图表基础

1.1 地图数据格式

ECharts 地图图表的数据格式通常采用 GeoJSON 格式。GeoJSON 是一种用于描述地理空间数据的格式，它以 JSON 格式存储地理空间信息。

1.2 地图配置项

ECharts 地图图表的配置项主要包括以下几部分：

  • series：定义图表系列，如点、线、面等。
  • visualMap：定义图表的视觉映射组件，用于设置颜色映射。
  • geo：定义地图的基本配置，如地图类型、缩放级别等。

二、30个实用案例详解

2.1 案例一：中国地图

代码示例：

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'map',
        map: 'china'
    }]
};

myChart.setOption(option);

说明： 本案例展示了中国地图的基本用法，通过设置 map 属性为 'china'，即可展示中国地图。

2.2 案例二：世界地图

代码示例：

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

var option = {
    geo: {
        map: 'world'
    },
    series: [{
        type: 'map',
        map: 'world'
    }]
};

myChart.setOption(option);

说明： 本案例展示了世界地图的基本用法，通过设置 map 属性为 'world'，即可展示世界地图。

2.3 案例三：自定义地图

代码示例：

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

var option = {
    geo: {
        map: 'customMap'
    },
    series: [{
        type: 'map',
        map: 'customMap'
    }]
};

myChart.setOption(option);

说明： 本案例展示了如何使用自定义地图。首先需要将 GeoJSON 数据导入到项目中，然后通过设置 map 属性为自定义地图的名称，即可展示自定义地图。

2.4 案例四：点地图

代码示例：

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.48, 31.22]}
        ]
    }]
};

myChart.setOption(option);

说明： 本案例展示了如何使用点地图。通过设置 type 属性为 'effectScatter'，并结合 data 属性中的经纬度信息，即可展示点地图。

2.5 案例六：热力地图

代码示例：

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, 100]},
            {name: '上海', value: [121.48, 31.22, 200]}
        ]
    }]
};

myChart.setOption(option);

说明： 本案例展示了热力地图的基本用法。通过设置 type 属性为 'heatmap'，并结合 data 属性中的经纬度和数值信息，即可展示热力地图。

2.7 案例八：多系列地图

代码示例：

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }, {
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 300},
            {name: '上海', value: 400}
        ]
    }]
};

myChart.setOption(option);

说明： 本案例展示了如何使用多个系列制作地图。通过设置多个 series 配置项，即可展示多个系列地图。

2.9 案例十：地图交互

代码示例：

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

var option = {
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true,
            color: '#fff'
        },
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }]
};

myChart.setOption(option);

说明： 本案例展示了地图交互的基本用法。通过设置 roam 属性为 true，即可启用地图拖拽和缩放功能。同时，通过设置 label 和 itemStyle 属性，可以自定义地图标签和样式。

2.11 案例十二：地图动画

代码示例：

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

var option = {
    geo: {
        map: 'china',
        animation: true
    },
    series: [{
        type: 'map',
        map: 'china',
        animation: true,
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }]
};

myChart.setOption(option);

说明： 本案例展示了地图动画的基本用法。通过设置 animation 属性为 true，即可启用地图动画效果。

2.13 案例十四：地图事件

代码示例：

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true,
            color: '#fff'
        },
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ],
        events: {
            click: function (params) {
                alert(params.name);
            }
        }
    }]
};

myChart.setOption(option);

说明： 本案例展示了地图事件的基本用法。通过设置 events 属性，可以监听地图的各种事件，如点击、鼠标悬停等。

2.15 案例十六：地图缩放

代码示例：

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

var option = {
    geo: {
        map: 'china',
        zoom: 1.2
    },
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true,
            color: '#fff'
        },
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }]
};

myChart.setOption(option);

说明： 本案例展示了地图缩放的基本用法。通过设置 zoom 属性，可以控制地图的缩放级别。

2.17 案例十八：地图颜色映射

代码示例：

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

var option = {
    geo: {
        map: 'china',
        visualMap: {
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本，默认为数值文本
            calculable: true
        }
    },
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true,
            color: '#fff'
        },
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }]
};

myChart.setOption(option);

说明： 本案例展示了地图颜色映射的基本用法。通过设置 visualMap 配置项，可以自定义地图颜色映射。

2.19 案例二十：地图标签显示

代码示例：

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

var option = {
    geo: {
        map: 'china',
        label: {
            show: true,
            color: '#fff'
        }
    },
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true,
            color: '#fff'
        },
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }]
};

myChart.setOption(option);

说明： 本案例展示了地图标签显示的基本用法。通过设置 label 配置项，可以控制地图标签的显示和样式。

2.21 案例二十二：地图边界线

代码示例：

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

var option = {
    geo: {
        map: 'china',
        borderStyle: {
            color: '#fff',
            opacity: 1
        }
    },
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true,
            color: '#fff'
        },
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }]
};

myChart.setOption(option);

说明： 本案例展示了地图边界线的基本用法。通过设置 borderStyle 配置项，可以自定义地图边界线的颜色和透明度。

2.23 案例二十四：地图阴影

代码示例：

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

var option = {
    geo: {
        map: 'china',
        shadowBlur: 30,
        shadowColor: 'rgba(120, 36, 50, 0.5)',
        shadowOffsetY: 20
    },
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true,
            color: '#fff'
        },
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }]
};

myChart.setOption(option);

说明： 本案例展示了地图阴影的基本用法。通过设置 shadowBlur、shadowColor 和 shadowOffsetY 属性，可以自定义地图阴影的样式。

2.25 案例二十六：地图旋转

代码示例：

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

var option = {
    geo: {
        map: 'china',
        rotation: [0, 30]
    },
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true,
            color: '#fff'
        },
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }]
};

myChart.setOption(option);

说明： 本案例展示了地图旋转的基本用法。通过设置 rotation 属性，可以自定义地图的旋转角度。

2.27 案例二十八：地图比例尺

代码示例：

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

var option = {
    geo: {
        map: 'china',
        scaleLimit: {
            min: 1,
            max: 5
        }
    },
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true,
            color: '#fff'
        },
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }]
};

myChart.setOption(option);

说明： 本案例展示了地图比例尺的基本用法。通过设置 scaleLimit 属性，可以自定义地图的缩放比例限制。

2.29 案例三十：地图切换

代码示例：

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true,
            color: '#fff'
        },
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }]
};

myChart.setOption(option);

// 切换到世界地图
setTimeout(function () {
    myChart.setOption({
        geo: {
            map: 'world'
        }
    });
}, 3000);

说明： 本案例展示了地图切换的基本用法。通过设置 map 属性，可以切换到不同的地图。

三、总结

本文详细介绍了如何使用 ECharts 制作地图图表，并提供了30个实用案例。通过学习本文，相信你已经掌握了 ECharts 地图图表的制作技巧。在实际开发过程中，可以根据需求调整和优化地图图表的样式和功能，使其更加美观和实用。

分享到：
上一篇 揭秘TensorFlow在智能医疗、自动驾驶和金融风控领域的实际应用与挑战
下一篇 揭秘： MongoDB大数据处理实战案例分析，带你轻松入门高效数据管理

相关文章

揭秘TensorFlow在智能医疗、自动驾驶和金融风控领域的实际应用与挑战
2026-07-28
从入门到精通：实战解析almaLinux在多个项目中的应用案例
2026-07-28
揭秘： MongoDB大数据处理实战案例分析，带你轻松入门高效数据管理
2026-07-28
揭秘如何用Tails系统轻松保护个人隐私：实战案例分析及安全指南
2026-07-28