正文

新手必看！echarts地图图表制作实战案例，轻松上手可视化数据展示

/0 浏览量
0903

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括地图图表。地图图表是一种非常直观的数据展示方式，可以用于展示地理位置信息、人口分布、销售情况等。对于新手来说，学习如何制作 ECharts 地图图表可能会有些挑战，但别担心，本文将带你一步步走进地图图表的世界，通过实战案例轻松上手。

地图图表的基本概念

地图图表是 ECharts 提供的一种图表类型，它可以将数据与地理位置信息相结合，通过颜色、形状、大小等方式直观地展示数据。在 ECharts 中，地图图表可以分为以下几种类型：

  • 中国地图：这是最常见的地图类型，用于展示中国各个省份或地级市的数据。
  • 世界地图：适用于展示全球各个国家和地区的数据。
  • 自定义地图：可以根据自己的需求定制地图，例如展示某个特定区域的数据。

实战案例：中国地图图表制作

下面我们将通过一个简单的实战案例，展示如何使用 ECharts 制作中国地图图表。

1. 准备数据

首先，我们需要准备数据。这里我们可以使用一个简单的示例数据，包含中国各个省份的GDP数据。

[
  {
    "name": "北京",
    "value": 20000
  },
  {
    "name": "上海",
    "value": 25000
  },
  {
    "name": "广东",
    "value": 30000
  },
  // ... 其他省份数据
]

2. 添加地图配置

接下来，我们需要在 HTML 页面中添加 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>
        var myChart = echarts.init(document.getElementById('container'));

        var option = {
            title: {
                text: '中国地图图表示例',
                subtext: '数据来源：示例数据',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                type: 'continuous',
                min: 0,
                max: 40000,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],           // 文本，默认为数值文本
                calculable: true
            },
            geo: {
                map: 'china',
                roam: true,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [
                {
                    name: 'GDP',
                    type: 'map',
                    mapType: 'china',
                    roam: true,
                    label: {
                        show: true
                    },
                    data: [
                        {
                            "name": "北京",
                            "value": 20000
                        },
                        {
                            "name": "上海",
                            "value": 25000
                        },
                        {
                            "name": "广东",
                            "value": 30000
                        },
                        // ... 其他省份数据
                    ]
                }
            ]
        };

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

3. 运行和查看效果

将上述代码保存为 HTML 文件，并在浏览器中打开。你将看到一个包含中国地图的图表，各个省份的颜色深浅代表 GDP 的大小。

总结

通过本文的实战案例，你学会了如何使用 ECharts 制作地图图表。在实际应用中，你可以根据需要调整地图类型、数据、颜色等配置项，以达到最佳的视觉效果。希望本文能帮助你轻松上手地图图表制作，更好地展示你的数据。

-- 展开阅读全文 --