教你用 ECharts 快速制作地图图表：10个实用案例解析，轻松上手地理可视化！

地理可视化是数据分析中不可或缺的一环，它可以帮助我们更直观地理解地域分布和空间关系。ECharts 作为一款强大的前端图表库，提供了丰富的地图图表功能。今天，就让我带你通过10个实用案例，轻松上手地理可视化，探索ECharts地图图表的魅力。

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

步骤一：引入 ECharts 和地图数据

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/map/js/world.js"></script>

步骤二：创建地图实例

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

步骤三：配置地图选项

var option = {
    series: [{
        type: 'map',
        mapType: 'world',
        data: []
    }]
};

步骤四：设置图表展示

myChart.setOption(option);

案例二：中国地图展示

步骤一：引入 ECharts 和地图数据

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/map/js/china.js"></script>

步骤二：创建地图实例

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

步骤三：配置地图选项

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        data: []
    }]
};

步骤四：设置图表展示

myChart.setOption(option);

案例三：城市热力图

步骤一：引入 ECharts 和地图数据

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/map/js/china.js"></script>

步骤二：创建地图实例

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

步骤三：配置地图选项

var option = {
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [[116.46,39.92,100], [120.29,31.23,80]]
    }]
};

步骤四：设置图表展示

myChart.setOption(option);

案例四：地图标签展示

步骤一：引入 ECharts 和地图数据

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/map/js/china.js"></script>

步骤二：创建地图实例

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

步骤三：配置地图选项

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{name: '北京',value: 100},{name: '上海',value: 80}]
    }]
};

步骤四：设置图表展示

myChart.setOption(option);

案例五：地图缩放和拖拽

步骤一：引入 ECharts 和地图数据

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/map/js/china.js"></script>

步骤二：创建地图实例

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

步骤三：配置地图选项

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        zoom: 1.2,
        label: {
            show: true
        }
    }]
};

步骤四：设置图表展示

myChart.setOption(option);

案例六：地图区域高亮

步骤一：引入 ECharts 和地图数据

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/map/js/china.js"></script>

步骤二：创建地图实例

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

步骤三：配置地图选项

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        emphasis: {
            itemStyle: {
                areaColor: '#ff7f50'
            }
        }
    }]
};

步骤四：设置图表展示

myChart.setOption(option);

案例七：地图区域渐变

步骤一：引入 ECharts 和地图数据

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/map/js/china.js"></script>

步骤二：创建地图实例

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

步骤三：配置地图选项

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#fff' // 0% 处的颜色
                }, {
                    offset: 1, color: '#000' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            }
        }
    }]
};

步骤四：设置图表展示

myChart.setOption(option);

案例八：地图动态更新

步骤一：引入 ECharts 和地图数据

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/map/js/china.js"></script>

步骤二：创建地图实例

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

步骤三：配置地图选项

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        }
    }]
};

步骤四：设置图表展示

myChart.setOption(option);

// 动态更新数据
setTimeout(function() {
    myChart.setOption({
        series: [{
            data: [{
                name: '北京',
                value: Math.round(Math.random() * 1000)
            }]
        }]
    });
}, 1000);

案例九：地图事件监听

步骤一：引入 ECharts 和地图数据

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/map/js/china.js"></script>

步骤二：创建地图实例

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

步骤三：配置地图选项

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        }
    }]
};

步骤四：设置图表展示

myChart.setOption(option);

// 监听事件
myChart.on('click', function(params) {
    if (params.componentType === 'series') {
        alert('点击了 ' + params.name + ' 地区');
    }
});

案例十：地图交互效果

步骤一：引入 ECharts 和地图数据

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/map/js/china.js"></script>

步骤二：创建地图实例

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

步骤三：配置地图选项

var option = {
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        }
    }]
};

步骤四：设置图表展示

myChart.setOption(option);

// 添加交互效果
myChart.on('mouseover', function(params) {
    if (params.componentType === 'series') {
        var element = myChart.convertToPixel({
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
        }, [params.value[0], params.value[1]]);
        var animationData = [
            {
                key: 'hoverEffect',
                value: {
                    type: 'emphasis',
                    scale: 1.5
                }
            }
        ];
        myChart.setOption({
            series: [{
                data: [{
                    coordinateSystem: 'geo',
                    key: 'hoverEffect',
                    value: element
                }]
            }]
        });
    }
});
myChart.on('mouseout', function(params) {
    if (params.componentType === 'series') {
        var animationData = [
            {
                key: 'hoverEffect',
                value: {
                    type: 'emphasis',
                    scale: 1
                }
            }
        ];
        myChart.setOption({
            series: [{
                data: [{
                    coordinateSystem: 'geo',
                    key: 'hoverEffect',
                    value: params.value
                }]
            }]
        });
    }
});

通过以上10个案例，相信你已经对 ECharts 地图图表有了初步的认识。在实际应用中，你可以根据需求灵活运用这些案例，并结合其他数据可视化技术，打造出丰富多彩的地图图表。希望这篇文章能帮助你轻松上手地理可视化，为你的数据分析工作增色添彩！