教你轻松制作echarts地图图表：30个实用案例解析，助你数据可视化入门

引言

在当今信息爆炸的时代，数据可视化成为了展示和分析数据的重要手段。ECharts 作为一款功能强大的 JavaScript 图表库，提供了丰富的图表类型，其中地图图表因其直观性和实用性，在数据展示中占据重要地位。本文将为你带来 30 个 ECharts 地图图表的实用案例解析，帮助你轻松入门数据可视化。

案例一：中国地图省份分布

案例描述

展示中国各省份的人口数量分布情况。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图省份人口分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '人口数量',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 2154},
                {name: '上海', value: 2425},
                // ... 其他省份数据
            ]
        }
    ]
};

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

案例解析

本案例通过引入中国地图数据，展示了中国各省份的人口数量分布情况。通过 visualMap 组件设置了数值范围和颜色映射，使数据更加直观。

案例二：全球疫情地图

案例描述

展示全球各国新冠疫情的确诊人数。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球疫情地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + ': ' + params.value;
        }
    },
    visualMap: {
        min: 0,
        max: 100000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '确诊人数',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '中国', value: 83000},
                {name: '美国', value: 50000},
                // ... 其他国家数据
            ]
        }
    ]
};

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

案例解析

本案例展示了全球各国新冠疫情的确诊人数。通过 visualMap 组件设置了数值范围和颜色映射，使数据更加直观。

案例三：中国城市GDP排名

案例描述

展示中国各城市的 GDP 排名。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市 GDP 排名'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 3000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: 'GDP',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 3000},
                {name: '上海', value: 2800},
                // ... 其他城市数据
            ]
        }
    ]
};

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

案例解析

本案例展示了中国各城市的 GDP 排名。通过 visualMap 组件设置了数值范围和颜色映射，使数据更加直观。

案例四：全球城市人口密度

案例描述

展示全球各城市的人口密度。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球城市人口密度'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + ': ' + params.value;
        }
    },
    visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '人口密度',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 1000},
                {name: '上海', value: 1200},
                // ... 其他城市数据
            ]
        }
    ]
};

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

案例解析

本案例展示了全球各城市的人口密度。通过 visualMap 组件设置了数值范围和颜色映射，使数据更加直观。

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

案例描述

展示中国各城市的空气质量排名。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
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: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 80},
                {name: '上海', value: 90},
                // ... 其他城市数据
            ]
        }
    ]
};

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

案例解析

本案例展示了中国各城市的空气质量排名。通过 visualMap 组件设置了数值范围和颜色映射，使数据更加直观。

案例六：全球城市经济总量排名

案例描述

展示全球各城市的经济总量排名。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球城市经济总量排名'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + ': ' + params.value;
        }
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '经济总量',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 500},
                {name: '上海', value: 600},
                // ... 其他城市数据
            ]
        }
    ]
};

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

案例解析

本案例展示了全球各城市的经济总量排名。通过 visualMap 组件设置了数值范围和颜色映射，使数据更加直观。

案例七：中国城市房价走势

案例描述

展示中国各城市房价走势。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市房价走势'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['北京', '上海', '广州', '深圳']
    },
    xAxis: {
        type: 'category',
        data: ['2019年', '2020年', '2021年']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '北京',
            type: 'line',
            data: [10000, 12000, 15000]
        },
        {
            name: '上海',
            type: 'line',
            data: [8000, 10000, 13000]
        },
        {
            name: '广州',
            type: 'line',
            data: [6000, 7000, 9000]
        },
        {
            name: '深圳',
            type: 'line',
            data: [9000, 11000, 16000]
        }
    ]
};

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

案例解析

本案例展示了中国各城市房价走势。通过 line 图形，展示了各城市房价随时间的变化趋势。

案例八：全球城市人口增长趋势

案例描述

展示全球各城市人口增长趋势。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球城市人口增长趋势'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['北京', '上海', '广州', '深圳']
    },
    xAxis: {
        type: 'category',
        data: ['2019年', '2020年', '2021年']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '北京',
            type: 'line',
            data: [2000, 2500, 3000]
        },
        {
            name: '上海',
            type: 'line',
            data: [1500, 2000, 2500]
        },
        {
            name: '广州',
            type: 'line',
            data: [1000, 1500, 2000]
        },
        {
            name: '深圳',
            type: 'line',
            data: [3000, 3500, 4000]
        }
    ]
};

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

案例解析

本案例展示了全球各城市人口增长趋势。通过 line 图形，展示了各城市人口随时间的变化趋势。

案例九：中国城市降水量分布

案例描述

展示中国各城市的降水量分布。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
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: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 50},
                {name: '上海', value: 60},
                // ... 其他城市数据
            ]
        }
    ]
};

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

案例解析

本案例展示了中国各城市的降水量分布。通过 visualMap 组件设置了数值范围和颜色映射，使数据更加直观。

案例十：全球城市平均气温

案例描述

展示全球各城市的平均气温。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球城市平均气温'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + ': ' + params.value;
        }
    },
    visualMap: {
        min: 0,
        max: 30,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '平均气温',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 15},
                {name: '上海', value: 18},
                // ... 其他城市数据
            ]
        }
    ]
};

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

案例解析

本案例展示了全球各城市的平均气温。通过 visualMap 组件设置了数值范围和颜色映射，使数据更加直观。

案例十一：中国城市空气质量变化

案例描述

展示中国各城市空气质量变化。

代码示例

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市空气质量变化'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['北京', '上海', '广州', '深圳']
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '北京',
            type: 'line',
            data: [80, 85, 90, 95, 100, 105, 110, 115, 120, 125, 130, 135]
        },
        {
            name: '上海',
            type: 'line',
            data: [70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120, 125]
        },
        {
            name: '广州',
            type: 'line',
            data: [60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115]
        },
        {
            name: '深圳',
            type: 'line',
            data: [50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105]
        }
    ]
};

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

案例解析

本案例展示了中国各城市空气质量变化。通过 line 图形，展示了各城市空气质量随时间的变化趋势。

案例十二：全球城市经济变化

###