教你用 ECharts 制作实用地图图表：8个案例带你轻松入门

在当今数据可视化的世界里，地图图表已经成为展示地理分布数据的常用工具。ECharts 作为一款功能强大的前端可视化库，提供了丰富的地图图表功能，可以帮助我们轻松创建各种风格的地图图表。本文将为你带来8个实用的地图图表案例，带你轻松入门 ECharts 地图图表的制作。

1. 基础地图

案例描述： 基础地图通常用于展示地理位置和边界。

代码示例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/geo');

// 初始化地图实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '基础地图'
    },
    tooltip: {},
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    }
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2. 热力地图

案例描述： 热力地图适用于展示地理位置上的密集程度。

代码示例：

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

var option = {
    title: {
        text: '热力地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c}'
    },
    geo: {
        map: 'china',
        label: {
            show: false
        },
        itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
        }
    },
    series: [
        {
            name: '数据',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                [116.46,39.92,100],
                [114.05,22.52,90],
                [120.19,30.26,80],
                [121.47,31.23,70]
            ]
        }
    ]
};

3. 简单标注

案例描述： 在地图上添加简单的标注，适用于展示特定地点。

代码示例：

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

var option = {
    title: {
        text: '简单标注'
    },
    tooltip: {},
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [
                [116.46,39.92,100],
                [114.05,22.52,90],
                [120.19,30.26,80],
                [121.47,31.23,70]
            ],
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};

4. 柱状图地图

案例描述： 结合柱状图和地图，展示地理数据的分布情况。

代码示例：

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

var option = {
    title: {
        text: '柱状图地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '柱状图',
            type: 'bar',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: Math.round(Math.random() * 100)},
                {name: '上海', value: Math.round(Math.random() * 100)},
                {name: '广东', value: Math.round(Math.random() * 100)}
            ],
            symbolSize: function (val) {
                return val / 10;
            },
            label: {
                normal: {
                    formatter: '{b}:{c}',
                    position: 'right',
                    show: true
                }
            }
        }
    ]
};

5. 事件地图

案例描述： 展示地图上的事件或活动分布。

代码示例：

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

var option = {
    title: {
        text: '事件地图'
    },
    tooltip: {
        trigger: 'item'
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '事件',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [
                [116.46,39.92,100],
                [114.05,22.52,90],
                [120.19,30.26,80],
                [121.47,31.23,70]
            ],
            symbolSize: function (val) {
                return val / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};

6. 路径地图

案例描述： 展示两个地点之间的路径，如航班路径、物流路径等。

代码示例：

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

var option = {
    title: {
        text: '路径地图'
    },
    tooltip: {
        trigger: 'item'
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '路径',
            type: 'lines',
            coordinateSystem: 'geo',
            data: [
                [{name: '北京'}, {name: '上海'}]
            ],
            polyline: true,
            coordinateSystem: 'geo',
            zlevel: 2,
            effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: '#fff',
                symbolSize: 3,
                symbol: 'circle',
                loop: false
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'end',
                    show: true
                }
            },
            lineStyle: {
                normal: {
                    width: 1,
                    opacity: 0.6,
                    curveness: 0
                }
            }
        }
    ]
};

7. 多层地图

案例描述： 展示多个地理数据的叠加效果。

代码示例：

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

var option = {
    title: {
        text: '多层地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '系列1',
            type: 'map',
            mapType: 'china',
            data: [
                {name: '北京', value: Math.round(Math.random() * 100)},
                {name: '上海', value: Math.round(Math.random() * 100)},
                {name: '广东', value: Math.round(Math.random() * 100)}
            ],
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    areaColor: '#f4e925',
                    borderColor: '#fff'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        {
            name: '系列2',
            type: 'map',
            mapType: 'china',
            data: [
                {name: '北京', value: Math.round(Math.random() * 100)},
                {name: '上海', value: Math.round(Math.random() * 100)},
                {name: '广东', value: Math.round(Math.random() * 100)}
            ],
            label: {
                show: true
            },
            itemStyle: {
                normal: {
                    areaColor: '#f4e925',
                    borderColor: '#fff'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        }
    ]
};

8. 3D 地图

案例描述： 以3D效果展示地图数据，适用于展示地形地貌等。

代码示例：

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

var option = {
    title: {
        text: '3D 地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: -32768,
        max: 32768,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    geo3D: {
        map: 'world',
        globe: {
            lightSource: {
                intensity: 1.2,
                color: '#fff'
            },
            viewControl: {
                autoRotate: true
            },
            shadow: true
        }
    },
    series: [
        {
            name: '世界地图',
            type: 'map3D',
            mapType: 'world',
            data: [
                {name: '巴西', value: Math.round(Math.random() * 1000)},
                {name: '俄罗斯', value: Math.round(Math.random() * 1000)},
                {name: '加拿大', value: Math.round(Math.random() * 1000)}
            ]
        }
    ]
};

以上8个案例涵盖了 ECharts 地图图表的多种应用场景，相信通过学习这些案例，你一定能够掌握 ECharts 地图图表的制作技巧。在实践过程中，你还可以根据自己的需求对案例进行修改和扩展。祝你在地图图表的制作道路上越走越远！