新手必学：轻松掌握ECharts地图图表，10个实用案例教你玩转数据可视化

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供丰富的图表类型，包括地图图表。地图图表可以用来展示地理位置信息，以及与之相关的数据。对于新手来说，掌握 ECharts 地图图表可以是一个挑战，但不用担心，本文将为你提供10个实用案例，帮助你轻松入门并玩转数据可视化。

案例一：中国地图可视化

案例描述

展示中国各省份的GDP数据。

实现步骤

准备中国地图数据。
使用 ECharts 地图图表类型。
配置地图参数，如地图区域、颜色渐变等。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');
// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图图表
var option = {
    title: {
        text: '中国各省份GDP数据'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: 'GDP',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data: [
            {name: '北京', value: 10000},
            {name: '上海', value: 20000},
            // ... 其他省份数据
        ]
    }]
};

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

案例二：世界地图可视化

案例描述

展示全球各国的人口数据。

实现步骤

准备世界地图数据。
使用 ECharts 地图图表类型。
配置地图参数，如地图区域、颜色渐变等。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');
// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图图表
var option = {
    title: {
        text: '全球各国人口数据'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100000000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '人口',
        type: 'map',
        mapType: 'world',
        roam: false,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data: [
            {name: '中国', value: 1400000000},
            {name: '印度', value: 1300000000},
            // ... 其他国家数据
        ]
    }]
};

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

案例三：城市地图可视化

案例描述

展示某个城市的交通流量数据。

实现步骤

准备城市地图数据。
使用 ECharts 地图图表类型。
配置地图参数，如地图区域、颜色渐变等。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入城市地图数据
require('echarts/map/js/beijing');
// 初始化地图图表
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: 'beijing',
        roam: false,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data: [
            {name: '东直门', value: 500},
            {name: '西直门', value: 300},
            // ... 其他区域数据
        ]
    }]
};

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

案例四：行政区划地图可视化

案例描述

展示某个省级行政区的行政区划数据。

实现步骤

准备行政区划数据。
使用 ECharts 地图图表类型。
配置地图参数，如地图区域、颜色渐变等。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入行政区划数据
require('echarts/map/js/china');
// 初始化地图图表
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: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data: [
            {name: '杭州市', value: 500},
            {name: '宁波市', value: 300},
            // ... 其他市级行政区数据
        ]
    }]
};

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

案例五：地理坐标点可视化

案例描述

展示某个地点的地理位置信息。

实现步骤

准备地理坐标数据。
使用 ECharts 地图图表类型。
配置地图参数，如地图区域、颜色渐变等。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图数据
require('echarts/map/js/world');
// 初始化地图图表
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: 'world',
        roam: false,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data: [
            {name: '北京', value: [116.405285, 39.904989]}
        ]
    }]
};

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

案例六：热力图可视化

案例描述

展示某个区域的热力分布情况。

实现步骤

准备热力图数据。
使用 ECharts 地图图表类型。
配置地图参数，如地图区域、颜色渐变等。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图数据
require('echarts/map/js/china');
// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图图表
var option = {
    title: {
        text: '某个区域的热力分布情况'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '热力分布',
        type: 'heatmap',
        mapType: 'china',
        roam: false,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data: [
            {name: '北京', value: 50},
            {name: '上海', value: 70},
            // ... 其他区域数据
        ]
    }]
};

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

案例七：路径图可视化

案例描述

展示某个区域内的路径信息。

实现步骤

准备路径图数据。
使用 ECharts 地图图表类型。
配置地图参数，如地图区域、颜色渐变等。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图数据
require('echarts/map/js/china');
// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图图表
var option = {
    title: {
        text: '某个区域内的路径信息'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '路径信息',
        type: 'lines',
        mapType: 'china',
        roam: false,
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.405285, 39.904989]},
            {name: '上海', value: [121.472644, 31.231706]},
            // ... 其他路径数据
        ]
    }]
};

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

案例八：点聚合图可视化

案例描述

展示某个区域内的点聚合信息。

实现步骤

准备点聚合图数据。
使用 ECharts 地图图表类型。
配置地图参数，如地图区域、颜色渐变等。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图数据
require('echarts/map/js/china');
// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图图表
var option = {
    title: {
        text: '某个区域内的点聚合信息'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '点聚合信息',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.405285, 39.904989]},
            {name: '上海', value: [121.472644, 31.231706]},
            // ... 其他点数据
        ],
        rippleEffect: {
            brushType: 'stroke'
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true
            },
            emphasis: {
                show: true
            }
        },
        symbolSize: function (val) {
            return val / 10;
        }
    }]
};

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

案例九：地图叠加图层可视化

案例描述

展示多个地图图层叠加的效果。

实现步骤

准备多个地图图层数据。
使用 ECharts 地图图表类型。
配置地图参数，如地图区域、颜色渐变等。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图数据
require('echarts/map/js/china');
// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图图表
var option = {
    title: {
        text: '地图叠加图层效果'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '图层1',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data: [
            {name: '北京', value: 50},
            {name: '上海', value: 70},
            // ... 其他区域数据
        ]
    }, {
        name: '图层2',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data: [
            {name: '北京', value: 30},
            {name: '上海', value: 60},
            // ... 其他区域数据
        ]
    }]
};

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

案例十：地图交互功能可视化

案例描述

展示地图的交互功能，如缩放、平移、点击等。

实现步骤

准备地图数据。
使用 ECharts 地图图表类型。
配置地图参数，如地图区域、颜色渐变等。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图数据
require('echarts/map/js/china');
// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 配置地图图表
var option = {
    title: {
        text: '地图交互功能'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '交互功能',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data: [
            {name: '北京', value: 50},
            {name: '上海', value: 70},
            // ... 其他区域数据
        ]
    }]
};

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

通过以上10个实用案例，相信你已经对 ECharts 地图图表有了初步的认识。在实际应用中，可以根据具体需求选择合适的案例进行修改和扩展。希望这篇文章能帮助你轻松掌握 ECharts 地图图表，并玩转数据可视化！

案例一：中国地图可视化

案例描述

实现步骤

代码示例

案例二：世界地图可视化

案例描述

实现步骤

代码示例

案例三：城市地图可视化

案例描述

实现步骤

代码示例

案例四：行政区划地图可视化

案例描述

实现步骤

代码示例

案例五：地理坐标点可视化

案例描述

实现步骤

代码示例

案例六：热力图可视化

案例描述

实现步骤

代码示例

案例七：路径图可视化

案例描述

实现步骤

代码示例

案例八：点聚合图可视化

案例描述

实现步骤

代码示例

案例九：地图叠加图层可视化

案例描述

实现步骤

代码示例

案例十：地图交互功能可视化

案例描述

实现步骤

代码示例

相关阅读

学会echarts，轻松制作动态图表，数据分析不再是难题

如何轻松将echarts图表导出为PDF，保存专业报告？

漯河市气候特点解析：图表解读四季变化与生活影响

手机端轻松看echarts图表：告别缩放，体验流畅互动可视化数据展示

轻松上手echarts 3D图表：如何让数据立体呈现，提升可视化效果

嘉善县行政区划大变脸：最新图表解析区域调整与影响

港珠澳大桥实时路况图解：一图看懂出行无忧

学会办公图表，工作更高效：轻松掌握Excel图表制作与技巧

LabVIEW图表制作秘籍：轻松打造炫酷可视化效果，数据展示更直观

手机达人必看：全面对比各大品牌拯救者手机参数揭秘