轻松上手echarts地图图表：30个实用案例解析，让你轻松绘制地图数据可视化

ECharts 地图图表是一种非常强大的数据可视化工具，它可以帮助我们以直观的方式展示地理空间数据。在这篇文章中，我将为你介绍 ECharts 地图图表的30个实用案例，通过这些案例，你可以轻松掌握如何绘制各种地图数据可视化图表。

1. 中国省市区地图

案例描述：展示中国各省、市、区的数据分布。

代码示例：

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: true,
            label: {
                show: false
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

2. 世界地图

案例描述：展示全球各国或地区的数据分布。

代码示例：

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: 'world',
            roam: true,
            label: {
                show: false
            },
            data: [
                {name: '中国',value: Math.round(Math.random() * 1000)},
                {name: '美国',value: Math.round(Math.random() * 1000)},
                // ... 其他国家
            ]
        }
    ]
};

myChart.setOption(option);

3. 热力图

案例描述：展示地理空间的热力分布情况。

代码示例：

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

var option = {
    title: {
        text: '热力图',
        subtext: '数据来自某天气服务',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: -50,
        max: 50,
        left: 'left',
        top: 'bottom',
        text: ['低','高'],
        calculable: true
    },
    series: [
        {
            name: '热力图',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                [120.46, 31.23, 30],
                [120.45, 31.23, -30],
                // ... 其他点
            ]
        }
    ]
};

myChart.setOption(option);

4. 地图缩放与旋转

案例描述：通过交互方式实现地图的缩放与旋转。

代码示例：

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

var option = {
    title: {
        text: '地图缩放与旋转',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '地图',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

5. 地图多级联动

案例描述：展示多级联动地图，例如展示某个省份下各市的数据分布。

代码示例：

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

var option = {
    title: {
        text: '多级联动地图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '多级联动地图',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {
                    name: '北京',
                    children: [
                        {name: '北京市',value: Math.round(Math.random() * 1000)},
                        // ... 其他市区
                    ]
                },
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

6. 地图自定义标签

案例描述：在地图上添加自定义标签，例如标注某个地点。

代码示例：

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

var option = {
    title: {
        text: '自定义标签',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '自定义标签',
            type: 'map',
            mapType: 'china',
            label: {
                show: true,
                position: 'right',
                formatter: '{b}: {c}'
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

7. 地图渐变色

案例描述：设置地图的渐变色，使数据可视化更直观。

代码示例：

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

var option = {
    title: {
        text: '地图渐变色',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae6b', '#f46d43', '#d73027', '#a50026']
        }
    },
    series: [
        {
            name: '地图渐变色',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

8. 地图动画效果

案例描述：为地图添加动画效果，使数据展示更生动。

代码示例：

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

var option = {
    title: {
        text: '地图动画效果',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '地图动画效果',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ],
            animation: true,
            animationDuration: 1000
        }
    ]
};

myChart.setOption(option);

9. 地图多系列叠加

案例描述：在地图上叠加多个系列，例如展示人口和GDP数据。

代码示例：

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

var option = {
    title: {
        text: '地图多系列叠加',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: [
        {
            type: 'continuous',
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['低','高'],
            calculable: true,
            seriesIndex: 0
        },
        {
            type: 'continuous',
            min: 0,
            max: 100,
            left: 'right',
            top: 'bottom',
            text: ['低','高'],
            calculable: true,
            seriesIndex: 1
        }
    ],
    series: [
        {
            name: '人口',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        },
        {
            name: 'GDP',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

10. 地图自定义颜色

案例描述：自定义地图颜色，使数据可视化更具有个性化。

代码示例：

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

var option = {
    title: {
        text: '自定义颜色',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['低','高'],
        calculable: true,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae6b', '#f46d43', '#d73027', '#a50026']
        }
    },
    series: [
        {
            name: '自定义颜色',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

11. 地图缩略图

案例描述：展示地图的缩略图，方便用户快速了解整体情况。

代码示例：

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

var option = {
    title: {
        text: '地图缩略图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['低','高'],
        calculable: true
    },
    series: [
        {
            name: '地图缩略图',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ],
            zoom: 0.5,
            center: [105, 35]
        }
    ]
};

myChart.setOption(option);

12. 地图点击事件

案例描述：为地图添加点击事件，实现交互功能。

代码示例：

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

var option = {
    title: {
        text: '地图点击事件',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '地图点击事件',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }
    ]
};

myChart.on('click', function (params) {
    alert(params.name);
});

myChart.setOption(option);

13. 地图缩放与平移

案例描述：实现地图的缩放和平移功能。

代码示例：

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

var option = {
    title: {
        text: '地图缩放与平移',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '地图缩放与平移',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

14. 地图多级联动交互

案例描述：实现多级联动交互，例如点击省份显示市区数据。

代码示例：

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

var option = {
    title: {
        text: '多级联动交互',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '多级联动交互',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {
                    name: '北京',
                    children: [
                        {name: '北京市',value: Math.round(Math.random() * 1000)},
                        // ... 其他市区
                    ]
                },
                // ... 其他省份
            ]
        }
    ]
};

myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        var children = params.data.children;
        if (children && children.length > 0) {
            myChart.setOption({
                series: [{
                    data: children
                }]
            });
        } else {
            myChart.setOption({
                series: [{
                    data: []
                }]
            });
        }
    }
});

myChart.setOption(option);

15. 地图自定义形状

案例描述：自定义地图形状，例如将省份裁剪成特定的形状。

代码示例：

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

var option = {
    title: {
        text: '自定义形状',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '自定义形状',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {
                    name: '北京',
                    itemStyle: {
                        areaColor: '#f00'
                    }
                },
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

16. 地图多级联动数据

案例描述：实现多级联动数据，例如展示某个省份下各市的数据。

代码示例：

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

var option = {
    title: {
        text: '多级联动数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '多级联动数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false
            },
            data: [
                {
                    name: '北京',
                    children: [
                        {name: '北京市',value: Math.round(Math.random() * 1000)},
                        // ... 其他市区
                    ]
                },
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

17. 地图自定义文本

案例描述：在地图上添加自定义文本，例如标注某个地点的名称。

代码示例：

”`javascript var myChart = echarts.init(document.getElementById(‘main’));

var option = {

title: {
    text: '自定义文本',
    left: 'center'
},
tooltip: {
    trigger: 'item'
},
series: [
    {
        name: '自定义