教你用 ECharts 快速制作地图图表，10个实用案例助你入门实操

ECharts 是一款功能强大的开源 JavaScript 图表库，它可以帮助开发者轻松地创建各种类型的图表，包括地图图表。地图图表在数据可视化领域有着广泛的应用，比如展示地理位置分布、区域销售情况等。下面，我将通过10个实用案例，带你快速入门实操，学会使用 ECharts 制作地图图表。

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

准备工作：首先，确保你的项目中已经引入了 ECharts 和地图数据。

代码示例：

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


var option = {
    title: {
        text: '中国地图基础展示',
        subtext: '数据纯属虚构'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        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);

案例二：全球地图展示

准备工作：引入 ECharts 和全球地图数据。

代码示例：

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


var option = {
    // ...其他配置项
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ...全球各国家的数据
            ]
        }
    ]
};


myChart.setOption(option);

案例三：自定义地图展示

准备工作：创建自定义地图数据，并引入 ECharts。

代码示例：

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


var option = {
    // ...其他配置项
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'custom',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ...自定义地图数据
            ]
        }
    ]
};


myChart.setOption(option);

案例四：地图点击事件

准备工作：引入 ECharts 和地图数据。

代码示例：

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


var option = {
    // ...其他配置项
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ...数据
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }
    ]
};


myChart.on('click', function (params) {
    console.log(params.name); // 打印点击的城市名称
});


myChart.setOption(option);

案例五：地图热力图展示

准备工作：引入 ECharts 和地图数据。

代码示例：

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


var option = {
    // ...其他配置项
    series: [
        {
            name: '数据',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: [
                // ...热力图数据
            ]
        }
    ]
};


myChart.setOption(option);

案例六：地图动画效果

准备工作：引入 ECharts 和地图数据。

代码示例：

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


var option = {
    // ...其他配置项
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ...数据
            ],
            animation: true
        }
    ]
};


myChart.setOption(option);

案例七：地图缩放与拖动

准备工作：引入 ECharts 和地图数据。

代码示例：

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


var option = {
    // ...其他配置项
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ...数据
            ],
            zoom: 1.2
        }
    ]
};


myChart.setOption(option);

案例八：地图多层级展示

准备工作：引入 ECharts 和地图数据。

代码示例：

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


var option = {
    // ...其他配置项
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ...数据
            ],
            levels: [
                {
                    // ...层级一配置
                },
                {
                    // ...层级二配置
                },
                // ...更多层级
            ]
        }
    ]
};


myChart.setOption(option);

案例九：地图标签自定义

准备工作：引入 ECharts 和地图数据。

代码示例：

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


var option = {
    // ...其他配置项
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true,
                formatter: function (params) {
                    return params.name + '\n' + params.value;
                }
            },
            data: [
                // ...数据
            ]
        }
    ]
};


myChart.setOption(option);

案例十：地图与其他图表结合

准备工作：引入 ECharts 和地图数据。

代码示例：

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


var option = {
    // ...其他配置项
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                // ...数据
            ]
        },
        {
            name: '折线图',
            type: 'line',
            data: [
                // ...折线图数据
            ]
        }
    ]
};


myChart.setOption(option);

通过以上10个案例，相信你已经对使用 ECharts 制作地图图表有了初步的了解。在实际应用中，可以根据自己的需求进行灵活调整和优化。希望这些案例能帮助你快速入门，并在数据可视化领域取得更好的成果！