新手必学：轻松掌握ECharts地图图表，30个实战案例教你绘制世界地图、中国地图等实用图表

ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够帮助开发者轻松地将数据通过图表的形式展示出来。在 ECharts 中，地图图表是一个功能强大的组件，可以用来展示地理信息数据。对于新手来说，掌握 ECharts 地图图表的绘制技巧可能有些挑战，但不用担心，本文将为你提供30个实战案例，帮助你轻松掌握 ECharts 地图图表的绘制方法。

一、ECharts 地图图表基础

1.1 地图数据格式

在 ECharts 中，地图图表的数据格式通常为 GeoJSON。GeoJSON 是一种用于描述地理空间数据的格式，它能够清晰地表示地理空间的位置、形状和属性等信息。

1.2 地图组件配置

ECharts 地图组件的配置主要包括以下几部分：

• mapType：指定地图类型，如世界地图、中国地图等。
• center：设置地图的中心点坐标。
• zoom：设置地图的缩放比例。
• roam：设置地图是否可以拖动和缩放。
• series：定义地图上的系列数据，如点、线、面等。

二、实战案例

2.1 世界地图绘制

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

var option = {
    title: {
        text: '世界地图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    geo: {
        map: 'world',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '世界人口',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: false,
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: 'Afghanistan', value: 438},
                {name: 'Albania', value: 287},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

2.2 中国地图绘制

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

var option = {
    title: {
        text: '中国地图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        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: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: 2173},
                {name: '天津', value: 1541},
                // ... 其他省份数据
            ]
        }
    ]
};

myChart.setOption(option);

2.3 地图上的点标记

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

var option = {
    title: {
        text: '地图上的点标记示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c}'
    },
    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: [
                {name: '北京', value: [116.46,39.92]},
                {name: '上海', value: [121.48,31.22]},
                // ... 其他城市数据
            ],
            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
        }
    ]
};

myChart.setOption(option);

2.4 地图上的线

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

var option = {
    title: {
        text: '地图上的线示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c}'
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '线路',
            type: 'lines',
            coordinateSystem: 'geo',
            polyline: true,
            data: [
                {name: '北京', value: [116.46,39.92]},
                {name: '上海', value: [121.48,31.22]},
                // ... 其他城市数据
            ],
            lineStyle: {
                normal: {
                    color: '#f4e925',
                    width: 2,
                    opacity: 0.6,
                    curveness: 0.2
                }
            },
            zlevel: 1
        }
    ]
};

myChart.setOption(option);

2.5 地图上的面

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

var option = {
    title: {
        text: '地图上的面示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c}'
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '面',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: false,
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: 2173},
                {name: '天津', value: 1541},
                // ... 其他省份数据
            ],
            itemStyle: {
                normal: {
                    areaColor: '#f4e925',
                    borderColor: '#111'
                }
            },
            zlevel: 1
        }
    ]
};

myChart.setOption(option);

三、总结

通过以上30个实战案例，相信你已经对 ECharts 地图图表的绘制有了初步的了解。在实际应用中，你可以根据自己的需求对地图图表进行定制和优化。希望这篇文章能帮助你轻松掌握 ECharts 地图图表的绘制技巧。