新手必看！轻松掌握ECharts地图图表制作技巧，20个实用案例详解

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

首先，让我们从最基础的地图展示开始。使用ECharts制作中国地图，你需要以下步骤：

引入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: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ]
        }
    ]
};

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

案例二：美国地图数据可视化

接下来，我们将展示如何使用ECharts制作美国地图并可视化数据。

引入ECharts库和美国地图数据。
初始化地图实例。
加载美国地图数据。
配置地图样式。

代码示例：

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

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '美国地图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['California', 'New York', 'Texas']
    },
    series: [
        {
            name: 'Population',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: 'California'},
                {value: 310, name: 'New York'},
                {value: 234, name: 'Texas'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

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

案例三：全球地图数据展示

现在，让我们看看如何制作全球地图并展示数据。

引入ECharts库和全球地图数据。
初始化地图实例。
加载全球地图数据。
配置地图样式。

代码示例：

// 引入 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'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: 'China', value: Math.round(Math.random() * 1000)},
                {name: 'United States', value: Math.round(Math.random() * 1000)}
            ]
        }
    ]
};

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

案例四：自定义地图展示

有时，你可能需要制作一个自定义的地图。以下是一个案例，展示如何创建一个自定义地图并展示数据。

引入ECharts库和自定义地图数据。
初始化地图实例。
加载自定义地图数据。
配置地图样式。

代码示例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入自定义地图数据
require('echarts/map/js/customMap');

// 基于准备好的dom，初始化echarts实例
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: 'customMap',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: 'A', value: Math.round(Math.random() * 1000)},
                {name: 'B', value: Math.round(Math.random() * 1000)}
            ]
        }
    ]
};

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

案例五：交互式地图

交互式地图可以让用户与地图进行互动。以下是一个示例，展示如何制作一个交互式地图。

引入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'
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ],
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        }
    ]
};

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

案例六：地图热力图

热力图可以展示地图上不同地区的密集程度。以下是一个示例，展示如何制作地图热力图。

引入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',
        formatter: '人口密度：{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '人口密度',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46,39.92,100]},
                {name: '上海', value: [121.48,31.22,200]}
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }
    ]
};

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

案例七：地图组合图

组合图可以在一个图表中展示多种类型的数据。以下是一个示例，展示如何制作地图组合图。

引入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: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ],
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        {
            name: '人口密度',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46,39.92,100]},
                {name: '上海', value: [121.48,31.22,200]}
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }
    ]
};

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

案例八：地图动画

地图动画可以让图表更加生动。以下是一个示例，展示如何制作地图动画。

引入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'
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ],
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            animation: true
        }
    ]
};

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

案例九：地图缩放和漫游

地图缩放和漫游功能可以让用户更方便地查看地图的不同区域。以下是一个示例，展示如何制作具有缩放和漫游功能的地图。

引入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'
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: 'china',
            roam: true, // 开启地图的缩放和漫游功能
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ],
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        }
    ]
};

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

案例十：地图点击事件

地图点击事件可以让用户通过点击地图上的不同区域来获取信息。以下是一个示例，展示如何制作具有点击事件的地图。

引入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'
    },
    series: [
        {
            name: '销量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ],
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            click: function(params) {
                // 点击事件处理逻辑
                console.log(params.name + ': ' + params.value);
            }
        }
    ]
};

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

案例十一：地图缩略图

缩略图可以提供一个地图的快速预览。以下是一个示例，展示如何制作地图缩略图。

引入ECharts库和地图数据。
初始化地图实例。
加载地图数据。
配置地图样式。
添加缩略图。

代码示例：

”`javascript // 引入 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'
},
series: [
    {
        name: '销量',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '广东', value: Math.round(Math.random() * 1000)}
        ],
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        tooltip: {
            show: false
        },
        zoom: 1.2,
        top: 10,
        left: 10
    },
    {
        name: '缩略图',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '广东',

正文

新手必看！轻松掌握ECharts地图图表制作技巧，20个实用案例详解

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

案例二：美国地图数据可视化

案例三：全球地图数据展示

案例四：自定义地图展示

案例五：交互式地图

案例六：地图热力图

案例七：地图组合图

案例八：地图动画

案例九：地图缩放和漫游

案例十：地图点击事件

案例十一：地图缩略图

相关阅读

掌握TensorFlow，从这些实战案例中学编程与机器学习！

解锁项目新篇章：探索 AlmaLinux 的最佳应用场景及成功案例解析

如何轻松应对MySQL数据库崩溃：实战数据恢复案例全解析

探索多媒体教学新方式：精选案例教你轻松打造高效互动课堂

探索多媒体教学魅力：案例解析，助力孩子快乐学习新方法

如何用MongoDB轻松应对海量数据挑战：实战案例分析及优化技巧

顾浩整形前后的真实对比：揭秘如何科学变美，轻松拥有明星范儿

揭秘顾红光案：法律视角下的企业合规与个人责任案例分析

揭秘顾问式服务如何助力企业成功转型：客户案例深度解析

揭秘顾问式案例分析：如何从实战中学习解决问题的智慧