正文

新手必学！轻松掌握echarts地图图表，实战案例教学让你快速上手

/0 浏览量
0621

在数据可视化领域，ECharts 是一款非常流行的 JavaScript 库，它可以帮助我们轻松创建各种图表，包括地图图表。对于新手来说，ECharts 地图图表的学习可能会有些挑战，但不用担心，本文将带你通过一系列实战案例，轻松掌握 ECharts 地图图表的制作。

ECharts 地图图表简介

ECharts 地图图表是基于地理坐标系统，通过 ECharts 提供的地图插件来实现的。它可以将地理信息数据可视化，展示地理位置、区域分布等信息。ECharts 地图图表支持多种地图类型，如中国地图、世界地图、行政区划地图等。

环境准备

在开始学习之前，请确保你的环境中已经安装了 Node.js 和 npm（Node.js 的包管理器）。接下来，我们将使用 npm 安装 ECharts 和 ECharts 地图插件。

npm install echarts echarts-map

第一个地图图表

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>

<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/extension/echarts-map.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '中国地图',
            subtext: '数据纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        visualMap: {
            min: 0,
            max: 100,
            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)},
                    {name: '广东',value: Math.round(Math.random() * 1000)},
                    {name: '山东',value: Math.round(Math.random() * 1000)},
                    {name: '河南',value: Math.round(Math.random() * 1000)}
                ]
            }
        ]
    };

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

在这个例子中，我们创建了一个中国地图，并随机生成了每个省份的数值数据。

2. 交互式地图

接下来，我们将学习如何创建一个交互式地图，用户可以通过点击地图上的省份来查看详细信息。

<!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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/extension/echarts-map.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '交互式中国地图',
            subtext: '数据纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
        },
        visualMap: {
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],
            calculable: true
        },
        series: [
            {
                name: '中国',
                type: 'map',
                mapType: 'china',
                roam: true,
                label: {
                    show: true
                },
                data: [
                    {name: '北京',value: Math.round(Math.random() * 1000)},
                    {name: '上海',value: Math.round(Math.random() * 1000)},
                    {name: '广东',value: Math.round(Math.random() * 1000)},
                    {name: '山东',value: Math.round(Math.random() * 1000)},
                    {name: '河南',value: Math.round(Math.random() * 1000)}
                ]
            }
        ]
    };

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

在这个例子中，我们添加了 roam: true 属性，使得地图可以自由缩放和拖动。同时，我们修改了 tooltip 的 formatter 属性，使其显示点击省份的名称和数值。

高级地图图表

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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/extension/echarts-map.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '中国热力图',
            subtext: '数据纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
        },
        visualMap: {
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],
            calculable: true
        },
        series: [
            {
                name: '中国',
                type: 'map',
                mapType: 'china',
                roam: true,
                label: {
                    show: true
                },
                data: [
                    {name: '北京',value: Math.round(Math.random() * 1000)},
                    {name: '上海',value: Math.round(Math.random() * 1000)},
                    {name: '广东',value: Math.round(Math.random() * 1000)},
                    {name: '山东',value: Math.round(Math.random() * 1000)},
                    {name: '河南',value: Math.round(Math.random() * 1000)}
                ]
            }
        ]
    };

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

在这个例子中，我们使用了 type: 'map' 和 mapType: 'china' 属性来创建中国地图，并通过 data 属性添加了每个省份的数值数据。

2. 地图上的折线图

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.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/extension/echarts-map.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        title: {
            text: '地图上的折线图',
            subtext: '数据纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
        },
        visualMap: {
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],
            calculable: true
        },
        series: [
            {
                name: '中国',
                type: 'map',
                mapType: 'china',
                roam: true,
                label: {
                    show: true
                },
                data: [
                    {name: '北京',value: Math.round(Math.random() * 1000)},
                    {name: '上海',value: Math.round(Math.random() * 1000)},
                    {name: '广东',value: Math.round(Math.random() * 1000)},
                    {name: '山东',value: Math.round(Math.random() * 1000)},
                    {name: '河南',value: Math.round(Math.random() * 1000)}
                ]
            },
            {
                name: '折线图',
                type: 'line',
                coordinateSystem: 'geo',
                data: [
                    [116.46,39.92,100],
                    [121.47,31.23,90],
                    [113.26,23.16,80],
                    [119.14,36.47,70],
                    [113.47,34.27,60]
                ],
                symbolSize: 10,
                itemStyle: {
                    color: '#f4e925',
                    borderColor: '#f4e925',
                    borderWidth: 1
                }
            }
        ]
    };

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

在这个例子中，我们添加了一个折线图系列，并通过 coordinateSystem: 'geo' 属性将其与地图系列关联起来。

总结

通过本文的学习，相信你已经掌握了 ECharts 地图图表的基本用法和高级应用。在实际项目中，你可以根据自己的需求，灵活运用 ECharts 地图图表，将地理信息数据可视化，为用户提供更好的数据展示效果。

-- 展开阅读全文 --