轻松学会echarts地图图表：20个实用案例教学，让数据展示更直观

案例一：中国省份地图展示GDP排名

ECharts地图图表可以将中国地图上的每个省份根据GDP大小进行颜色渐变展示，让用户一目了然地了解各省的GDP排名情况。以下是一个简单的实现示例：

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

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

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

案例二：全球各国人口分布地图

使用ECharts地图图表展示全球各国人口分布，通过颜色渐变来表示不同人口数量的区间。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国人口分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 200000000,
        text: ['少','多'],
        calculable: true
    },
    series: [
        {
            name: '人口',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '中国',value: 1400000000},
                {name: '印度',value: 1300000000},
                // ...其他国家数据
            ]
        }
    ]
};

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

案例三：中国城市地图展示PM2.5浓度

利用ECharts地图图表展示中国各城市PM2.5浓度，通过颜色渐变来表示不同浓度的区间。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市PM2.5浓度'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 200,
        text: ['低','高'],
        calculable: true
    },
    series: [
        {
            name: 'PM2.5浓度',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京',value: 100},
                {name: '上海',value: 90},
                // ...其他城市数据
            ]
        }
    ]
};

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

案例四：全球各国货币汇率变化

使用ECharts地图图表展示全球各国货币汇率变化，通过折线图的形式展示各国货币的涨跌情况。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国货币汇率变化'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['美元', '欧元', '日元', '人民币']
    },
    xAxis: {
        type: 'category',
        data: ['美国', '英国', '德国', '法国', '日本', '中国', '印度']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '美元',
            type: 'line',
            data: [1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7]
        },
        {
            name: '欧元',
            type: 'line',
            data: [0.9, 0.95, 0.9, 0.8, 0.85, 0.8, 0.75]
        },
        // ...其他货币数据
    ]
};

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

案例五：中国城市交通拥堵情况

利用ECharts地图图表展示中国城市交通拥堵情况，通过颜色渐变来表示不同拥堵等级的区域。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市交通拥堵情况'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 100,
        text: ['畅通', '拥堵'],
        calculable: true
    },
    series: [
        {
            name: '交通拥堵情况',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京',value: 80},
                {name: '上海',value: 90},
                // ...其他城市数据
            ]
        }
    ]
};

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

案例六：全球各国旅游热度地图

使用ECharts地图图表展示全球各国旅游热度，通过颜色渐变来表示不同热度等级的区域。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国旅游热度'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 100,
        text: ['低', '高'],
        calculable: true
    },
    series: [
        {
            name: '旅游热度',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '中国',value: 90},
                {name: '泰国',value: 80},
                // ...其他国家数据
            ]
        }
    ]
};

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

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

利用ECharts地图图表展示中国城市房价走势，通过折线图的形式展示不同城市的房价变化情况。以下是一个简单的实现示例：

// 基于准备好的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', '2022']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '北京',
            type: 'line',
            data: [80000, 85000, 90000, 95000]
        },
        {
            name: '上海',
            type: 'line',
            data: [120000, 125000, 130000, 135000]
        },
        // ...其他城市数据
    ]
};

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

案例八：全球各国电商市场规模

使用ECharts地图图表展示全球各国电商市场规模，通过颜色渐变来表示不同市场规模的大小。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国电商市场规模'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 1000000000,
        text: ['小', '大'],
        calculable: true
    },
    series: [
        {
            name: '电商市场规模',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '中国',value: 1000000000},
                {name: '美国',value: 800000000},
                // ...其他国家数据
            ]
        }
    ]
};

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

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

利用ECharts地图图表展示中国城市人口密度分布，通过颜色渐变来表示不同人口密度的区域。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市人口密度分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 10000,
        text: ['低', '高'],
        calculable: true
    },
    series: [
        {
            name: '人口密度',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京',value: 10000},
                {name: '上海',value: 12000},
                // ...其他城市数据
            ]
        }
    ]
};

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

案例十：全球各国平均寿命

使用ECharts地图图表展示全球各国平均寿命，通过颜色渐变来表示不同平均寿命的区间。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国平均寿命'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type: 'continuous',
        min: 50,
        max: 90,
        text: ['低', '高'],
        calculable: true
    },
    series: [
        {
            name: '平均寿命',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '中国',value: 75},
                {name: '日本',value: 85},
                // ...其他国家数据
            ]
        }
    ]
};

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

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

利用ECharts地图图表展示中国城市空气质量指数，通过颜色渐变来表示不同空气质量指数的区间。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市空气质量指数'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 100,
        text: ['优', '差'],
        calculable: true
    },
    series: [
        {
            name: '空气质量指数',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京',value: 60},
                {name: '上海',value: 70},
                // ...其他城市数据
            ]
        }
    ]
};

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

案例十二：全球各国互联网普及率

使用ECharts地图图表展示全球各国互联网普及率，通过颜色渐变来表示不同普及率的区间。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国互联网普及率'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 100,
        text: ['低', '高'],
        calculable: true
    },
    series: [
        {
            name: '互联网普及率',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '中国',value: 90},
                {name: '美国',value: 85},
                // ...其他国家数据
            ]
        }
    ]
};

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

案例十三：中国城市教育水平分布

利用ECharts地图图表展示中国城市教育水平分布，通过颜色渐变来表示不同教育水平的区域。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市教育水平分布'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 100,
        text: ['低', '高'],
        calculable: true
    },
    series: [
        {
            name: '教育水平',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京',value: 80},
                {name: '上海',value: 85},
                // ...其他城市数据
            ]
        }
    ]
};

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

案例十四：全球各国GDP总量

使用ECharts地图图表展示全球各国GDP总量，通过颜色渐变来表示不同GDP总量的区间。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '全球各国GDP总量'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 1000000000000,
        text: ['少', '多'],
        calculable: true
    },
    series: [
        {
            name: 'GDP总量',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '中国',value: 1000000000000},
                {name: '美国',value: 900000000000},
                // ...其他国家数据
            ]
        }
    ]
};

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

案例十五：中国城市人口增长趋势

利用ECharts地图图表展示中国城市人口增长趋势，通过折线图的形式展示不同城市的人口增长情况。以下是一个简单的实现示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国城市人口增长趋势'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['北京', '上海', '广州', '深圳']
    },
    xAxis: {
        type: 'category',
        data: ['2010', '2015', '2020', '2025']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '北京',
            type: 'line',
            data: [100000000, 120000000, 150000000, 180000000]
        },
        {
            name: '上海',
            type: 'line',
            data: [120000000, 140000000, 160000000, 180000000]
        },
        // ...其他城市数据
    ]
};

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

案例十六：全球各国人口出生率与死亡率

使用ECharts地图图表展示全球各国人口出生率与死亡率，通过颜色渐变来表示