新手必学：轻松上手ECharts地图图表，10个实战案例带你轻松绘制地理信息可视化

ECharts 是一款使用 JavaScript 实现的开源可视化库，它可以帮助用户轻松地生成各种图表。其中，地图图表是 ECharts 中非常受欢迎的一种图表类型，它能够将地理信息以直观的方式展示出来。对于新手来说，掌握 ECharts 地图图表的制作技巧是非常有价值的。本文将为你带来 10 个实战案例，让你轻松上手 ECharts 地图图表的制作。

实战案例一：中国地图绘制

1.1 案例简介

本案例将演示如何使用 ECharts 绘制中国地图。

1.2 代码示例

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '天津', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

1.3 案例解析

在这个案例中，我们首先通过 echarts.init 方法初始化了一个 ECharts 实例。然后，我们定义了一个配置对象 option，其中包含了图表的标题、提示框、系列等配置。在 series 数组中，我们定义了一个名为 ‘中国’ 的地图系列，并指定了地图类型为 ‘china’。最后，我们通过 myChart.setOption(option) 方法将配置对象应用到图表实例上。

实战案例二：世界地图绘制

2.1 案例简介

本案例将演示如何使用 ECharts 绘制世界地图。

2.2 代码示例

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            label: {
                show: true
            },
            data: [
                {name: '中国', value: Math.round(Math.random() * 1000)},
                {name: '美国', value: Math.round(Math.random() * 1000)},
                // ... 其他国家
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.3 案例解析

在这个案例中，我们只需要将地图类型从 ‘china’ 改为 ‘world’ 即可绘制世界地图。其他配置与案例一类似。

实战案例三：自定义地图绘制

3.1 案例简介

本案例将演示如何使用 ECharts 绘制自定义地图。

3.2 代码示例

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '自定义地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '自定义地图',
            type: 'map',
            mapType: 'custom',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '天津', value: Math.round(Math.random() * 1000)},
                // ... 其他地区
            ],
            // 自定义地图区域配置
            regions: [
                {
                    name: '北京',
                    itemStyle: {
                        color: '#FF6347'
                    }
                },
                // ... 其他地区配置
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

3.3 案例解析

在这个案例中，我们通过 mapType: 'custom' 指定了自定义地图类型。然后，我们可以通过 regions 属性来配置自定义地图的各个区域，例如为北京设置特定的颜色。

实战案例四：地图热力图绘制

4.1 案例简介

本案例将演示如何使用 ECharts 绘制地图热力图。

4.2 代码示例

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图热力图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '热力图',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
                {name: '天津', value: [117.21, 39.12, Math.round(Math.random() * 1000)]},
                // ... 其他地区
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

4.3 案例解析

在这个案例中，我们使用了 type: 'heatmap' 来指定图表类型为热力图。热力图的数据格式与地图数据类似，但需要包含经度、纬度和值三个维度。

实战案例五：地图散点图绘制

5.1 案例简介

本案例将演示如何使用 ECharts 绘制地图散点图。

5.2 代码示例

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图散点图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '散点图',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]},
                {name: '天津', value: [117.21, 39.12]},
                // ... 其他地区
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

5.3 案例解析

在这个案例中，我们使用了 type: 'scatter' 来指定图表类型为散点图。散点图的数据格式与地图数据类似，但只需要包含经度和纬度两个维度。

实战案例六：地图折线图绘制

6.1 案例简介

本案例将演示如何使用 ECharts 绘制地图折线图。

6.2 代码示例

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图折线图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '折线图',
            type: 'line',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]},
                {name: '天津', value: [117.21, 39.12]},
                // ... 其他地区
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

6.3 案例解析

在这个案例中，我们使用了 type: 'line' 来指定图表类型为折线图。折线图的数据格式与地图数据类似，但只需要包含经度和纬度两个维度。

实战案例七：地图柱状图绘制

7.1 案例简介

本案例将演示如何使用 ECharts 绘制地图柱状图。

7.2 代码示例

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图柱状图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '柱状图',
            type: 'bar',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '天津', value: Math.round(Math.random() * 1000)},
                // ... 其他地区
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

7.3 案例解析

在这个案例中，我们使用了 type: 'bar' 来指定图表类型为柱状图。柱状图的数据格式与地图数据类似，但需要包含值维度。

实战案例八：地图饼图绘制

8.1 案例简介

本案例将演示如何使用 ECharts 绘制地图饼图。

8.2 代码示例

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图饼图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '饼图',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '天津', value: Math.round(Math.random() * 1000)},
                // ... 其他地区
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

8.3 案例解析

在这个案例中，我们使用了 type: 'pie' 来指定图表类型为饼图。饼图的数据格式与地图数据类似，但需要包含值维度。

实战案例九：地图雷达图绘制

9.1 案例简介

本案例将演示如何使用 ECharts 绘制地图雷达图。

9.2 代码示例

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图雷达图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '雷达图',
            type: 'radar',
            data: [
                {
                    name: '北京',
                    value: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000), Math.round(Math.random() * 1000), Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '天津',
                    value: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000), Math.round(Math.random() * 1000), Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                // ... 其他地区
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

9.3 案例解析

在这个案例中，我们使用了 type: 'radar' 来指定图表类型为雷达图。雷达图的数据格式与地图数据类似，但需要包含多个值维度。

实战案例十：地图组合图表绘制

10.1 案例简介

本案例将演示如何使用 ECharts 绘制地图组合图表。

10.2 代码示例

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图组合图表'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '组合图表',
            type: 'custom',
            coordinateSystem: 'geo',
            renderItem: function (params) {
                return {
                    type: 'text',
                    position: [params.data.value[0], params.data.value[1]],
                    style: {
                        text: params.data.name,
                        fill: '#fff',
                        fontSize: 14
                    }
                };
            },
            data: [
                {name: '北京', value: [116.46, 39.92]},
                {name: '天津', value: [117.21, 39.12]},
                // ... 其他地区
            ]
        },
        {
            name: '组合图表',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]},
                {name: '天津', value: [117.21, 39.12]},
                // ... 其他地区
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

10.3 案例解析

在这个案例中，我们使用了 type: 'custom' 来指定图表类型为自定义图表。通过 renderItem 函数，我们可以自定义图表的渲染方式。在这个例子中，我们使用了文本元素来显示地区名称。同时，我们还添加了一个散点图系列来展示地理位置。

通过以上 10 个实战案例，相信你已经对 ECharts 地图图表的制作有了初步的了解。在实际应用中，你可以根据自己的需求选择合适的图表类型和配置项，制作出更加美观、实用的地图图表。祝你学习愉快！