轻松上手echarts地图图表：30个实用案例，让你轻松绘制数据可视化地图

在数据可视化领域，地图图表是一种非常直观且富有吸引力的方式，它可以帮助我们更好地理解地理分布和空间关系。ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，其中包括地图图表。本文将为你介绍 30 个实用案例，帮助你轻松上手 ECharts 地图图表的绘制。

案例一：中国地图

1.1 案例描述

绘制中国地图，展示各个省份的数据分布。

1.2 代码示例

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

var option = {
    title: {
        text: '中国地图示例',
        subtext: '数据来源：某统计网站',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}'
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

案例二：世界地图

2.1 案例描述

绘制世界地图，展示各个国家的数据分布。

2.2 代码示例

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

var option = {
    title: {
        text: '世界地图示例',
        subtext: '数据来源：某统计网站',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}'
            },
            data: [
                {name: 'United States', value: Math.round(Math.random() * 1000)},
                {name: 'China', value: Math.round(Math.random() * 1000)},
                // ... 其他国家
            ]
        }
    ]
};

myChart.setOption(option);

案例三：自定义地图

3.1 案例描述

绘制自定义地图，例如某个城市的地图。

3.2 代码示例

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

var option = {
    title: {
        text: '自定义地图示例',
        subtext: '数据来源：某统计网站',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '自定义地图',
            type: 'map',
            mapType: 'custom',
            roam: true,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}'
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他区域
            ],
            // 自定义地图数据
            map: {
                features: [
                    {
                        // 北京市
                        name: '北京市',
                        properties: {
                            // ...
                        }
                    },
                    // ... 其他区域
                ]
            }
        }
    ]
};

myChart.setOption(option);

案例四：热力地图

4.1 案例描述

绘制热力地图，展示某个区域内的高温分布。

4.2 代码示例

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

var option = {
    title: {
        text: '热力地图示例',
        subtext: '数据来源：某气象站',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 50,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '热力地图',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                // ... 数据点
            ],
            // 热力图数据
            pointData: [
                {name: '北京市', value: [116.46, 39.92, 30]},
                {name: '上海市', value: [121.48, 31.22, 35]},
                // ... 其他数据点
            ]
        }
    ]
};

myChart.setOption(option);

案例五：路径地图

5.1 案例描述

绘制路径地图，展示某个区域内的人员流动情况。

5.2 代码示例

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

var option = {
    title: {
        text: '路径地图示例',
        subtext: '数据来源：某公司',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '路径地图',
            type: 'lines',
            coordinateSystem: 'geo',
            polyline: true,
            data: [
                // ... 路径数据
            ],
            // 路径数据
            lineStyle: {
                normal: {
                    width: 2,
                    opacity: 0.6,
                    curveness: 0.2
                }
            },
            effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: '#fff',
                symbolSize: 3
            },
            // 起点和终点数据
            start: [
                {name: '北京市', value: [116.46, 39.92]},
                {name: '上海市', value: [121.48, 31.22]}
            ],
            end: [
                {name: '上海市', value: [121.48, 31.22]},
                {name: '广州市', value: [113.23, 23.16]}
            ]
        }
    ]
};

myChart.setOption(option);

案例六：地图缩放

6.1 案例描述

在地图上实现缩放功能，方便用户查看不同区域的细节。

6.2 代码示例

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

var option = {
    title: {
        text: '地图缩放示例',
        subtext: '数据来源：某统计网站',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '地图缩放',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}'
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

// 监听地图缩放事件
myChart.on('geoZoom', function (params) {
    console.log('缩放级别：' + params.value);
});

案例七：地图点击事件

7.1 案例描述

在地图上添加点击事件，展示点击区域的详细信息。

7.2 代码示例

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

var option = {
    title: {
        text: '地图点击事件示例',
        subtext: '数据来源：某统计网站',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '地图点击事件',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}'
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

// 监听地图点击事件
myChart.on('click', function (params) {
    console.log('点击区域：' + params.name);
});

案例八：地图拖拽

8.1 案例描述

在地图上实现拖拽功能，方便用户查看不同区域的细节。

8.2 代码示例

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

var option = {
    title: {
        text: '地图拖拽示例',
        subtext: '数据来源：某统计网站',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '地图拖拽',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}'
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

// 监听地图拖拽事件
myChart.on('geoDrag', function (params) {
    console.log('拖拽位置：' + params.value);
});

案例九：地图缩放与拖拽结合

9.1 案例描述

在地图上实现缩放和拖拽功能，方便用户查看不同区域的细节。

9.2 代码示例

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

var option = {
    title: {
        text: '地图缩放与拖拽结合示例',
        subtext: '数据来源：某统计网站',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '地图缩放与拖拽结合',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}'
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

// 监听地图缩放与拖拽事件
myChart.on('geoZoom', function (params) {
    console.log('缩放级别：' + params.value);
});

myChart.on('geoDrag', function (params) {
    console.log('拖拽位置：' + params.value);
});

案例十：地图点击与拖拽结合

10.1 案例描述

在地图上实现点击和拖拽功能，方便用户查看不同区域的详细信息。

10.2 代码示例

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

var option = {
    title: {
        text: '地图点击与拖拽结合示例',
        subtext: '数据来源：某统计网站',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '地图点击与拖拽结合',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}'
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

// 监听地图点击与拖拽事件
myChart.on('click', function (params) {
    console.log('点击区域：' + params.name);
});

myChart.on('geoDrag', function (params) {
    console.log('拖拽位置：' + params.value);
});

案例十一：地图点击与缩放结合

11.1 案例描述

在地图上实现点击和缩放功能，方便用户查看不同区域的详细信息。

11.2 代码示例

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

var option = {
    title: {
        text: '地图点击与缩放结合示例',
        subtext: '数据来源：某统计网站',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '地图点击与缩放结合',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}'
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

// 监听地图点击与缩放事件
myChart.on('click', function (params) {
    console.log('点击区域：' + params.name);
});

myChart.on('geoZoom', function (params) {
    console.log('缩放级别：' + params.value);
});

案例十二：地图拖拽与缩放结合

12.1 案例描述

在地图上实现拖拽和缩放功能，方便用户查看不同区域的详细信息。

12.2 代码示例

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

var option = {
    title: {
        text: '地图拖拽与缩放结合示例',
        subtext: '数据来源：某统计网站',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '地图拖拽与缩放结合',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                position: 'center',
                formatter: '{b}'
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

// 监听地图拖拽与缩放事件
myChart.on('geoDrag', function (params) {
    console.log('拖拽位置：' + params.value);
});

myChart.on('geoZoom', function (params) {
    console.log('缩放级别：' + params.value);
});

案例十三：地图点击、拖拽、缩放结合

13.1 案例描述

在地图上实现点击、拖拽和缩放功能，方便用户查看不同区域的详细信息。

13.2 代码示例

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

var option = {

title: {
    text: '地图点击、拖拽、缩放结合示例',
    subtext: '数据来源：某统计网站',
    left: 'center'
},
tooltip: {
    trigger: 'item'
},
visualMap: {
    min: 0,
    max: 1000,
    left: 'left',
    top: 'bottom',
    text: ['高','低'],
    calculable: true
},
series: [
    {
        name: '地图点击、拖拽、缩放结合',
        type: 'map',
        mapType: 'china',
        roam: true,