新手必看！轻松上手echarts地图图表，5个实用案例教学，让数据可视化更简单

在数据可视化的世界中，地图图表是一种非常直观且富有表现力的工具。它可以帮助我们更好地理解地理分布数据，揭示地域之间的联系和差异。echarts 是一个功能强大的 JavaScript 图表库，支持多种图表类型，包括地图图表。今天，我们就来聊聊如何轻松上手 echarts 地图图表，并通过 5 个实用案例教学，让你快速掌握这项技能。

1. 地图图表基础

什么是地图图表？

地图图表是一种以地图为背景，将数据点、数据面或数据路径以可视化形式展现的图表。在 echarts 中，地图图表可以展示各种地理分布数据，如人口分布、经济指标、资源分布等。

echarts 地图图表的特点

• 支持多种地图类型，如中国地图、世界地图、行政区划地图等；
• 支持自定义地图样式，如颜色、标记、标签等；
• 支持多种数据系列，如散点、柱状、折线等；
• 支持交互功能，如缩放、平移、点击事件等。

2. 实用案例教学

案例 1：中国地图人口分布

2.1 准备工作

1. 引入 echarts 库：<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>;
2. 引入中国地图数据：<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/map/js/china.js"></script>。

2.2 代码示例

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

var option = {
    title: {
        text: '中国地图人口分布'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '人口',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 2100},
                {name: '上海', value: 2400},
                // ... 其他省市数据
            ]
        }
    ]
};

myChart.setOption(option);

2.3 效果展示

案例 2：世界地图国家面积

2.1 准备工作

1. 引入 echarts 库：<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>;
2. 引入世界地图数据：<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/map/js/world.js"></script>。

2.2 代码示例

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

var option = {
    title: {
        text: '世界地图国家面积'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} km²'
    },
    series: [
        {
            name: '国家面积',
            type: 'map',
            mapType: 'world',
            label: {
                show: true
            },
            data: [
                {name: 'China', value: 9600000},
                {name: 'United States', value: 9629091},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

2.3 效果展示

案例 3：行政区划地图省市区分布

2.1 准备工作

1. 引入 echarts 库：<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>;
2. 引入行政区划地图数据：<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/map/js/china.js"></script>。

2.2 代码示例

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

var option = {
    title: {
        text: '行政区划地图省市区分布'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            name: '省市区',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: 2100},
                {name: '上海市', value: 2400},
                // ... 其他省市区数据
            ]
        }
    ]
};

myChart.setOption(option);

2.3 效果展示

案例 4：地图图表动态效果

2.1 准备工作

1. 引入 echarts 库：<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>;
2. 引入行政区划地图数据：<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/map/js/china.js"></script>。

2.2 代码示例

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

var option = {
    title: {
        text: '地图图表动态效果'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            name: '动态效果',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: 2100},
                {name: '上海市', value: 2400},
                // ... 其他省市区数据
            ]
        }
    ]
};

myChart.setOption(option);

// 动态效果
myChart.showLoading();
setTimeout(function () {
    myChart.hideLoading();
}, 1000);

2.3 效果展示

案例 5：地图图表与数据联动

2.1 准备工作

1. 引入 echarts 库：<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>;
2. 引入行政区划地图数据：<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/map/js/china.js"></script>。

2.2 代码示例

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

var option = {
    title: {
        text: '地图图表与数据联动'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            name: '联动效果',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: 2100},
                {name: '上海市', value: 2400},
                // ... 其他省市区数据
            ]
        }
    ]
};

myChart.setOption(option);

// 与数据联动
myChart.on('click', function (params) {
    console.log(params.name + ': ' + params.value);
});

2.3 效果展示

通过以上 5 个实用案例，相信你已经对 echarts 地图图表有了初步的了解。在实际应用中，你可以根据自己的需求，调整地图类型、数据、样式等参数，创作出更多精彩的数据可视化作品。祝你学习愉快！