新手必看！轻松上手echarts地图图表，10个实用案例带你玩转数据可视化

引言

在数据可视化的世界里，地图图表是一种非常强大且引人入胜的工具。它可以帮助我们直观地展示地理分布数据，揭示空间趋势和模式。ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。对于新手来说，ECharts 地图图表可能有些复杂，但不用担心，本文将为你提供10个实用案例，带你轻松上手，玩转数据可视化。

案例一：世界人口分布

1.1 案例描述

使用 ECharts 地图图表展示全球人口分布情况。

1.2 实现步骤

准备世界地图数据。
设置地图图表的基本配置。
使用 echarts.init() 初始化图表。
使用 setOption() 方法设置图表的配置项。

1.3 代码示例

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

var option = {
    title: {
        text: '世界人口分布'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['亚洲', '非洲', '欧洲', '北美洲', '南美洲', '大洋洲']
    },
    series: [
        {
            name: '人口',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '亚洲'},
                {value: 310, name: '非洲'},
                {value: 234, name: '欧洲'},
                {value: 135, name: '北美洲'},
                {value: 1548, name: '南美洲'},
                {value: 1548, name: '大洋洲'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

myChart.setOption(option);

案例二：中国34个省级行政区人口分布

2.1 案例描述

使用 ECharts 地图图表展示中国34个省级行政区的人口分布情况。

2.2 实现步骤

准备中国地图数据。
设置地图图表的基本配置。
使用 echarts.init() 初始化图表。
使用 setOption() 方法设置图表的配置项。

2.3 代码示例

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

var option = {
    title: {
        text: '中国34个省级行政区人口分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 130000000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '人口',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                // 省级行政区人口数据
            ]
        }
    ]
};

myChart.setOption(option);

案例三：城市交通流量分析

3.1 案例描述

使用 ECharts 地图图表展示城市交通流量分析结果。

3.2 实现步骤

准备城市地图数据。
设置地图图表的基本配置。
使用 echarts.init() 初始化图表。
使用 setOption() 方法设置图表的配置项。

3.3 代码示例

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

var option = {
    title: {
        text: '城市交通流量分析'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '交通流量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                // 城市交通流量数据
            ]
        }
    ]
};

myChart.setOption(option);

案例四：全球疫情地图

4.1 案例描述

使用 ECharts 地图图表展示全球疫情地图。

4.2 实现步骤

准备全球疫情数据。
设置地图图表的基本配置。
使用 echarts.init() 初始化图表。
使用 setOption() 方法设置图表的配置项。

4.3 代码示例

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

var option = {
    title: {
        text: '全球疫情地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '疫情数据',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                // 全球疫情数据
            ]
        }
    ]
};

myChart.setOption(option);

案例五：中国城市GDP分布

5.1 案例描述

使用 ECharts 地图图表展示中国城市GDP分布情况。

5.2 实现步骤

准备中国城市GDP数据。
设置地图图表的基本配置。
使用 echarts.init() 初始化图表。
使用 setOption() 方法设置图表的配置项。

5.3 代码示例

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

var option = {
    title: {
        text: '中国城市GDP分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 300000000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: 'GDP',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                // 中国城市GDP数据
            ]
        }
    ]
};

myChart.setOption(option);

案例六：全球自然灾害分布

6.1 案例描述

使用 ECharts 地图图表展示全球自然灾害分布情况。

6.2 实现步骤

准备全球自然灾害数据。
设置地图图表的基本配置。
使用 echarts.init() 初始化图表。
使用 setOption() 方法设置图表的配置项。

6.3 代码示例

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: 'world',
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                // 全球自然灾害数据
            ]
        }
    ]
};

myChart.setOption(option);

案例七：中国城市人口密度分布

7.1 案例描述

使用 ECharts 地图图表展示中国城市人口密度分布情况。

7.2 实现步骤

准备中国城市人口密度数据。
设置地图图表的基本配置。
使用 echarts.init() 初始化图表。
使用 setOption() 方法设置图表的配置项。

7.3 代码示例

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: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                // 中国城市人口密度数据
            ]
        }
    ]
};

myChart.setOption(option);

案例八：全球城市人口分布

8.1 案例描述

使用 ECharts 地图图表展示全球城市人口分布情况。

8.2 实现步骤

准备全球城市人口数据。
设置地图图表的基本配置。
使用 echarts.init() 初始化图表。
使用 setOption() 方法设置图表的配置项。

8.3 代码示例

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

var option = {
    title: {
        text: '全球城市人口分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 10000000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '人口',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                // 全球城市人口数据
            ]
        }
    ]
};

myChart.setOption(option);

案例九：中国城市空气质量指数

9.1 案例描述

使用 ECharts 地图图表展示中国城市空气质量指数。

9.2 实现步骤

准备中国城市空气质量指数数据。
设置地图图表的基本配置。
使用 echarts.init() 初始化图表。
使用 setOption() 方法设置图表的配置项。

9.3 代码示例

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

var option = {
    title: {
        text: '中国城市空气质量指数'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 500,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '空气质量指数',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                // 中国城市空气质量指数数据
            ]
        }
    ]
};

myChart.setOption(option);

案例十：全球城市经济总量分布

10.1 案例描述

使用 ECharts 地图图表展示全球城市经济总量分布情况。

10.2 实现步骤

准备全球城市经济总量数据。
设置地图图表的基本配置。
使用 echarts.init() 初始化图表。
使用 setOption() 方法设置图表的配置项。

10.3 代码示例

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

var option = {
    title: {
        text: '全球城市经济总量分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000000000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '经济总量',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                // 全球城市经济总量数据
            ]
        }
    ]
};

myChart.setOption(option);

总结

通过以上10个实用案例，相信你已经对 ECharts 地图图表有了初步的了解。在实际应用中，你可以根据自己的需求调整图表的样式、数据等配置项。希望这些案例能够帮助你轻松上手，玩转数据可视化。