轻松上手echarts地图图表：30个实用案例教你玩转地理数据可视化

在当今数据可视化的世界中，ECharts 地图图表以其丰富的功能和灵活性成为了许多开发者和数据分析师的首选工具。无论是展示全球贸易数据、分析区域人口分布，还是监控城市交通流量，ECharts 地图图表都能提供直观且生动的视觉呈现。本文将带你通过30个实用案例，轻松上手 ECharts 地图图表，让你玩转地理数据可视化。

案例一：世界地图展示各国GDP排名

代码示例

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

var option = {
    title: {
        text: '世界GDP排名',
        subtext: '数据来源：世界银行'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['非洲', '欧洲', '亚洲', '南美洲', '北美洲', '大洋洲']
    },
    series: [
        {
            name: 'GDP',
            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);

案例说明

本案例展示了如何使用 ECharts 地图图表展示世界各国的 GDP 排名。通过饼图的形式，可以直观地看到各个大洲的 GDP 占比。

案例二：中国地图展示各省份人口分布

代码示例

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

var option = {
    title: {
        text: '中国各省份人口分布',
        subtext: '数据来源：国家统计局'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}万人'
    },
    visualMap: {
        min: 0,
        max: 5000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '人口',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 2154},
                {name: '天津', value: 1556},
                // ... 其他省份数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表展示中国各省份的人口分布情况。通过地图的形式，可以清晰地看到各个省份的人口数量。

案例三：城市交通流量监控

代码示例

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

var option = {
    title: {
        text: '城市交通流量监控',
        subtext: '数据来源：城市交通管理部门'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}辆'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '流量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: 800},
                {name: '上海市', value: 600},
                // ... 其他城市数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表监控城市交通流量。通过地图的形式，可以实时查看各个城市的交通流量情况。

案例四：全球疫情分布图

代码示例

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

var option = {
    title: {
        text: '全球疫情分布图',
        subtext: '数据来源：世界卫生组织'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}例'
    },
    visualMap: {
        min: 0,
        max: 100000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '病例',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '中国', value: 80000},
                {name: '美国', value: 60000},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表展示全球疫情分布情况。通过地图的形式，可以直观地看到各个国家的疫情情况。

案例五：全球贸易数据可视化

代码示例

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

var option = {
    title: {
        text: '全球贸易数据可视化',
        subtext: '数据来源：联合国贸易和发展会议'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}亿美元'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '贸易额',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '中国', value: 800},
                {name: '美国', value: 600},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表展示全球贸易数据。通过地图的形式，可以直观地看到各个国家的贸易额情况。

案例六：中国城市GDP排名

代码示例

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

var option = {
    title: {
        text: '中国城市GDP排名',
        subtext: '数据来源：国家统计局'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}亿元'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: 'GDP',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: 3000},
                {name: '上海市', value: 2500},
                // ... 其他城市数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表展示中国城市的 GDP 排名。通过地图的形式，可以清晰地看到各个城市的 GDP 情况。

案例七：中国各省份人口密度

代码示例

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

var option = {
    title: {
        text: '中国各省份人口密度',
        subtext: '数据来源：国家统计局'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}人/平方公里'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '人口密度',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: 1500},
                {name: '上海市', value: 1300},
                // ... 其他省份数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表展示中国各省份的人口密度。通过地图的形式，可以直观地看到各个省份的人口密度情况。

案例八：全球自然灾害分布图

代码示例

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

var option = {
    title: {
        text: '全球自然灾害分布图',
        subtext: '数据来源：联合国灾害风险 reduction 程序'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}次'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '灾害次数',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '中国', value: 50},
                {name: '美国', value: 30},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表展示全球自然灾害的分布情况。通过地图的形式，可以直观地看到各个国家的自然灾害次数。

案例九：中国城市空气质量排名

代码示例

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

var option = {
    title: {
        text: '中国城市空气质量排名',
        subtext: '数据来源：中国环境保护部'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}微克/立方米'
    },
    visualMap: {
        min: 0,
        max: 200,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '空气质量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: 100},
                {name: '上海市', value: 90},
                // ... 其他城市数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表展示中国城市的空气质量排名。通过地图的形式，可以直观地看到各个城市的空气质量情况。

案例十：全球水资源分布图

代码示例

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

var option = {
    title: {
        text: '全球水资源分布图',
        subtext: '数据来源：联合国教科文组织'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}立方米'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '水资源',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '中国', value: 3000},
                {name: '美国', value: 2000},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表展示全球水资源的分布情况。通过地图的形式，可以直观地看到各个国家的 水资源情况。

案例十一：中国城市人口密度与GDP关系

代码示例

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

var option = {
    title: {
        text: '中国城市人口密度与GDP关系',
        subtext: '数据来源：国家统计局'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: ['人口密度', 'GDP']
    },
    xAxis: [
        {
            type: 'value'
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '人口密度',
            type: 'scatter',
            data: [
                [1500, 3000],
                [1300, 2500],
                // ... 其他城市数据
            ]
        },
        {
            name: 'GDP',
            type: 'scatter',
            data: [
                [1500, 3000],
                [1300, 2500],
                // ... 其他城市数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表展示中国城市人口密度与 GDP 的关系。通过散点图的形式，可以直观地看到人口密度与 GDP 之间的关系。

案例十二：全球各国人口密度与GDP关系

代码示例

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

var option = {
    title: {
        text: '全球各国人口密度与GDP关系',
        subtext: '数据来源：世界银行'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: ['人口密度', 'GDP']
    },
    xAxis: [
        {
            type: 'value'
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '人口密度',
            type: 'scatter',
            data: [
                [1500, 3000],
                [1300, 2500],
                // ... 其他国家数据
            ]
        },
        {
            name: 'GDP',
            type: 'scatter',
            data: [
                [1500, 3000],
                [1300, 2500],
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表展示全球各国人口密度与 GDP 的关系。通过散点图的形式，可以直观地看到人口密度与 GDP 之间的关系。

案例十三：中国城市空气质量与GDP关系

代码示例

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

var option = {
    title: {
        text: '中国城市空气质量与GDP关系',
        subtext: '数据来源：中国环境保护部'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: ['空气质量', 'GDP']
    },
    xAxis: [
        {
            type: 'value'
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '空气质量',
            type: 'scatter',
            data: [
                [100, 3000],
                [90, 2500],
                // ... 其他城市数据
            ]
        },
        {
            name: 'GDP',
            type: 'scatter',
            data: [
                [100, 3000],
                [90, 2500],
                // ... 其他城市数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表展示中国城市空气质量与 GDP 的关系。通过散点图的形式，可以直观地看到空气质量与 GDP 之间的关系。

案例十四：全球各国空气质量与GDP关系

代码示例

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

var option = {
    title: {
        text: '全球各国空气质量与GDP关系',
        subtext: '数据来源：世界银行'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: ['空气质量', 'GDP']
    },
    xAxis: [
        {
            type: 'value'
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '空气质量',
            type: 'scatter',
            data: [
                [100, 3000],
                [90, 2500],
                // ... 其他国家数据
            ]
        },
        {
            name: 'GDP',
            type: 'scatter',
            data: [
                [100, 3000],
                [90, 2500],
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

案例说明

本案例展示了如何使用 ECharts 地图图表展示全球各国空气质量与 GDP 的关系。通过散点图的形式，可以直观地看到空气质量与 GDP 之间的关系。

案例十五：中国城市水资源与GDP关系

代码示例

”`javascript var myChart = echarts.init(document.getElementById(‘main’));

var option = {

title: {
    text