Flask + ECharts 地图商城可视化系统是一种基于 Web 的轻量级解决方案，利用 Flask 作为后端服务，ECharts 作为前端可视化引擎，实现商城店铺分布、销售数据、分类统计等信息的动态展示与交互。相比于 Leaflet 等地图库，ECharts 更专注于图表与地理数据的融合，开箱即用、样式丰富，适合快速构建数据仪表板。
一、系统架构
text
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 前端页面 │ ←→ │ Flask API │ ←→ │ 数据源 │
│ (HTML+ECharts)│ │ (Python) │ │ (CSV/DB) │
└─────────────┘ └─────────────┘ └─────────────┘-
Flask：提供 RESTful API，处理数据查询与过滤，渲染主页面。
-
ECharts：前端加载地图组件（散点图、热力图、迁徙图等），通过 AJAX 获取数据并动态更新。
-
数据层：可用 CSV、Excel 或数据库（SQLite/MySQL）存储店铺信息（名称、经纬度、销售额、类别、楼层等）。
二、核心功能
-
地图展示
-
使用 ECharts 的
map系列或结合百度/高德地图 API，将商城店铺标注在地图上。 -
支持缩放、拖拽，地图底图可选街道、卫星等。
-
-
数据筛选
-
通过下拉框、滑块等控件按店铺类别、销售额范围、楼层筛选数据。
-
Flask 后端接收参数并返回过滤后的 JSON 数据，前端重新渲染地图。
-
-
统计图表联动
-
可集成 ECharts 的饼图、柱状图，展示类别占比、销售额排行等。
-
点击地图上的店铺，同步高亮统计图表中的对应项，实现交互联动。
-
-
热力图与聚合
- 当店铺数量较多时，可切换为热力图模式展示客流密集区域，或使用点聚合优化显示。
三、技术实现要点
1. 后端 Flask 示例
python
from flask import Flask, render_template, jsonify, request
import pandas as pd
app = Flask(__name__)
df = pd.read_csv('shops.csv') # 包含 lng, lat, name, sales, category
@app.route('/')
def index():
return render_template('index.html')
@app.route('/api/shops')
def get_shops():
category = request.args.get('category', '全部')
min_sales = request.args.get('min_sales', type=float)
max_sales = request.args.get('max_sales', type=float)
data = df.copy()
if category != '全部':
data = data[data['category'] == category]
if min_sales is not None:
data = data[data['sales'] >= min_sales]
if max_sales is not None:
data = data[data['sales'] <= max_sales]
return jsonify(data.to_dict(orient='records'))2. 前端 ECharts 地图配置
方案 A：使用 ECharts 内置地图（需注册地图数据）
ECharts 5 之后移除了内置地图，需自行注册 GeoJSON。可下载商城所在区域的 GeoJSON 文件，注册后绘制散点图。
html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<div id="mapChart" style="width: 100%; height: 600px;"></div>
<script>
var chart = echarts.init(document.getElementById('mapChart'));
// 注册地图（需先加载 geoJSON）
fetch('/static/beijing.geojson')
.then(response => response.json())
.then(geoJson => {
echarts.registerMap('mall', geoJson);
var option = {
series: [{
type: 'scatter',
coordinateSystem: 'geo',
data: [] // 从后端获取的店铺数据
}]
};
chart.setOption(option);
});
</script>
</body>
</html>方案 B：结合百度/高德地图 API（更常用）
使用 ECharts 的 百度地图扩展 或 高德地图扩展，可以直接调用真实地图服务，坐标使用 bd09 或 gcj02，适合需要精确位置的项目。
javascript
// 引入百度地图 API 和 ECharts 百度地图扩展
var map = new BMap.Map('mapChart');
var bmap = map.getContainer(); // 实际集成需参考官方文档3. 动态数据加载
javascript
function loadShops() {
var params = new URLSearchParams({
category: document.getElementById('category').value,
min_sales: document.getElementById('minSales').value
});
fetch('/api/shops?' + params)
.then(res => res.json())
.then(data => {
var points = data.map(shop => ({
name: shop.name,
value: [shop.lng, shop.lat, shop.sales],
category: shop.category
}));
// 更新 ECharts 散点图系列
chart.setOption({
series: [{
data: points
}]
});
});
}四、优缺点对比
| 维度 | ECharts 地图方案 | Leaflet/OpenLayers 方案 |
|---|---|---|
| 上手难度 | 低，配置简洁，适合图表为主的页面 | 中，需要更多原生地图交互代码 |
| 美观度 | 高，自带丰富主题和样式 | 需自定义样式 |
| 地图数据 | 依赖外部底图（百度/高德）或 GeoJSON | 可使用 OpenStreetMap 免费底图 |
| 交互丰富度 | 侧重于图表联动，鼠标交互有限 | 高度自定义，支持复杂标记、热力图插件 |
| 性能 | 大量散点时需优化，但通常够用 | 可借助 Leaflet 插件实现点聚合、热力图 |
五、应用场景
-
商场管理后台：展示各店铺位置、销售业绩、客流热力。
-
商业分析大屏：结合销售额排行、趋势图，为运营决策提供数据支持。
-
商场导航服务：为顾客提供线上店铺导览，支持按类别搜索。
六、总结
Flask + ECharts 地图商城可视化系统以极低的开发成本实现了数据驱动的地理信息展示，尤其适合需要同时展示统计图表和地图分布的场景。通过 Flask 提供灵活的数据接口，前端 ECharts 保证视觉效果，可以快速搭建一个功能完整、交互友好的商业智能工具。若对地图交互有更高要求（如自定义图标、动态热力等），可考虑结合 Leaflet 或 Mapbox GL JS 进一步扩展。