Flask + ECharts 构建城市距离查询工具：3步部署与API设计

Flask + ECharts 构建城市距离查询工具：3步部署与API设计

1. 为什么需要城市距离查询工具？

在物流规划、旅游路线设计、商务出行等场景中，快速获取城市间的精确距离数据是刚需。传统方式往往需要手动查询地图服务或查阅静态表格，效率低下且难以集成到现有系统中。而基于Flask和ECharts的解决方案，可以将这些数据转化为动态可交互的Web服务。

我曾在一个电商仓储项目中遇到过类似需求——需要根据订单分布自动计算最优配送路线。当时尝试了多种方案，最终发现Flask+ECharts的组合在开发效率和可视化效果上达到了最佳平衡。这套方案具有几个显著优势：

• 轻量级架构：Python+JS技术栈学习成本低
• 高度可定制：从数据格式到可视化样式都可灵活调整
• 易于集成：提供标准化API接口
• 美观直观：ECharts强大的图表能力

2. 核心架构设计

2.1 技术选型分析

工具采用前后端分离架构：

2.2 数据模型设计

原始距离矩阵需要转换为更易处理的JSON格式：

{ "cities": ["广州", "佛山", "东莞"], "distances": [ [0, 22, 90], [22, 0, 112], [90, 112, 0] ] }

提示：实际项目中建议添加城市坐标等元数据，支持地图可视化

3. 后端API开发

3.1 Flask应用骨架

创建基础Flask应用结构：

from flask import Flask, jsonify app = Flask(__name__) @app.route('/api/cities') def get_cities(): # 返回城市列表 pass @app.route('/api/distance/<origin>/<destination>') def get_distance(origin, destination): # 返回两城距离 pass if __name__ == '__main__': app.run(debug=True)

3.2 核心API实现

距离查询API的关键逻辑：

def load_data(): with open('distances.json') as f: return json.load(f) @app.route('/api/distance/<origin>/<destination>') def get_distance(origin, destination): data = load_data() try: i = data['cities'].index(origin) j = data['cities'].index(destination) return jsonify({ 'origin': origin, 'destination': destination, 'distance': data['distances'][i][j] }) except ValueError: return jsonify({'error': 'City not found'}), 404

3.3 高级功能扩展

实际项目中可能需要更多实用功能：

• 路径规划（多城市最优路线）
• 距离单位转换
• 批量查询接口
• 缓存优化

4. 前端可视化实现

4.1 ECharts基础配置

创建基础距离矩阵热力图：

var chart = echarts.init(document.getElementById('chart')); var option = { tooltip: {}, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: cities }, yAxis: { type: 'category', data: cities }, visualMap: { min: 0, max: 800, calculable: true, inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] } }, series: [{ name: '距离', type: 'heatmap', data: distances, label: { show: true }, emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; chart.setOption(option);

4.2 交互功能增强

添加城市选择联动效果：

chart.on('click', function(params) { fetch(`/api/distance/${selectedCity}/${params.name}`) .then(response => response.json()) .then(data => { document.getElementById('distance-result').innerText = `${data.origin}到${data.destination}的距离为：${data.distance}公里`; }); });

5. 三步部署方案

5.1 开发环境准备

确保系统已安装：

• Python 3.6+
• Node.js 12+
• Docker（可选）

5.2 本地运行

后端启动：

python app.py

前端启动：

npx http-server ./frontend -p 8080

5.3 Docker生产部署

创建Dockerfile：

FROM python:3.8-slim WORKDIR /app COPY requirements.txt . RUN pip install -r requirements.txt COPY . . CMD ["gunicorn", "-b :5000", "app:app"]

构建并运行：

docker build -t city-distance . docker run -d -p 5000:5000 city-distance

6. 性能优化实践

在实际使用中，我发现几个关键优化点：

1. 数据加载：将JSON数据改为内存缓存，减少IO操作
2. API响应：添加Gzip压缩，减小传输体积
3. 前端渲染：使用ECharts的数据采样功能处理大数据集
4. 容器配置：调整Gunicorn worker数量匹配CPU核心数

一个典型的性能对比：

7. 常见问题解决

跨域问题：Flask后端需要添加CORS支持

from flask_cors import CORS CORS(app)

数据更新：建议实现热重载机制

@app.route('/api/reload', methods=['POST']) def reload_data(): global cached_data cached_data = load_data() return jsonify({'status': 'ok'})

可视化卡顿：对于大型矩阵，采用Web Worker进行数据处理

const worker = new Worker('distance-calculator.js'); worker.postMessage({cities, distances}); worker.onmessage = function(e) { chart.setOption(e.data); };

8. 扩展应用场景

这套技术栈的灵活性使其能适应多种业务场景：

• 物流系统：集成到配送路径规划模块
• 旅游平台：展示景点间距离关系
• 地产分析：可视化楼盘与关键设施的距离
• 疫情防控：追踪病例位置关联

在最近一个区域仓储规划项目中，我们基于此工具开发了智能分仓系统，将配送效率提升了23%。关键是在原有基础上添加了以下功能：

@app.route('/api/optimal', methods=['POST']) def find_optimal(): locations = request.json['locations'] # 实现中心点算法 center = calculate_geometric_center(locations) nearest = find_nearest_city(center) return jsonify({'optimal': nearest})