从城市地图到全球视野，教你轻松用 ECharts 制作实用地图图表案例全解析

ECharts 是一款功能强大的开源可视化库，广泛应用于数据可视化领域。它提供了丰富的图表类型，包括但不限于折线图、柱状图、饼图、地图等。在地图图表的制作上，ECharts 也提供了强大的支持。本文将带你从城市地图到全球视野，详细了解如何使用 ECharts 制作实用的地图图表，并为你提供一系列案例全解析。

一、ECharts 地图图表基本概念

1. 地图数据

地图数据是地图图表的基础，主要包括地图坐标、行政区划代码、名称等。在 ECharts 中，地图数据通常以 JSON 格式存储，可以通过 ECharts 内置的地图数据或者自定义数据来实现。

2. 地图实例

地图实例是指 ECharts 地图图表的具体实现，包括地图类型、坐标系统、视觉映射等。通过配置地图实例的属性，可以实现各种地图图表效果。

3. 地图配置

地图配置是指对地图实例进行属性设置，包括地图类型、坐标系统、视觉映射、地图样式等。ECharts 提供了丰富的地图配置选项，以满足不同场景的需求。

二、城市地图图表制作

1. 准备地图数据

以中国城市地图为例，首先需要准备城市地图数据。可以通过 ECharts 内置的地图数据或者自定义数据来实现。

var geoCoordMap = {
    '北京': [116.46,39.92],
    '上海': [121.48,31.22],
    '广州': [113.23,23.16],
    '深圳': [114.07,22.62]
};

2. 配置地图实例

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

var option = {
    title: {
        text: '中国城市地图'
    },
    tooltip: {},
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46,39.92]},
                {name: '上海', value: [121.48,31.22]},
                {name: '广州', value: [113.23,23.16]},
                {name: '深圳', value: [114.07,22.62]}
            ],
            rippleEffect: {
                brushType: 'stroke'
            },
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: 'rgba(100, 100, 100, 0.5)'
                }
            },
            zlevel: 1
        }
    ]
};

myChart.setOption(option);

3. 效果展示

通过以上配置，可以生成一个具有动态效果的 China 地图，显示北京、上海、广州、深圳等城市的地理位置。

三、全球地图图表制作

1. 准备地图数据

以全球地图为例，需要准备全球地图数据。可以通过 ECharts 内置的地图数据或者自定义数据来实现。

var geoCoordMap = {
    'New York': [-74.006, 40.7128],
    'Los Angeles': [-118.2437, 34.0522],
    'Chicago': [-87.6298, 41.8781],
    'Houston': [-95.3698, 29.4252],
    'Phoenix': [-112.0740, 33.4484]
};

2. 配置地图实例

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

var option = {
    title: {
        text: '全球地图'
    },
    tooltip: {},
    geo: {
        map: 'world',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [
                {name: 'New York', value: [-74.006, 40.7128]},
                {name: 'Los Angeles', value: [-118.2437, 34.0522]},
                {name: 'Chicago', value: [-87.6298, 41.8781]},
                {name: 'Houston', value: [-95.3698, 29.4252]},
                {name: 'Phoenix', value: [-112.0740, 33.4484]}
            ],
            rippleEffect: {
                brushType: 'stroke'
            },
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: 'rgba(100, 100, 100, 0.5)'
                }
            },
            zlevel: 1
        }
    ]
};

myChart.setOption(option);

3. 效果展示

通过以上配置，可以生成一个具有动态效果的全球地图，显示纽约、洛杉矶、芝加哥、休斯顿、凤凰城等城市的地理位置。

四、案例全解析

1. 热力图

热力图是一种常用的地图图表类型，用于展示地理空间的热点分布。在 ECharts 中，可以通过 heatmap 系列实现热力图效果。

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

var option = {
    title: {
        text: '全球热点分布'
    },
    tooltip: {},
    geo: {
        map: 'world',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: 'New York', value: [40.7128, -74.006]},
                {name: 'Los Angeles', value: [34.0522, -118.2437]},
                {name: 'Chicago', value: [41.8781, -87.6298]},
                {name: 'Houston', value: [29.4252, -95.3698]},
                {name: 'Phoenix', value: [33.4484, -112.0740]}
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            zlevel: 1
        }
    ]
};

myChart.setOption(option);

2. 雷达图

雷达图是一种展示多维度数据的图表类型，在地图图表中可以用于展示城市或地区的综合发展水平。在 ECharts 中，可以通过 radar 系列实现雷达图效果。

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

var option = {
    title: {
        text: '城市综合发展水平'
    },
    tooltip: {},
    radar: {
        indicator: [
            {text: '经济', max: 100},
            {text: '教育', max: 100},
            {text: '科技', max: 100},
            {text: '环境', max: 100}
        ]
    },
    series: [
        {
            type: 'radar',
            data: [
                {
                    name: '北京',
                    value: [90, 85, 95, 80]
                },
                {
                    name: '上海',
                    value: [85, 90, 80, 90]
                },
                {
                    name: '广州',
                    value: [80, 85, 90, 95]
                },
                {
                    name: '深圳',
                    value: [90, 80, 85, 90]
                }
            ]
        }
    ]
};

myChart.setOption(option);

3. 地图组合

地图组合是指将多种地图图表类型组合在一起，以展示更丰富的信息。在 ECharts 中，可以通过组合多个系列实现地图组合效果。

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

var option = {
    title: {
        text: '全球地图组合'
    },
    tooltip: {},
    geo: {
        map: 'world',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [
                {name: 'New York', value: [40.7128, -74.006]},
                {name: 'Los Angeles', value: [34.0522, -118.2437]},
                {name: 'Chicago', value: [41.8781, -87.6298]},
                {name: 'Houston', value: [29.4252, -95.3698]},
                {name: 'Phoenix', value: [33.4484, -112.0740]}
            ],
            rippleEffect: {
                brushType: 'stroke'
            },
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: 'rgba(100, 100, 100, 0.5)'
                }
            },
            zlevel: 1
        },
        {
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: 'New York', value: [40.7128, -74.006]},
                {name: 'Los Angeles', value: [34.0522, -118.2437]},
                {name: 'Chicago', value: [41.8781, -87.6298]},
                {name: 'Houston', value: [29.4252, -95.3698]},
                {name: 'Phoenix', value: [33.4484, -112.0740]}
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            zlevel: 2
        }
    ]
};

myChart.setOption(option);

五、总结

通过本文的学习，相信你已经掌握了使用 ECharts 制作实用地图图表的技巧。在实际应用中，可以根据具体需求选择合适的地图类型、数据、配置等，以实现最佳的可视化效果。希望本文对你有所帮助！