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

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

1.1 前言

ECharts 提供了丰富的地图类型，其中中国省市区级地图是最常用的。本案例将教你如何制作一个简洁美观的中国省市区级地图。

1.2 步骤

引入 ECharts 和地图数据：首先，你需要引入 ECharts 库和对应的地图数据文件。
初始化地图：在 HTML 中创建一个容器，并设置地图的初始配置。
添加数据和视觉映射：根据你的数据，为地图添加相应的视觉映射。

1.3 代码示例

// 引入 ECharts 和地图数据
var myChart = echarts.init(document.getElementById('main'));
var geoData = echarts.map.getTheme('china');

// 初始化地图
myChart.setOption({
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }]
});

案例二：世界地图

2.1 前言

世界地图是 ECharts 地图类型中的一种，适用于展示全球范围内的数据分布。

2.2 步骤

引入 ECharts 和地图数据：与案例一类似，引入 ECharts 库和世界地图数据文件。
初始化地图：创建地图容器，并设置地图的初始配置。
添加数据和视觉映射：根据数据，为地图添加相应的视觉映射。

2.3 代码示例

// 引入 ECharts 和地图数据
var myChart = echarts.init(document.getElementById('main'));
var geoData = echarts.map.getTheme('world');

// 初始化地图
myChart.setOption({
    series: [{
        type: 'map',
        map: 'world',
        data: [
            {name: 'China', value: 100},
            {name: 'USA', value: 200}
        ]
    }]
});

案例三：自定义地图

3.1 前言

自定义地图是指使用 ECharts 提供的地图数据接口，根据实际需求创建自定义地图。

3.2 步骤

获取地图数据：通过 ECharts 提供的地图数据接口，获取自定义地图数据。
初始化地图：创建地图容器，并设置地图的初始配置。
添加数据和视觉映射：根据数据，为地图添加相应的视觉映射。

3.3 代码示例

// 引入 ECharts 和地图数据
var myChart = echarts.init(document.getElementById('main'));
var geoData = echarts.map.getTheme('customMap');

// 初始化地图
myChart.setOption({
    series: [{
        type: 'map',
        map: 'customMap',
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
        ]
    }]
});

案例四：散点地图

4.1 前言

散点地图是 ECharts 地图类型中的一种，适用于展示地理位置与数值之间的关系。

4.2 步骤

引入 ECharts 和地图数据：引入 ECharts 库和对应的地图数据文件。
初始化地图：创建地图容器，并设置地图的初始配置。
添加数据和视觉映射：根据数据，为地图添加相应的视觉映射。

4.3 代码示例

// 引入 ECharts 和地图数据
var myChart = echarts.init(document.getElementById('main'));
var geoData = echarts.map.getTheme('china');

// 初始化地图
myChart.setOption({
    series: [{
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.47, 31.23]}
        ]
    }]
});

案例五：热力地图

5.1 前言

热力地图是 ECharts 地图类型中的一种，适用于展示地理位置与数值的热度分布。

5.2 步骤

引入 ECharts 和地图数据：引入 ECharts 库和对应的地图数据文件。
初始化地图：创建地图容器，并设置地图的初始配置。
添加数据和视觉映射：根据数据，为地图添加相应的视觉映射。

5.3 代码示例

// 引入 ECharts 和地图数据
var myChart = echarts.init(document.getElementById('main'));
var geoData = echarts.map.getTheme('china');

// 初始化地图
myChart.setOption({
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.47, 31.23]}
        ]
    }]
});

案例六：多维度地图

6.1 前言

多维度地图是指在一个地图上展示多个维度（如时间、类别等）的数据。

6.2 步骤

引入 ECharts 和地图数据：引入 ECharts 库和对应的地图数据文件。
初始化地图：创建地图容器，并设置地图的初始配置。
添加数据和视觉映射：根据数据，为地图添加相应的视觉映射。

6.3 代码示例

// 引入 ECharts 和地图数据
var myChart = echarts.init(document.getElementById('main'));
var geoData = echarts.map.getTheme('china');

// 初始化地图
myChart.setOption({
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: [116.46, 39.92, '2021-01-01']},
            {name: '上海', value: [121.47, 31.23, '2021-01-02']}
        ]
    }]
});

案例七：动画地图

7.1 前言

动画地图是指地图上的数据在加载过程中，以动画的形式展示出来。

7.2 步骤

引入 ECharts 和地图数据：引入 ECharts 库和对应的地图数据文件。
初始化地图：创建地图容器，并设置地图的初始配置。
添加数据和视觉映射：根据数据，为地图添加相应的视觉映射。

7.3 代码示例

// 引入 ECharts 和地图数据
var myChart = echarts.init(document.getElementById('main'));
var geoData = echarts.map.getTheme('china');

// 初始化地图
myChart.setOption({
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.47, 31.23]}
        ],
        animation: true
    }]
});

案例八：地图交互

8.1 前言

地图交互是指用户可以通过鼠标点击、拖动等方式与地图进行交互。

8.2 步骤

引入 ECharts 和地图数据：引入 ECharts 库和对应的地图数据文件。
初始化地图：创建地图容器，并设置地图的初始配置。
添加数据和视觉映射：根据数据，为地图添加相应的视觉映射。
设置交互事件：为地图添加交互事件，如点击事件、拖动事件等。

8.3 代码示例

// 引入 ECharts 和地图数据
var myChart = echarts.init(document.getElementById('main'));
var geoData = echarts.map.getTheme('china');

// 初始化地图
myChart.setOption({
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.47, 31.23]}
        ],
        // 设置交互事件
        emphasis: {
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 2
            }
        }
    }]
});

案例九：地图叠加

9.1 前言

地图叠加是指将多个地图叠加在一起，形成一个复合地图。

9.2 步骤

引入 ECharts 和地图数据：引入 ECharts 库和对应的地图数据文件。
初始化地图：创建地图容器，并设置地图的初始配置。
添加数据和视觉映射：根据数据，为地图添加相应的视觉映射。
设置叠加顺序：设置地图叠加的顺序，确保顶层地图显示正确。

9.3 代码示例

// 引入 ECharts 和地图数据
var myChart = echarts.init(document.getElementById('main'));
var geoData = echarts.map.getTheme('china');

// 初始化地图
myChart.setOption({
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.47, 31.23]}
        ]
    }, {
        type: 'map',
        map: 'world',
        data: [
            {name: 'USA', value: 200}
        ]
    }]
});

案例十：地图导出

10.1 前言

地图导出是指将 ECharts 地图导出为图片或 PDF 格式。

10.2 步骤

引入 ECharts 和地图数据：引入 ECharts 库和对应的地图数据文件。
初始化地图：创建地图容器，并设置地图的初始配置。
添加数据和视觉映射：根据数据，为地图添加相应的视觉映射。
设置导出功能：为地图添加导出功能，允许用户将地图导出为图片或 PDF 格式。

10.3 代码示例

// 引入 ECharts 和地图数据
var myChart = echarts.init(document.getElementById('main'));
var geoData = echarts.map.getTheme('china');

// 初始化地图
myChart.setOption({
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.47, 31.23]}
        ]
    }]
});

// 设置导出功能
myChart.setOption({
    export: {
        enable: true,
        type: ['png', 'jpg', 'pdf']
    }
});

通过以上 10 个实用案例，相信你已经对 ECharts 地图图表的制作有了初步的了解。在实际应用中，你可以根据自己的需求，灵活运用这些案例，制作出更加丰富、美观的地图图表。祝你学习愉快！