教你用 ECharts 快速上手地图图表：8个实用案例详解

在数据可视化领域，地图图表是一种非常有用的工具，它能够帮助我们直观地展示地理空间上的数据分布情况。ECharts 是一款强大的可视化库，提供了丰富的图表类型，其中就包括地图图表。本篇文章将带你通过8个实用案例，快速上手 ECharts 地图图表的使用。

案例1：中国地图的基本使用

首先，我们来看一个简单的中国地图案例，展示如何使用 ECharts 创建基本的地图图表。

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        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)},
                // ... 其他省份的数据
            ]
        }
    ]
};

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

在这个例子中，我们首先创建了一个 ECharts 实例，并定义了地图的基本配置，包括标题、提示框、视觉映射组件以及数据系列。其中，mapType: 'china' 表示我们使用的是中国地图。

案例2：世界地图的基本使用

接下来，我们看看如何使用 ECharts 创建世界地图的基本图表。

// 初始化世界地图
var worldChart = echarts.init(document.getElementById('worldMap'));

// 指定图表的配置项和数据
var worldOption = {
    title: {
        text: '世界地图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: 'United States', value: Math.round(Math.random() * 1000)},
                // ... 其他国家的数据
            ]
        }
    ]
};

// 显示世界地图
worldChart.setOption(worldOption);

在这个例子中，我们将 mapType 设置为 'world'，即可创建世界地图图表。

案例3：自定义地图

除了内置的地图，ECharts 还允许我们使用自定义地图数据。以下是一个自定义地图的例子。

// 自定义地图数据
var geoCoordMap = {
    '北京': [116.46,39.92],
    // ... 其他城市坐标
};

var customOption = {
    // ... 其他配置项
    series: [
        {
            name: '自定义地图',
            type: 'map',
            mapType: 'custom',
            // ... 其他配置项
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                // ... 其他城市的数据
            ],
            geoCoord: geoCoordMap
        }
    ]
};

// 初始化自定义地图
var customChart = echarts.init(document.getElementById('customMap'));

// 显示自定义地图
customChart.setOption(customOption);

在这个例子中，我们首先定义了一个地理坐标映射表 geoCoordMap，然后在 geoCoord 属性中引用它。

案例4：地图点击事件

ECharts 支持为地图添加点击事件。以下是一个示例，展示如何监听地图点击事件。

myChart.on('click', function (params) {
    console.log(params.name); // 点击的省份名称
    console.log(params.value); // 点击的省份值
    // ... 根据点击事件进行相应的处理
});

在这个例子中，我们通过监听 click 事件，可以获取到用户点击的省份名称和对应的值。

案例5：地图缩放与平移

ECharts 地图图表支持缩放和平移功能。以下是如何实现地图缩放和平移的示例。

myChart.on('geoselectchanged', function (params) {
    // 根据缩放级别和中心点调整地图视图
    myChart.setOption({
        visualMap: {
            min: params.min,
            max: params.max
        },
        series: [
            {
                markPoint: {
                    symbol: 'pin',
                    symbolSize: function (params) {
                        return 10 * (params.value / params.max);
                    },
                    data: params.data,
                    label: {
                        show: true,
                        formatter: '{b}\n{c}'
                    }
                },
                markLine: {
                    symbol: ['none', 'arrow'],
                    silent: true,
                    lineStyle: {
                        opacity: 0.6,
                        curveness: 0.2
                    },
                    data: params.data.map(function (item) {
                        return {
                            coords: [params.name, item.name];
                        };
                    })
                }
            }
        ]
    });
});

在这个例子中，我们监听 geoselectchanged 事件，并根据事件参数调整地图视图。

案例6：地图上添加图表

有时候，我们可能需要在地图上添加一些图表，如饼图、柱状图等。以下是一个在地图上添加饼图的例子。

// 添加饼图
var pieOption = {
    title: {
        text: '北京人口分布',
        subtext: '（2019年）',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '人口',
            type: 'pie',
            radius: '38%',
            center: ['50%', '50%'],
            data: [
                {value: 535, name: '城市人口'},
                {value: 310, name: '乡村人口'},
                // ... 其他数据
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 在地图上添加饼图
myChart.setOption({
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        // ... 其他配置项
    }, pieOption]
});

在这个例子中，我们将饼图的配置项添加到了地图的 series 数组中。

案例7：地图数据更新

在实际应用中，地图数据可能会发生变化。以下是如何更新地图数据的示例。

// 假设我们需要更新数据
var newData = {
    '北京': Math.round(Math.random() * 1000),
    // ... 其他城市的数据
};

// 更新地图数据
myChart.setOption({
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        // ... 其他配置项
        data: newData
    }]
});

在这个例子中，我们首先定义了一个新的数据对象 newData，然后通过调用 setOption 方法，将新数据更新到地图图表中。

案例8：地图与后台交互

在实际应用中，我们可能需要将地图与后台进行交互，以下是一个使用 AJAX 从后台获取数据并更新地图的例子。

// 获取数据
$.ajax({
    url: '/api/map-data',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
        // 更新地图数据
        myChart.setOption({
            series: [{
                name: '中国',
                type: 'map',
                mapType: 'china',
                // ... 其他配置项
                data: data
            }]
        });
    },
    error: function () {
        console.log('获取地图数据失败');
    }
});

在这个例子中，我们使用 jQuery 的 AJAX 方法从后台获取地图数据，并将获取到的数据更新到地图图表中。

通过以上8个实用案例，相信你已经对 ECharts 地图图表有了更深入的了解。在实际应用中，你可以根据自己的需求，结合 ECharts 的丰富功能和特性，制作出各种精美的地图图表。