1. 项目概述：为什么一个“Python数据可视化看板”需要Flask+ECharts+HTML+Ajax四件套？
你有没有遇到过这样的场景：用Matplotlib画完一张折线图，导出成PNG发给同事，结果对方问：“这个数据能点开看明细吗？”；或者用Seaborn做了个热力图，领导说：“能不能按月份筛选？再加个导出Excel按钮？”——这时候你就意识到，静态图表只是起点，真正的业务需求是交互式、可操作、能嵌入工作流的可视化看板。而标题里这四个技术组合，恰恰是当前中小规模数据分析项目中最务实、最可控、最容易落地的一套“轻量级Web看板方案”。
核心关键词“Python数据可视化”“Flask”“ECharts”“Ajax”不是随意堆砌的。它代表了一条清晰的技术路径：后端用Python处理数据逻辑（Flask），前端用成熟生态渲染图表（ECharts），页面结构用原生HTML组织，数据通信靠轻量Ajax实现前后端解耦。它不追求大而全的BI平台，而是聚焦“把分析结果快速变成可点击、可筛选、可刷新的网页”，特别适合某高校实验室做课程项目汇报、某公司市场部做周度销售监控、某开发者个人作品集展示等真实场景。
我试过纯Python桌面方案（如PyQt+Matplotlib），部署到同事电脑上总卡在环境依赖；也试过直接用Plotly Dash，但发现默认主题定制成本高、路由跳转略重，对简单看板有点“杀鸡用牛刀”。最终选定这套组合，是因为它每个组件都解决了一个具体痛点：Flask启动快、无额外服务依赖，5行代码就能起一个本地服务器；ECharts中文文档完善、示例丰富、移动端适配好，拖拽缩放、下钻联动这些交互功能开箱即用；HTML负责把标题、筛选框、图表容器这些“骨架”搭稳；Ajax则像一根细线，把用户点选的月份、选择的区域这些动作，悄悄传给后端，再把新算出来的JSON数据拿回来更新图表，整个过程页面不刷新，体验接近原生App。
更重要的是，这套方案对新手极其友好。你不需要懂Vue或React框架，HTML写个select下拉框、写个div当图表容器，几行JavaScript调用ECharts API就能出图；后端Python代码就是你熟悉的pandas数据处理逻辑，加个@app.route装饰器就变成API接口。我带过的几个A同学，零前端基础，三天内就完成了从数据清洗到上线看板的全流程。它不炫技，但每一步都踩在“能跑通、能修改、能交付”的实处。
2. 整体架构设计与技术选型逻辑：为什么不是Django+Vue，也不是Streamlit？
2.1 四层结构拆解：数据层→服务层→通信层→表现层
这个看板不是单个文件，而是一个有明确分层的小系统。我把它的结构画成一张纸就能说明白的草图：
数据层（Data Layer）：原始CSV/Excel文件，或连接SQLite数据库。这是所有分析的源头，比如一份包含“日期、地区、销售额、产品类别”的销售记录表。关键点在于：数据必须结构化、字段命名规范。我见过太多人因为Excel里列名是“销 售 额（万）”带空格和括号，导致pandas读取后列名变成
'销\xa0售\xa0额\uff08\u4e07\uff09'，后续所有计算都报错。所以第一步永远是数据清洗，而不是急着画图。服务层（Service Layer）：Flask应用。它只做三件事：（1）提供首页HTML页面；（2）暴露API接口，接收前端参数（如
?region=华东&month=2024-03），调用pandas进行聚合计算（如df.groupby('地区')['销售额'].sum()），返回JSON；（3）处理静态资源（CSS/JS文件）。这里没有复杂的用户认证、权限管理，纯粹是“计算引擎”。Flask选它，是因为pip install flask后，一个app.py文件就能跑起来，连requirements.txt都只有两行：flask和pandas。通信层（Communication Layer）：Ajax。它不是独立技术，而是浏览器内置的XMLHttpRequest对象封装。核心作用是让前端页面“活”起来：用户在下拉框选了“华北”，JavaScript不刷新整个页面，而是发一个GET请求到
/api/sales?region=华北，拿到JSON后，只更新ECharts图表区域。这比传统表单提交（整个页面白屏1秒）体验好太多。我实测过，一个10MB的CSV文件，Flask后端计算+网络传输+前端渲染，整个响应时间控制在800ms内，用户完全感知不到延迟。表现层（Presentation Layer）：HTML + ECharts。HTML是骨架，定义了页面布局：顶部导航栏、左侧筛选区（含日期范围选择器、地区下拉框）、中间主图表区（多个div，每个对应一个ECharts实例）。ECharts是血肉，它把JSON数据变成可交互的图表。选ECharts而非Chart.js，是因为前者对中文支持原生友好（字体、标签自动适配）、地理坐标系（map）功能强大（画全国销售热力图毫无压力）、官方示例库（https://echarts.apache.org/examples/zh/）里90%的案例都能直接抄作业。
提示：不要试图用Flask模板语法（
{{ data }}）把Python数据直接塞进ECharts的option配置里。这是新手最大误区。正确做法是：HTML里只写空容器<div id="chart1"></div>，JavaScript里用Ajax异步获取数据，再myChart.setOption(option)。这样前后端彻底分离，后端只管算，前端只管画，改一个功能不影响另一个。
2.2 为什么放弃其他热门方案？——来自真实踩坑的对比
| 方案 | 优势 | 我的实测痛点 | 适用场景 |
|---|---|---|---|
| Streamlit | Python写完就能streamlit run app.py，5分钟上线 | 1. 默认UI风格单一，定制CSS需绕弯子；2. 多用户并发时内存占用飙升，本地测试3人同时刷页面，笔记本风扇狂转；3. 导出为独立HTML困难，分享给没装Python的同事等于白搭 | 快速原型验证、个人临时分析 |
| Django + Vue | 功能完备，权限、后台管理一应俱全 | 1. 工程目录复杂，光manage.pysettings.pyurls.py就劝退新手；2. Vue开发需npm install，国内镜像源常超时；3. 一个简单折线图，前后端加起来要写200行代码，ROI太低 | 中大型企业级BI系统 |
| Plotly Dash | Python原生，回调机制优雅 | 1. 默认主题丑，改颜色要查文档半小时；2. 路由跳转（dcc.Location）在IE11兼容性差，某客户单位还在用IE；3. 部署到Nginx需额外配置反向代理，多一层就多一层故障点 | 数据科学团队内部工具 |
| 本方案（Flask+ECharts） | 启动快、代码少、易调试、部署简 | —— | 绝大多数中小型分析看板需求 |
我做过一个横向测试：同样实现“按地区筛选的销售额柱状图+时间趋势线双图联动”，Streamlit代码量约60行，Dash约120行，而本方案：app.py45行 +index.html80行 +main.js60行 = 总共185行，但其中120行是ECharts官方示例复制粘贴的配置项，真正需要自己写的逻辑代码不到70行。这意味着，当你明天要加一个“产品类别占比饼图”时，只需在HTML里加一个<div id="pie">，在JS里复制一个ECharts饼图配置，改下API地址，后端加一个@app.route('/api/category')函数——30分钟搞定，且不影响原有功能。
2.3 安全与性能的务实平衡：不做过度设计
有人会问：“不用JWT鉴权，不怕别人直接访问/api/sales?region=全部拿到所有数据吗？”我的答案是：看板定位决定安全策略。如果这是放在公司内网、仅供5人查看的周报看板，加登录页反而增加维护成本；如果是面向客户的公开数据，那就在Flask里加一行if request.remote_addr not in ['192.168.1.0/24']: abort(403)做IP白名单，比搞一套完整RBAC轻量十倍。
性能方面，我坚持“够用就好”原则。ECharts本身渲染效率极高，瓶颈永远在数据计算和网络传输。所以后端优化重点是：（1）pandas读取CSV时指定dtype（如{'销售额': 'float32'}），避免默认object类型拖慢；（2）用df.query("日期 >= '2024-01-01'")替代df[df['日期'] >= '2024-01-01']，速度提升3倍；（3）Ajax请求加cache: false，防止浏览器缓存旧数据。这些细节，文档里不会写，但实测下来，一个10万行的数据集，从点击筛选到图表更新完成，稳定在600ms内。
3. 核心模块实现详解：从零开始搭建可运行看板
3.1 环境准备与项目结构：5分钟初始化
先明确一个事实：这个项目不需要虚拟环境也能跑，但强烈建议用。因为未来可能要加openpyxl读Excel，或sqlalchemy连数据库，依赖多了容易冲突。我推荐最简方式：
# 创建项目文件夹 mkdir sales-dashboard && cd sales-dashboard # 初始化虚拟环境（Python 3.8+） python -m venv venv source venv/bin/activate # Linux/Mac # venv\Scripts\activate # Windows # 安装核心依赖 pip install flask pandas # 创建标准目录结构 mkdir templates static touch app.py touch templates/index.html touch static/main.js static/style.css最终项目结构长这样：
sales-dashboard/ ├── app.py # Flask主程序 ├── requirements.txt # 依赖清单 ├── templates/ │ └── index.html # 主页面HTML └── static/ ├── main.js # 前端交互逻辑 ├── style.css # 自定义样式 └── echarts.min.js # ECharts库（从官网下载）注意：
echarts.min.js不要用CDN！虽然<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js">一行就能引入，但一旦网络波动或CDN失效，你的看板就变空白页。正确做法是下载echarts.min.js（官网https://echarts.apache.org/zh/download.html选“精简版”）放到static/目录，然后在HTML里写<script src="{{ url_for('static', filename='echarts.min.js') }}"></script>。这样离线也能跑，部署到内网服务器零风险。
requirements.txt内容极简：
flask==2.3.3 pandas==2.0.3版本锁死很重要。我曾因pandas升级到2.1，df.to_json(orient='records')默认行为改变，导致前端解析JSON失败，排查了2小时才发现是版本问题。
3.2 后端Flask实现：专注数据计算，拒绝业务逻辑污染
app.py是整个看板的“大脑”，但它只干一件事：把用户请求的参数，变成ECharts能吃的JSON数据。代码必须干净、可读、易测试。下面是我实际使用的完整代码（已删减注释，保留核心逻辑）：
from flask import Flask, render_template, request, jsonify import pandas as pd import json app = Flask(__name__) # 全局加载一次数据，避免每次请求都读文件（性能关键！） # 实际项目中，这里可以换成数据库连接池 try: # 假设数据文件在项目根目录 df = pd.read_csv('sales_data.csv', encoding='utf-8') # 数据清洗：统一列名、处理空值 df.columns = ['date', 'region', 'product', 'amount'] df['date'] = pd.to_datetime(df['date']) df['amount'] = pd.to_numeric(df['amount'], errors='coerce').fillna(0) print(f"✅ 数据加载成功，共{len(df)}行") except Exception as e: print(f"❌ 数据加载失败：{e}") df = pd.DataFrame() # 空DataFrame，避免后续报错 @app.route('/') def index(): """首页：返回HTML页面""" return render_template('index.html') @app.route('/api/sales') def get_sales_data(): """API接口：返回按条件筛选的销售数据""" # 获取URL参数，设置默认值 region = request.args.get('region', '全部') start_date = request.args.get('start_date', '2024-01-01') end_date = request.args.get('end_date', '2024-12-31') # 数据筛选（核心业务逻辑） filtered_df = df.copy() if region != '全部': filtered_df = filtered_df[filtered_df['region'] == region] filtered_df = filtered_df[ (filtered_df['date'] >= start_date) & (filtered_df['date'] <= end_date) ] # 计算聚合数据：按日期分组求和，用于趋势图 trend_data = filtered_df.groupby('date')['amount'].sum().reset_index() trend_data['date'] = trend_data['date'].dt.strftime('%Y-%m-%d') # 格式化日期 # 计算地区分布：用于柱状图 region_data = filtered_df.groupby('region')['amount'].sum().reset_index() # 组装ECharts需要的JSON格式 result = { "trend": { "xAxis": trend_data['date'].tolist(), "series": [{"name": "销售额", "data": trend_data['amount'].tolist()}] }, "region": { "xAxis": region_data['region'].tolist(), "series": [{"name": "销售额", "data": region_data['amount'].tolist()}] } } return jsonify(result) if __name__ == '__main__': app.run(debug=True, host='0.0.0.0', port=5000)这段代码的关键设计点：
- 数据预加载：
df = pd.read_csv(...)放在全局，而不是每次API请求都读一次。10万行CSV，read_csv耗时约120ms，而内存中过滤只要5ms。这是性能分水岭。 - 参数防御性处理：
request.args.get('region', '全部')，即使URL里没传region参数，也不会报错，而是用默认值。 - 日期处理严谨：
pd.to_datetime确保日期可比较，strftime转成ECharts认的字符串格式（'2024-03-15'），避免时间戳导致图表X轴错乱。 - JSON结构清晰：返回的
result字典，直接对应前端ECharts的option配置项。trend部分给趋势图用，region部分给柱状图用，前端JS里data.trend.xAxis就能拿到X轴数据，无需二次解析。
实操心得：调试API时，别只盯着浏览器。打开终端，运行
curl "http://127.0.0.1:5000/api/sales?region=华东"，看返回的JSON是否符合预期。这是最快速的验证方式。我习惯在get_sales_data函数开头加print(f"🔍 接收参数：{dict(request.args)}")，日志一目了然。
3.3 前端HTML与CSS：用语义化标签构建健壮骨架
templates/index.html是看板的“脸面”，但它不负责美，只负责“准”。我坚持用最朴素的HTML5语义化标签，不引入Bootstrap等框架，原因有二：（1）减少外部依赖，部署更可靠；（2）CSS定制自由度更高。以下是精简后的核心代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>销售数据分析看板</title> <!-- 引入本地ECharts --> <script src="{{ url_for('static', filename='echarts.min.js') }}"></script> <!-- 引入自定义样式 --> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> </head> <body> <!-- 顶部标题栏 --> <header class="dashboard-header"> <h1>📊 销售数据分析看板</h1> <p>实时更新 · 支持筛选 · 可导出</p> </header> <!-- 主要内容区 --> <main class="dashboard-main"> <!-- 左侧筛选面板 --> <aside class="filter-panel"> <h2>🔍 筛选条件</h2> <div class="filter-item"> <label for="region-select">选择地区：</label> <select id="region-select"> <option value="全部">全部地区</option> <option value="华东">华东</option> <option value="华北">华北</option> <option value="华南">华南</option> </select> </div> <div class="filter-item"> <label for="date-range">日期范围：</label> <input type="date" id="start-date" value="2024-01-01"> <span>至</span> <input type="date" id="end-date" value="2024-12-31"> </div> <button id="apply-btn" class="btn-primary">应用筛选</button> </aside> <!-- 右侧图表区 --> <section class="chart-section"> <h2>📈 销售趋势（按日）</h2> <div id="trend-chart" class="chart-container"></div> <h2>📊 地区分布（汇总）</h2> <div id="region-chart" class="chart-container"></div> </section> </main> <!-- 引入自定义JS --> <script src="{{ url_for('static', filename='main.js') }}"></script> </body> </html>配套的static/style.css只做三件事：（1）重置默认边距；（2）让图表容器占满可用空间；（3）给按钮加一点呼吸感。代码如下：
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft YaHei", sans-serif; color: #333; background-color: #f8f9fa; } .dashboard-header { text-align: center; padding: 20px; background: #2c3e50; color: white; } .dashboard-main { display: flex; padding: 20px; gap: 20px; max-width: 1400px; margin: 0 auto; } .filter-panel { width: 280px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .chart-section { flex: 1; } .chart-container { height: 400px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 20px; } .btn-primary { width: 100%; padding: 10px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; } .btn-primary:hover { background: #2980b9; }注意事项：
.chart-container的height: 400px是硬性要求。ECharts初始化时需要一个有明确高度的DOM容器，否则图表会显示为一条细线。我曾因忘记设高度，在Chrome里图表正常，但在Edge里完全不显示，折腾半天才发现是这个CSS问题。
3.4 前端JavaScript与Ajax：让图表“活”起来的核心
static/main.js是看板的“神经”，它用Ajax把用户操作和后端数据连起来。代码必须模块化、可维护。以下是核心实现：
// 1. 初始化两个ECharts实例 let trendChart = echarts.init(document.getElementById('trend-chart')); let regionChart = echarts.init(document.getElementById('region-chart')); // 2. 定义通用的ECharts基础配置（复用） const baseOption = { tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false }, yAxis: { type: 'value' }, series: [{ type: 'line', smooth: true, areaStyle: {} }] }; // 3. 加载初始数据（页面打开时自动执行） function loadInitialData() { // 模拟首次加载，region=全部，日期为全年 fetchData('全部', '2024-01-01', '2024-12-31'); } // 4. 核心Ajax函数：向后端请求数据并渲染图表 function fetchData(region, startDate, endDate) { // 显示加载状态（用户体验细节） trendChart.showLoading(); regionChart.showLoading(); // 发送GET请求 fetch(`/api/sales?region=${encodeURIComponent(region)}&start_date=${startDate}&end_date=${endDate}`) .then(response => { if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); return response.json(); }) .then(data => { // 渲染趋势图 const trendOption = { ...baseOption, xAxis: { ...baseOption.xAxis, data: data.trend.xAxis }, series: data.trend.series.map(s => ({ ...s, type: 'line' })) }; trendChart.setOption(trendOption); // 渲染地区分布图 const regionOption = { ...baseOption, xAxis: { ...baseOption.xAxis, data: data.region.xAxis }, series: data.region.series.map(s => ({ ...s, type: 'bar' })) }; regionChart.setOption(regionOption); }) .catch(error => { console.error('❌ 数据加载失败：', error); alert('数据加载失败，请检查网络或联系管理员'); }) .finally(() => { // 隐藏加载状态 trendChart.hideLoading(); regionChart.hideLoading(); }); } // 5. 绑定筛选按钮事件 document.getElementById('apply-btn').addEventListener('click', function() { const region = document.getElementById('region-select').value; const startDate = document.getElementById('start-date').value; const endDate = document.getElementById('end-date').value; fetchData(region, startDate, endDate); }); // 6. 页面加载完成后执行 document.addEventListener('DOMContentLoaded', loadInitialData);这段JS的精华在于：
- 配置复用：
baseOption定义了所有图表共用的样式（tooltip、grid、坐标轴类型），避免重复代码。添加新图表时，只需扩展series部分。 - 错误处理闭环：
.catch()捕获网络错误或后端异常，并用alert友好提示，而不是让页面静默失败。 - 加载状态反馈：
showLoading()/hideLoading()让用户知道“系统正在工作”，避免误点多次按钮。 - URL编码安全：
encodeURIComponent(region)防止地区名含中文或特殊字符（如“华东&华南”）导致URL解析错误。
实操心得：调试Ajax时，打开浏览器开发者工具（F12），切到Network标签页，点击“应用筛选”，能看到
/api/sales?...请求。点开它，看Preview里的JSON数据是否和后端打印的一致。这是前端调试的黄金法则。
3.5 数据文件准备与测试：用真实数据驱动开发
没有数据，看板就是空中楼阁。我提供一个最小可行的sales_data.csv示例（10行），你可直接复制保存：
date,region,product,amount 2024-01-01,华东,A产品,12000 2024-01-02,华东,B产品,8500 2024-01-03,华北,A产品,9200 2024-01-04,华北,B产品,11000 2024-01-05,华南,A产品,7800 2024-01-06,华南,B产品,13500 2024-01-07,华东,A产品,10200 2024-01-08,华北,B产品,9600 2024-01-09,华南,A产品,8900 2024-01-10,华东,B产品,12800把它和app.py放在同一目录，运行python app.py，浏览器打开http://127.0.0.1:5000，就能看到效果。注意三点：
- CSV必须是UTF-8编码，Windows记事本另存为时选“UTF-8”，别用ANSI。
- 列名必须和
app.py里df.columns = ['date', 'region', 'product', 'amount']完全一致，大小写、下划线都不能错。 - 数值列（如
amount）不能有逗号（12,000），否则pd.to_numeric会转成NaN。
测试时，我习惯按顺序验证：
- 直接访问
/api/sales，看是否返回JSON； - 修改URL参数，如
/api/sales?region=华东，看返回数据是否只含华东记录； - 在页面上点筛选，看图表是否实时更新；
- 打开Network，确认每次点击只发起1个Ajax请求，没有多余请求。
4. 进阶功能与避坑指南：从能用到好用的关键跃迁
4.1 常见问题速查表：那些让我熬夜的Bug
| 问题现象 | 根本原因 | 解决方案 | 重现概率 |
|---|---|---|---|
| 图表显示为空白，控制台无报错 | HTML中<div id="chart">容器没有设置height | 在CSS中为.chart-container添加height: 400px | ⭐⭐⭐⭐⭐（新手必踩） |
| 点击筛选后，图表不更新，但Network里请求成功 | JavaScript中setOption调用前，ECharts实例未初始化 | 确保echarts.init()在DOMContentLoaded之后执行，或用if (trendChart) trendChart.setOption(...)加判空 | ⭐⭐⭐⭐ |
| 中文显示为方块（） | ECharts未配置中文字体 | 在baseOption中添加textStyle: { fontFamily: 'Microsoft YaHei' } | ⭐⭐⭐⭐ |
日期X轴显示为1704067200000（时间戳） | 后端返回的日期是datetime64类型，未转字符串 | trend_data['date'] = trend_data['date'].dt.strftime('%Y-%m-%d') | ⭐⭐⭐ |
| 筛选下拉框选项不生效，始终显示“全部” | HTML中<select>的value属性和后端request.args.get()的键名不一致 | 检查<select id="region-select">和request.args.get('region')，确保key名相同 | ⭐⭐ |
个人体会：第1个问题（空白图表）我遇到过3次，每次都是因为复制了别人的HTML，忘了改CSS。后来养成习惯：新建一个
chart-container，第一件事就是写height: 400px，再写其他。
4.2 三个立竿见影的体验优化技巧
技巧1：添加“导出为图片”按钮
ECharts原生支持chart.getDataURL()，一行代码生成PNG。在HTML的筛选区下方加：
<button id="export-btn" class="btn-secondary">📥 导出当前图表</button>在main.js里加：
document.getElementById('export-btn').addEventListener('click', function() { const url = trendChart.getDataURL({ type: 'png', pixelRatio: 2 }); // 高清图 const link = document.createElement('a'); link.href = url; link.download = 'sales-trend.png'; link.click(); });用户点击就下载，比截图专业十倍。
技巧2：日期选择器自动填充“最近7天”
把<input type="date">改成动态默认值：
<input type="date" id="start-date" value=""> <input type="date" id="end-date" value="">在main.js的loadInitialData函数里加：
// 设置默认日期：今天和7天前 const today = new Date(); const lastWeek = new Date(); lastWeek.setDate(today.getDate() - 7); document.getElementById('start-date').value = lastWeek.toISOString().split('T')[0]; document.getElementById('end-date').value = today.toISOString().split('T')[0];技巧3：防抖处理高频筛选
用户狂点“应用筛选”按钮，会触发多次Ajax请求。加个简单防抖：
let debounceTimer; document.getElementById('apply-btn').addEventListener('click', function() { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { const region = ...; // 获取参数 fetchData(region, startDate, endDate); }, 300); // 300ms内只执行最后一次 });4.3 从单机到部署：三步上线到服务器
本地能跑不等于线上可用。部署时牢记三个原则：静态资源分离、进程守护、端口映射。
步骤1：静态资源分离
把static/目录下的echarts.min.js等文件，放到Nginx的/var/www/dashboard/static/目录。修改index.html中的引用路径为绝对URL：<script src="/static/echarts.min.js"></script>。这样Nginx直接返回静态文件，不走Flask，性能翻倍。
步骤2：用Gunicorn替代Flask内置服务器pip install gunicorn，然后运行：
gunicorn -w 2 -b 127.0.0.1:8000 app:app-w 2表示2个工作进程，能并发处理请求；-b绑定本地端口，不对外暴露。
步骤3：Nginx反向代理
配置Nginx（/etc/nginx/sites-available/dashboard）：
server { listen 80; server_name your-domain.com; location /static/ { alias /var/www/dashboard/static/; } location / { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }重启Nginx，sudo systemctl restart nginx，搞定。用户访问http://your-domain.com，看到的就是你的看板。
注意：生产环境务必关闭
debug=True，否则会暴露代码路径。在app.py里加：
if __name__ == '__main__': app.run(debug=False, host='0.0.0.0', port=5000) # 仅开发用正式部署用Gunicorn，debug参数无效。
5. 代码下载与后续扩展：让这个看板真正属于你
项目完整代码已整理完毕，包含：
app.py：Flask后端（含数据加载、API接口）templates/index.html：主页面（含筛选区、图表容器）static/目录：main.js（Ajax交互）、style.css（样式）、echarts.min.js（已下载好）sales_data.csv：示例数据文件requirements.txt：依赖清单
你可以通过以下任一方式获取：
- GitHub Gist：搜索
flask-echarts-sales-dashboard，找到最新版； - 网盘链接：在评论区留言“看板代码”，我会私信发送（注意查收垃圾邮件）；
- 手动复制：本文所有代码块已高亮，逐段复制粘贴即可。
拿到代码后，不要直接运行。请按顺序做三件事：
- 修改
app.py里的pd.read_csv('sales_data.csv')，换成你自己的Excel或数据库连接； - 打开
index.html，把<select>里的地区选项，替换成你业务中的真实区域（如“东北大区”“西南大区”）； - 运行
python app.py，在浏览器打开，用你的真实数据测试。
这个看板的后续扩展方向，我列了三个最实用的：
- 加一个“数据表格”Tab：用
<table>展示原始数据，配合datatables.net插件实现搜索、排序，让业务人员能查明细； - 接入数据库：把
pd.read_csv换成pd.read_sql("SELECT * FROM sales", engine)，用sqlalchemy连接MySQL/PostgreSQL，数据实时更新； - 添加权限控制：在
get_sales_data函数开头加if not is_admin(): return jsonify({"error": "无权限"})，用简单Session或Token做粗粒度控制。
最后分享一个小技巧：**每次加新功能，先写一个最简版本，
