教你用ECharts轻松绘制地图图表：20个实用案例全解析

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括地图图表。地图图表能够直观地展示地理数据，是数据可视化中非常实用的一种图表形式。本文将为你介绍如何使用 ECharts 轻松绘制地图图表，并提供20个实用案例全解析，帮助你快速掌握地图图表的制作技巧。

1. ECharts 地图图表基础

在开始绘制地图图表之前，我们需要了解一些基本概念：

• Geo 组件：ECharts 地图图表的核心组件，用于绘制地图。
• 数据格式：地图数据通常以 JSON 格式存储，包括地图的边界、行政区划等信息。
• 视觉映射：将数据值映射到地图上的颜色、形状等视觉元素。

2. 20个实用案例全解析

案例一：中国地图

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);

案例二：世界地图

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

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

myChart.setOption(option);

案例三：行政区划图

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

var option = {
    series: [{
        type: 'map',
        map: 'province',
        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 = {
    series: [{
        type: 'map',
        map: 'customMap',
        label: {
            show: true
        },
        data: [
            {name: '区域1', value: Math.round(Math.random() * 1000)},
            {name: '区域2', value: Math.round(Math.random() * 1000)},
            // ... 其他区域数据
        ]
    }]
};

myChart.setOption(option);

案例五：多层级地图

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: 'province',
        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 = {
    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);

// 动画效果
var animation = setInterval(function () {
    var data = option.series[0].data;
    data.forEach(function (item) {
        item.value = Math.round(Math.random() * 1000);
    });
    myChart.setOption(option);
}, 1000);

案例七：地图标签

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

var option = {
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true,
            formatter: function (params) {
                return params.name + '：' + params.value;
            }
        },
        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 = {
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true
        },
        itemStyle: {
            areaColor: '#3398DB'
        },
        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 = {
    series: [{
        type: 'map',
        map: 'china',
        label: {
            show: true
        },
        itemStyle: {
            borderColor: '#f0f0f0',
            borderWidth: 1
        },
        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 = {
    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);

// 监听点击事件
myChart.on('click', function (params) {
    console.log(params.name + '：' + params.value);
});

案例十一：地图缩放

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);

// 控制地图缩放
myChart.dispatchAction({
    type: 'zoomIn'
});

myChart.dispatchAction({
    type: 'zoomOut'
});

案例十二：地图标注

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: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 1,
        rippleEffect: {
            brushType: 'stroke'
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true
            }
        },
        symbolSize: 10,
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.48, 31.22]},
            // ... 其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例十三：地图热力图

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

var option = {
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [
            {name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
            {name: '上海', value: [121.48, 31.22, Math.round(Math.random() * 1000)]},
            // ... 其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例十四：地图路径

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

var option = {
    series: [{
        type: 'lines',
        coordinateSystem: 'geo',
        polyline: true,
        data: [
            {
                coords: [
                    [116.46, 39.92],
                    [121.48, 31.22]
                ]
            },
            // ... 其他路径数据
        ]
    }]
};

myChart.setOption(option);

案例十五：地图气泡

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: 'scatter',
        coordinateSystem: 'geo',
        symbolSize: function (val) {
            return val / 10;
        },
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.48, 31.22]},
            // ... 其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例十六：地图组合

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: 'lines',
        coordinateSystem: 'geo',
        polyline: true,
        data: [
            {
                coords: [
                    [116.46, 39.92],
                    [121.48, 31.22]
                ]
            },
            // ... 其他路径数据
        ]
    }]
};

myChart.setOption(option);

案例十七：地图缩略图

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: 'custom',
        coordinateSystem: 'geo',
        renderItem: function (params, api) {
            var coord = api.coord(params.data);
            return {
                type: 'image',
                style: {
                    image: 'https://example.com/mini-map.png',
                    x: coord[0] - 10,
                    y: coord[1] - 10,
                    width: 20,
                    height: 20
                }
            };
        },
        data: [
            {name: '北京', value: [116.46, 39.92]},
            {name: '上海', value: [121.48, 31.22]},
            // ... 其他城市数据
        ]
    }]
};

myChart.setOption(option);

案例十八：地图时间轴

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: 'timeLine',
        coordinateSystem: 'geo',
        data: [
            {
                time: '2021-01-01',
                value: [116.46, 39.92]
            },
            {
                time: '2021-02-01',
                value: [121.48, 31.22]
            },
            // ... 其他时间数据
        ]
    }]
};

myChart.setOption(option);

案例十九：地图动画路径

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: 'lines',
        coordinateSystem: 'geo',
        polyline: true,
        data: [
            {
                coords: [
                    [116.46, 39.92],
                    [121.48, 31.22]
                ],
                lineStyle: {
                    width: 2,
                    opacity: 0.6,
                    curveness: 0.2
                }
            },
            // ... 其他路径数据
        ]
    }]
};

myChart.setOption(option);

案例二十：地图标签动画

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

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

myChart.setOption(option);

// 标签动画效果
var animation = setInterval(function () {
    var data = option.series[0].data;
    data.forEach(function (item) {
        item.value = Math.round(Math.random() * 1000);
    });
    myChart.setOption(option);
}, 1000);

总结

通过以上20个实用案例，相信你已经对 ECharts 地图图表的制作有了更深入的了解。在实际应用中，你可以根据自己的需求进行修改和扩展，创造出更多具有创意的地图图表。希望这篇文章能帮助你轻松绘制出精美的地图图表！