正文

教你用 ECharts 快速制作地图图表：5个实用案例解析，轻松入门！

/0 浏览量
1025

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。地图图表可以直观地展示地理分布数据，非常适合展示区域性的统计数据。下面，我将通过5个实用案例，带你快速入门 ECharts 地图图表的制作。

案例一：中国地图图表

1.1 准备工作

首先，你需要引入 ECharts 库和对应的地图数据。这里以中国地图为例，你可以从 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>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '中国地图图表'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '中国',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                position: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ]
        }]
    };

    myChart.setOption(option);
</script>
</body>
</html>

1.2 案例解析

在这个案例中，我们使用 echarts.init() 方法初始化图表，并设置 mapType 为 'china' 来加载中国地图数据。然后，我们定义了 series 数组，其中包含一个地图系列对象。在这个对象中，我们设置了地图的样式、标签和区域数据。

案例二：世界地图图表

2.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>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/world.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '世界地图图表'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '世界',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: false,
                position: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            data: [
                {name: '中国', value: Math.round(Math.random() * 1000)},
                // ... 其他国家数据
            ]
        }]
    };

    myChart.setOption(option);
</script>
</body>
</html>

2.2 案例解析

与世界地图相比，中国地图数据更为庞大。在这个案例中，我们将 mapType 设置为 'world' 来加载世界地图数据。其他配置与案例一类似。

案例三：自定义地图图表

3.1 准备工作

除了内置地图数据，ECharts 还支持自定义地图数据。你可以从 GeoJSON 格式下载地图数据，并将其转换为 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>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '自定义地图图表'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '自定义地图',
            type: 'map',
            mapType: 'custom',
            roam: true,
            label: {
                show: false,
                position: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            data: [
                // ... 自定义地图数据
            ]
        }]
    };

    myChart.setOption(option);
</script>
</body>
</html>

3.2 案例解析

在这个案例中，我们将 mapType 设置为 'custom' 来加载自定义地图数据。你需要将 GeoJSON 格式的地图数据转换为 ECharts 地图数据格式，并在 data 数组中添加相应的数据。

案例四：多层级地图图表

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>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '多层级地图图表'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '多层级地图',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                position: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            data: [
                // ... 省份数据
            ]
        }, {
            name: '多层级地图',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                position: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            data: [
                // ... 市级数据
            ]
        }]
    };

    myChart.setOption(option);
</script>
</body>
</html>

4.2 案例解析

在这个案例中，我们定义了两个地图系列对象，分别对应省份和市级数据。通过调整 mapType 和 data，你可以实现多层级地图图表。

案例五：地图图表交互

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>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '地图图表交互'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            name: '地图交互',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                position: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            data: [
                // ... 省份数据
            ]
        }]
    };

    myChart.setOption(option);

    myChart.on('click', function (params) {
        console.log(params.name); // 输出点击的省份名称
    });
</script>
</body>
</html>

5.2 案例解析

在这个案例中，我们使用 myChart.on('click', function (params) {...}) 方法监听点击事件，并在控制台输出点击的省份名称。你可以根据需要添加其他交互功能，例如鼠标悬停事件、点击跳转等。

通过以上5个案例，相信你已经掌握了 ECharts 地图图表的基本制作方法。在实际应用中，你可以根据自己的需求调整图表样式、交互功能等，制作出更加美观、实用的地图图表。

-- 展开阅读全文 --