教你用 ECharts 快速制作地图图表：5个实用案例，轻松上手！

地图图表是一种非常直观的数据展示方式，它能够将地理信息与数据统计相结合，帮助我们更好地理解地理分布和空间关系。ECharts 是一款功能强大的开源可视化库，它提供了丰富的图表类型，包括地图图表。今天，我将通过5个实用案例，带你轻松上手使用 ECharts 制作地图图表。

案例一：中国31省市区地图

步骤一：准备数据

首先，我们需要准备中国31省市区地图的数据。可以通过 ECharts 官方网站提供的地图数据下载，或者使用其他数据源。

步骤二：引入 ECharts 和地图数据

在 HTML 文件中引入 ECharts 和地图数据文件。

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

步骤三：创建地图图表

在 JavaScript 中创建地图图表。

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

var option = {
    title: {
        text: '中国31省市区地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            // 省市区数据
        ]
    }]
};

myChart.setOption(option);

步骤四：设置数据

将省市区数据填充到 data 数组中。

var data = [
    {name: '北京', value: 100},
    {name: '上海', value: 200},
    // ... 其他省市区数据
];

步骤五：运行效果

保存代码，打开 HTML 文件，即可看到中国31省市区地图图表。

案例二：世界地图

步骤一：准备数据

与案例一类似，我们需要准备世界地图的数据。

步骤二：引入 ECharts 和地图数据

在 HTML 文件中引入 ECharts 和世界地图数据文件。

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

步骤三：创建地图图表

在 JavaScript 中创建地图图表。

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

var option = {
    title: {
        text: '世界地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [
            // 国家数据
        ]
    }]
};

myChart.setOption(option);

步骤四：设置数据

将国家数据填充到 data 数组中。

var data = [
    {name: '美国', value: 100},
    {name: '中国', value: 200},
    // ... 其他国家数据
];

步骤五：运行效果

保存代码，打开 HTML 文件，即可看到世界地图图表。

案例三：自定义地图

步骤一：准备数据

我们需要准备自定义地图的数据，包括地图的边界和属性数据。

步骤二：引入 ECharts 和地图数据

在 HTML 文件中引入 ECharts 和自定义地图数据文件。

<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/custom.js"></script>

步骤三：创建地图图表

在 JavaScript 中创建地图图表。

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

var option = {
    title: {
        text: '自定义地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '自定义',
        type: 'map',
        mapType: 'custom',
        label: {
            show: true
        },
        data: [
            // 自定义地图数据
        ]
    }]
};

myChart.setOption(option);

步骤四：设置数据

将自定义地图数据填充到 data 数组中。

var data = [
    {name: '区域1', value: 100},
    {name: '区域2', value: 200},
    // ... 其他自定义地图数据
];

步骤五：运行效果

保存代码，打开 HTML 文件，即可看到自定义地图图表。

案例四：多级地图

步骤一：准备数据

我们需要准备多级地图的数据，包括省市区数据。

步骤二：引入 ECharts 和地图数据

在 HTML 文件中引入 ECharts 和多级地图数据文件。

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

步骤三：创建地图图表

在 JavaScript 中创建地图图表。

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

var option = {
    title: {
        text: '多级地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '多级',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            // 省市区数据
        ]
    }]
};

myChart.setOption(option);

步骤四：设置数据

将省市区数据填充到 data 数组中。

var data = [
    {name: '北京', value: 100},
    {name: '上海', value: 200},
    // ... 其他省市区数据
];

步骤五：运行效果

保存代码，打开 HTML 文件，即可看到多级地图图表。

案例五：地图热力图

步骤一：准备数据

我们需要准备地图热力图的数据，包括经纬度和数值。

步骤二：引入 ECharts 和地图数据

在 HTML 文件中引入 ECharts 和地图数据文件。

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

步骤三：创建地图图表

在 JavaScript 中创建地图图表。

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

var option = {
    title: {
        text: '地图热力图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '热力',
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            // 热力图数据
        ]
    }]
};

myChart.setOption(option);

步骤四：设置数据

将热力图数据填充到 data 数组中。

var data = [
    {name: '北京', value: [116.46, 39.92, 100]},
    {name: '上海', value: [121.47, 31.23, 200]},
    // ... 其他热力图数据
];

步骤五：运行效果

保存代码，打开 HTML 文件，即可看到地图热力图图表。

通过以上5个案例，相信你已经对使用 ECharts 制作地图图表有了初步的了解。在实际应用中，你可以根据自己的需求选择合适的地图类型和数据，发挥 ECharts 的强大功能，制作出精美的地图图表。