企业官网建设流程全解析

一、 需求与看板设计

做之前先理了一下看板要展示什么：

1. 顶部：数据概览区，放总人数、平均分、最高分的数据卡片。
2. 中部：左边用柱状图对比各科平均分，右边用饼图展示班级人数占比。
3. 下部：用折线图展示成绩分布趋势。
4. 底部：明细数据表，把原始数据展示出来。

二、 环境配置与踩坑

因为之前做过实验一，Python环境和pandas都装好了。但Streamlit和Plotly这两个库还没装。
我直接在PyCharm界面点安装依然卡住，于是老规矩，打开底部Terminal，用清华源安装：
pip install streamlit plotly -i https://pypi.tuna.tsinghua.edu.cn/simple

三、 数据准备与编码踩坑

准备数据时，我在 Excel 里弄了一份 data.csv，包含姓名、班级、课程、分数、日期。为了测试，里面特意放了一个同学数学考了58分。

踩坑1：数据全挤在一列了
最初我把数据直接粘到Excel里，结果所有文字都挤在了A列。查了一下，用Excel的“数据” -> “分列”功能，选择“逗号”就能拆开。但拆完后，文件保存时又经常带一些隐藏的BOM格式。

踩坑2：KeyError: ‘姓名’
看板网页打开后，直接报错 KeyError: ‘姓名’，提示找不到这一列。排查后发现，原因是复制数据时带上了全角的逗号，或者文件头部有隐藏的BOM编码。
解决办法：直接在PyCharm里新建 data.csv，手动确保输入法在英文状态下，重新录入纯文本数据。并在 pd.read_csv() 里加上 encoding=“utf-8-sig” 指定编码格式。改完后，数据读取终于正常了。

四、 看板代码搭建

数据通了之后，写 app.py。代码主要分四块：

1. 数据卡片：用 st.metric 展示总人数、平均分、最高分。
2. 柱状图：用 px.bar 按课程分组，展示各科平均分。
3. 饼图：用 px.pie 展示班级人数占比。
4. 折线图：用 px.line 展示日期和分数的变化趋势。
   用 st.columns(2) 把图表左右排布，页面就不会太挤。
   

五、 启动踩坑

代码写好后，习惯性点了PyCharm右上角的绿色运行按钮。结果控制台报了一堆红色的 missing ScriptRunContext! 警告，浏览器里毫无动静。
原因：Streamlit 跟普通 Python 脚本不一样，不能直接点运行按钮，它必须通过命令行启动。
解决办法：在底部Terminal里输入 streamlit run app.py，回车后，浏览器终于弹出了页面。

六、 结果验证与总结

看板终于跑出来了：

· 总人数：4人。
· 平均分：78.1。
· 最高分：92。
数据核对没问题。页面排版也很整洁。

实验总结：
这次实验花在解决报错上的时间比写代码还多。总结下来就是：数据文件千万别用Excel反复倒腾，容易出格式问题，直接新建CSV手打或者用UTF-8格式保存最稳；另外，启动Web应用一定要注意不能用常规的运行按钮，得用命令行。