轻松上手echarts地图图表：5个实用案例带你玩转中国各省市数据展示

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括地图图表。地图图表可以用来展示地理分布数据，非常适合展示中国各省市的数据。下面，我将通过5个实用案例，带你轻松上手 ECharts 地图图表，并学会如何玩转中国各省市数据展示。

案例一：中国各省市GDP排名

1.1 准备数据

首先，我们需要准备中国各省市GDP的数据。以下是一个简单的数据示例：

var data = [
    {name: '北京', value: 30000},
    {name: '上海', value: 28000},
    {name: '广东', value: 25000},
    // ... 其他省市数据
];

1.2 配置 ECharts 地图图表

接下来，我们需要配置 ECharts 地图图表。以下是一个基本的配置示例：

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

var option = {
    title: {
        text: '中国各省市GDP排名',
        subtext: '数据来源：某统计年鉴',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 30000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: 'GDP',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: data
        }
    ]
};

myChart.setOption(option);

1.3 效果展示

通过上述配置，我们可以得到一个展示中国各省市GDP排名的地图图表。

案例二：中国各省市人口密度

2.1 准备数据

准备中国各省市的人口密度数据，以下是一个简单的数据示例：

var data = [
    {name: '北京', value: 2000},
    {name: '上海', value: 3000},
    {name: '广东', value: 1500},
    // ... 其他省市数据
];

2.2 配置 ECharts 地图图表

配置 ECharts 地图图表，与案例一类似：

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

var option = {
    title: {
        text: '中国各省市人口密度',
        subtext: '数据来源：某统计年鉴',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 3000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '人口密度',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: data
        }
    ]
};

myChart.setOption(option);

2.3 效果展示

通过上述配置，我们可以得到一个展示中国各省市人口密度的地图图表。

案例三：中国各省市空气质量指数

3.1 准备数据

准备中国各省市空气质量指数的数据，以下是一个简单的数据示例：

var data = [
    {name: '北京', value: 100},
    {name: '上海', value: 80},
    {name: '广东', value: 60},
    // ... 其他省市数据
];

3.2 配置 ECharts 地图图表

配置 ECharts 地图图表，与案例一类似：

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

var option = {
    title: {
        text: '中国各省市空气质量指数',
        subtext: '数据来源：某空气质量监测平台',
        left: 'center'
    },
    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: data
        }
    ]
};

myChart.setOption(option);

3.3 效果展示

通过上述配置，我们可以得到一个展示中国各省市空气质量指数的地图图表。

案例四：中国各省市人均可支配收入

4.1 准备数据

准备中国各省市人均可支配收入的数据，以下是一个简单的数据示例：

var data = [
    {name: '北京', value: 30000},
    {name: '上海', value: 28000},
    {name: '广东', value: 25000},
    // ... 其他省市数据
];

4.2 配置 ECharts 地图图表

配置 ECharts 地图图表，与案例一类似：

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

var option = {
    title: {
        text: '中国各省市人均可支配收入',
        subtext: '数据来源：某统计年鉴',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 30000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '人均可支配收入',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: data
        }
    ]
};

myChart.setOption(option);

4.3 效果展示

通过上述配置，我们可以得到一个展示中国各省市人均可支配收入的地图图表。

案例五：中国各省市旅游人数

5.1 准备数据

准备中国各省市旅游人数的数据，以下是一个简单的数据示例：

var data = [
    {name: '北京', value: 1000000},
    {name: '上海', value: 800000},
    {name: '广东', value: 600000},
    // ... 其他省市数据
];

5.2 配置 ECharts 地图图表

配置 ECharts 地图图表，与案例一类似：

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

var option = {
    title: {
        text: '中国各省市旅游人数',
        subtext: '数据来源：某旅游统计平台',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '旅游人数',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: data
        }
    ]
};

myChart.setOption(option);

5.3 效果展示

通过上述配置，我们可以得到一个展示中国各省市旅游人数的地图图表。

通过以上5个案例，相信你已经掌握了 ECharts 地图图表的基本用法。在实际应用中，你可以根据自己的需求，调整数据、配置和样式，制作出更多丰富多彩的地图图表。祝你在数据可视化领域取得更好的成绩！