轻松上手ECharts地图图表：20个实用案例教你绘制各种地图可视化

ECharts 地图图表是一种强大的数据可视化工具，可以帮助我们以直观的方式展示地理信息。通过 ECharts，我们可以轻松地将各种地理数据映射到地图上，实现丰富的视觉效果。本文将为你提供20个实用案例，让你快速掌握ECharts地图图表的绘制技巧。

案例一：中国地图

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他省份
            ]
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了中国地图的基本绘制方法，通过设置 map 属性为 'china'，即可展示中国地图。同时，通过 data 属性，我们可以添加各个省份的数据。

案例二：世界地图

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'world',
            label: {
                show: true
            },
            data: [
                {name: 'United States', value: Math.round(Math.random() * 1000)},
                {name: 'Canada', value: Math.round(Math.random() * 1000)},
                // ... 其他国家
            ]
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了世界地图的基本绘制方法，与绘制中国地图类似，只需将 map 属性设置为 'world' 即可。

案例三：省市区联动地图

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ]
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何绘制省市区联动地图，通过在 data 属性中添加各个省市区数据，即可实现联动效果。

案例四：多层级地图

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ]
        },
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ]
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何绘制多层级地图，通过添加多个 series 元素，并设置相同的 map 属性，即可实现多层级效果。

案例五：地图动画效果

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ],
            animation: true
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了地图动画效果，通过设置 animation 属性为 true，即可实现动画效果。

案例六：地图点击事件

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ],
            label: {
                emphasis: {
                    formatter: '{b}: {c}'
                }
            },
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            click: function (params) {
                alert(params.name + ' 的数据为：' + params.value);
            }
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了地图点击事件，通过监听 click 事件，可以获取点击的省市区名称和数据。

案例七：地图缩放和平移

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ],
            zoom: 1.2,
            roam: true
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了地图缩放和平移功能，通过设置 zoom 和 roam 属性，可以实现地图的缩放和平移。

案例八：地图自定义颜色

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            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);

案例解析： 此案例展示了如何自定义地图颜色，通过设置 areaColor 和 borderColor 属性，可以改变地图的颜色。

案例九：地图文字标注

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true,
                formatter: '{b}: {c}'
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ]
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何在地图上添加文字标注，通过设置 formatter 属性，可以自定义标注内容。

案例十：地图渐变色

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ],
            itemStyle: {
                normal: {
                    areaColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#323c48' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#2a333d' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            }
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何使用渐变色填充地图，通过设置 areaColor 属性，可以自定义渐变色。

案例十一：地图标签透明度

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true,
                emphasis: {
                    opacity: 0.8
                }
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ]
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何设置地图标签的透明度，通过设置 opacity 属性，可以改变标签的透明度。

案例十二：地图阴影效果

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ],
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(120, 36, 50, 0.5)'
            }
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何为地图添加阴影效果，通过设置 shadowBlur、shadowOffsetX、shadowOffsetY 和 shadowColor 属性，可以自定义阴影效果。

案例十三：地图标注大小

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true,
                formatter: '{b}: {c}',
                fontSize: 12,
                emphasis: {
                    fontSize: 16
                }
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ]
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何设置地图标注的大小，通过设置 fontSize 和 emphasis.fontSize 属性，可以自定义标注的大小。

案例十四：地图标注颜色

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true,
                color: '#fff',
                emphasis: {
                    color: '#000'
                }
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ]
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何设置地图标注的颜色，通过设置 color 和 emphasis.color 属性，可以自定义标注的颜色。

案例十五：地图边框颜色

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ]
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何设置地图边框的颜色，通过设置 borderColor 和 borderWidth 属性，可以自定义边框的颜色和宽度。

案例十六：地图文本标签位置

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true,
                position: 'top',
                emphasis: {
                    position: 'right'
                }
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ]
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何设置地图文本标签的位置，通过设置 position 和 emphasis.position 属性，可以自定义标签的位置。

案例十七：地图数据排序

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ],
            sort: {
                type: 'value',
                order: 'descend'
            }
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何对地图数据进行排序，通过设置 sort 属性，可以自定义排序方式和顺序。

案例十八：地图数据筛选

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ],
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    if (params.value > 500) {
                        return params.name + ': ' + params.value;
                    }
                    return '';
                }
            }
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何筛选地图数据，通过设置 tooltip 属性，可以自定义提示框的显示条件。

案例十九：地图数据过滤

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ],
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ': ' + params.value;
                }
            },
            visualMap: {
                type: 'continuous',
                min: 0,
                max: 1000,
                calculable: true,
                formatter: '{value}'
            }
        }
    ]
};

myChart.setOption(option);

案例解析： 此案例展示了如何过滤地图数据，通过设置 visualMap 属性，可以自定义数据范围和显示方式。

案例二十：地图数据动态更新

代码示例：

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

var option = {
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京市', value: Math.round(Math.random() * 1000)},
                {name: '上海市', value: Math.round(Math.random() * 1000)},
                // ... 其他省市区
            ],
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ': ' + params.value;
                }
            },
            visualMap: {
                type: 'continuous',
                min: 0,
                max: 1000,
                calculable: true,
                formatter: '{value}'
            }
        }
    ]
};

function updateData() {
    var newData = [
        {name: '北京市', value: Math.round(Math.random() * 1000)},
        {name: '上海市', value: Math.round(Math.random() * 1000)},
        // ... 其他省市区
    ];
    myChart.setOption({
        series: [{
            data: newData
        }]
    });
}

setInterval(updateData, 1000);

案例解析： 此案例展示了如何动态更新地图数据，通过设置 setInterval 函数，可以定时更新数据。

通过以上20个实用案例，相信你已经掌握了ECharts