教你轻松掌握ECharts地图图表：30个实用案例，一看就懂！

ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助我们轻松地创建各种图表，其中地图图表因其直观性和实用性而受到许多开发者的喜爱。本篇文章将为你介绍 30 个实用的 ECharts 地图图表案例，让你一看就懂，快速上手！

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

代码示例：

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: true
            },
            data: [
                {name: '北京',value: Math.round(Math.random()*1000)},
                {name: '上海',value: Math.round(Math.random()*1000)},
                // ... 其他省份数据
            ]
        }
    ]
};

myChart.setOption(option);

案例二：世界地图基础展示

代码示例：

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

var option = {
    title: {
        text: '世界地图基础展示',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    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: 'Afghanistan',value: Math.round(Math.random()*1000)},
                {name: 'Angola',value: Math.round(Math.random()*1000)},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

案例三：中国地图点击事件

代码示例：

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
            },
            data: [
                {name: '北京',value: Math.round(Math.random()*1000)},
                {name: '上海',value: Math.round(Math.random()*1000)},
                // ... 其他省份数据
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            // 点击事件
            click: function (params) {
                alert(params.name + ' 的信息：' + params.value);
            }
        }
    ]
};

myChart.setOption(option);

案例四：世界地图热力图

代码示例：

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

var option = {
    title: {
        text: '世界地图热力图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    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: 'Afghanistan',value: Math.round(Math.random()*1000)},
                {name: 'Angola',value: Math.round(Math.random()*1000)},
                // ... 其他国家数据
            ],
            // 热力图
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        }
    ]
};

myChart.setOption(option);

案例五：中国地图多维度数据展示

代码示例：

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

var option = {
    title: {
        text: '中国地图多维度数据展示',
        left: 'center'
    },
    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), Math.round(Math.random()*1000)]},
                {name: '上海',value: [Math.round(Math.random()*1000), Math.round(Math.random()*1000)]},
                // ... 其他省份数据
            ],
            // 多维度数据展示
            itemStyle: {
                normal: {
                    borderColor: '#f7f7f7',
                    areaColor: '#fff'
                },
                emphasis: {
                    areaColor: '#f7f7f7'
                }
            }
        }
    ]
};

myChart.setOption(option);

案例六：世界地图数据动态更新

代码示例：

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

var option = {
    title: {
        text: '世界地图数据动态更新',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    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: 'Afghanistan',value: Math.round(Math.random()*1000)},
                {name: 'Angola',value: Math.round(Math.random()*1000)},
                // ... 其他国家数据
            ],
            // 数据动态更新
            animationDuration: 1000,
            animationEasing: 'cubicInOut'
        }
    ]
};

myChart.setOption(option);

// 动态更新数据
setInterval(function () {
    option.series[0].data = [
        {name: 'Afghanistan',value: Math.round(Math.random()*1000)},
        {name: 'Angola',value: Math.round(Math.random()*1000)},
        // ... 其他国家数据
    ];
    myChart.setOption(option);
}, 2000);

案例七：中国地图多级联动

代码示例：

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

var option = {
    title: {
        text: '中国地图多级联动',
        left: 'center'
    },
    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), Math.round(Math.random()*1000)]},
                {name: '上海',value: [Math.round(Math.random()*1000), Math.round(Math.random()*1000)]},
                // ... 其他省份数据
            ],
            // 多级联动
            levels: [
                {
                    // 省级
                    itemStyle: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    }
                },
                {
                    // 市级
                    itemStyle: {
                        areaColor: '#2a333d',
                        borderColor: '#111'
                    }
                },
                {
                    // 县级
                    itemStyle: {
                        areaColor: '#1f2833',
                        borderColor: '#111'
                    }
                }
            ]
        }
    ]
};

myChart.setOption(option);

案例八：世界地图自定义标签

代码示例：

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

var option = {
    title: {
        text: '世界地图自定义标签',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true,
                formatter: function (params) {
                    return params.name + ' (' + params.value + ')';
                }
            },
            data: [
                {name: 'Afghanistan',value: Math.round(Math.random()*1000)},
                {name: 'Angola',value: Math.round(Math.random()*1000)},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

案例九：中国地图区域缩放

代码示例：

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

var option = {
    title: {
        text: '中国地图区域缩放',
        left: 'center'
    },
    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)},
                {name: '上海',value: Math.round(Math.random()*1000)},
                // ... 其他省份数据
            ],
            // 区域缩放
            zoom: 1.2
        }
    ]
};

myChart.setOption(option);

案例十：世界地图区域高亮

代码示例：

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

var option = {
    title: {
        text: '世界地图区域高亮',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    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: 'Afghanistan',value: Math.round(Math.random()*1000)},
                {name: 'Angola',value: Math.round(Math.random()*1000)},
                // ... 其他国家数据
            ],
            // 区域高亮
            emphasis: {
                itemStyle: {
                    areaColor: '#2a333d'
                }
            }
        }
    ]
};

myChart.setOption(option);

案例十一：中国地图区域阴影

代码示例：

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

var option = {
    title: {
        text: '中国地图区域阴影',
        left: 'center'
    },
    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)},
                {name: '上海',value: Math.round(Math.random()*1000)},
                // ... 其他省份数据
            ],
            // 区域阴影
            itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(120, 36, 50, 0.5)',
                shadowOffsetY: 5
            }
        }
    ]
};

myChart.setOption(option);

案例十二：世界地图区域渐变

代码示例：

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

var option = {
    title: {
        text: '世界地图区域渐变',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    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: 'Afghanistan',value: Math.round(Math.random()*1000)},
                {name: 'Angola',value: Math.round(Math.random()*1000)},
                // ... 其他国家数据
            ],
            // 区域渐变
            itemStyle: {
                areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#323c48' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#1f2833' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            }
        }
    ]
};

myChart.setOption(option);

案例十三：中国地图区域标签旋转

代码示例：

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

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

myChart.setOption(option);

案例十四：世界地图区域标签隐藏

代码示例：

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

var option = {
    title: {
        text: '世界地图区域标签隐藏',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: false // 隐藏标签
            },
            data: [
                {name: 'Afghanistan',value: Math.round(Math.random()*1000)},
                {name: 'Angola',value: Math.round(Math.random()*1000)},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

案例十五：中国地图区域标签颜色

代码示例： “`javascript var myChart = echarts.init(document.getElementById(‘main’));

var option = {

title: {
    text: '中国地图区域标签颜色',
    left: 'center'
},
tooltip: {
    trigger: 'item'
},
visualMap: {
    min: 0,
    max: 1000,
    left: 'left',
    top: 'bottom',
    text: ['高','低'],           // 文本，默认为数值文本
    calculable: true
},
series: [
    {
        name: '中国',
        type: