案例

新手必看！轻松学会ECharts地图图表制作：10个实用案例带你入门

2026-08-03 0 阅读

地图图表是一种非常直观的数据展示方式，它能够帮助我们更好地理解地理空间数据。ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。对于新手来说，掌握 ECharts 地图图表的制作并不是一件难事，下面我将通过 10 个实用案例，带你轻松入门 ECharts 地图图表制作。

案例一：中国地图基本展示

1.1 准备工作

首先，你需要引入 ECharts 库和对应的地图数据文件。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>

1.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: Math.round(Math.random() * 1000)},
            // ... 其他省份数据
        ]
    }]
};

myChart.setOption(option);

1.3 效果展示

通过上面的代码，你可以制作一个简单的中国地图，并显示每个省份的随机值。

案例二：全球地图基本展示

2.1 准备工作

与案例一类似，你需要引入 ECharts 库和全球地图数据文件。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>

2.2 代码实现

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

var option = {
    title: {
        text: '全球地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '全球',
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [
            {name: 'China', value: Math.round(Math.random() * 1000)},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

2.3 效果展示

使用上述代码，你可以制作一个全球地图，并显示每个国家的随机值。

案例三：中国地图数据筛选

3.1 准备工作

引入 ECharts 库和中国地图数据文件。

3.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: Math.round(Math.random() * 1000)},
            // ... 其他省份数据
        ]
    }]
};

myChart.setOption(option);

3.3 效果展示

通过修改 data 数组中的数据，你可以实现对中国地图上各个省份数据的筛选显示。

案例四：全球地图数据筛选

4.1 准备工作

引入 ECharts 库和全球地图数据文件。

4.2 代码实现

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

var option = {
    title: {
        text: '全球地图数据筛选'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '全球',
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [
            {name: 'China', value: Math.round(Math.random() * 1000)},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

4.3 效果展示

与案例三类似，你可以通过修改 data 数组中的数据，实现全球地图上各个国家的数据筛选显示。

案例五：中国地图热力图

5.1 准备工作

引入 ECharts 库和中国地图数据文件。

5.2 代码实现

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

var option = {
    title: {
        text: '中国地图热力图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            // ... 其他省份数据
        ]
    }]
};

myChart.setOption(option);

5.3 效果展示

使用上述代码，你可以制作一个热力图效果的中国地图，通过颜色深浅来表示数值大小。

案例六：全球地图热力图

6.1 准备工作

引入 ECharts 库和全球地图数据文件。

6.2 代码实现

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

var option = {
    title: {
        text: '全球地图热力图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '全球',
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [
            {name: 'China', value: Math.round(Math.random() * 1000)},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

6.3 效果展示

与案例五类似，你可以制作一个热力图效果的全球地图。

案例七：中国地图散点图

7.1 准备工作

引入 ECharts 库和中国地图数据文件。

7.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: [116.46,39.92]},
            // ... 其他省份数据
        ]
    }]
};

myChart.setOption(option);

7.3 效果展示

通过修改 data 数组中的数据，你可以制作一个散点图效果的中国地图。

案例八：全球地图散点图

8.1 准备工作

引入 ECharts 库和全球地图数据文件。

8.2 代码实现

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

var option = {
    title: {
        text: '全球地图散点图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '全球',
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [
            {name: 'China', value: [116.46,39.92]},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

8.3 效果展示

与案例七类似，你可以制作一个散点图效果的全球地图。

案例九：中国地图多级标签

9.1 准备工作

引入 ECharts 库和中国地图数据文件。

9.2 代码实现

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

var option = {
    title: {
        text: '中国地图多级标签'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            formatter: function(params) {
                return params.name + '\n' + params.value[0].toFixed(2) + '°N\n' + params.value[1].toFixed(2) + '°E';
            }
        },
        data: [
            {name: '北京', value: [116.46,39.92]},
            // ... 其他省份数据
        ]
    }]
};

myChart.setOption(option);

9.3 效果展示

通过修改 data 数组中的数据，你可以制作一个带有经纬度标签的中国地图。

案例十：全球地图多级标签

10.1 准备工作

引入 ECharts 库和全球地图数据文件。

10.2 代码实现

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

var option = {
    title: {
        text: '全球地图多级标签'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '全球',
        type: 'map',
        mapType: 'world',
        label: {
            show: true,
            formatter: function(params) {
                return params.name + '\n' + params.value[0].toFixed(2) + '°N\n' + params.value[1].toFixed(2) + '°E';
            }
        },
        data: [
            {name: 'China', value: [116.46,39.92]},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

10.3 效果展示

与案例九类似，你可以制作一个带有经纬度标签的全球地图。

通过以上 10 个实用案例，相信你已经对 ECharts 地图图表的制作有了初步的了解。在实际应用中，你可以根据自己的需求，结合各种图表类型和配置项，制作出更加丰富和美观的地图图表。祝你学习愉快！

分享到：
上一篇 “实战解析：项目实践中的almaLinux应用与优化策略”
下一篇 Java 8新特性详解：实战案例解析，提升开发效率与代码质量

相关文章

“实战解析：项目实践中的almaLinux应用与优化策略”
2026-08-03
掌握MySQL数据恢复，案例分析教你轻松找回丢失数据
2026-08-03
Java 8新特性详解：实战案例解析，提升开发效率与代码质量
2026-08-03
揭秘：如何用Tails系统守护个人隐私，真实案例教你轻松应对网络风险
2026-08-03