Python:使用pandas做数据处理,使用pyecharts做数据可视化生成,使用flask制作接口(用于根据年份更新对应的数据)
数据来源于公共卫生科学数据中心 (phsciencedata.cn)
HTML + CSS + JS:用于前端页面的渲染。
- 使用jQuery库实现AJAX发送请求到服务器用来更新各年份对应的数据以及生成对应省份的3D图。
- 使用Bootstrap库实现图片的轮播以及3D模态框的展示。
参考10分钟在网站上增加一个AI助手,利用阿里云百炼,将通义千问接入项目,提供艾滋病相关知识的科普。
POST /update_year
传入前端选择框中的year,根据year执行对应的生成统计图表的Python文件。
GET /generate_3d_map
前端通过监听鼠标点击事件,识别用户点击的哪一个省份。将省份province传入该接口,province作为参数传入生成3D图的函数,生成对应省份的3D html文件到fe/template/static/province
整个页面展示了五个统计图
- 饼图(Pie):分年龄段展示本年艾滋病人数
- 象形柱状图(PictorialBar):展示本年艾滋病全国发病数/死亡数前十名
- 折线图(Line):2010-2020年全国发病率/死亡率走势图
- 地图(Map):展示本年艾滋病全国分布情况
- 3D地图(Map3D):展示每个省份的3D效果
点击年份选择框,可以更新对应年份的数据。
页面中心有三张有关艾滋病科普知识的图片进行轮播。
点击右下角的小圆圈,可以调出AI(通义千问),用户可以与其对话,了解艾滋病的相关知识。
点击全国艾滋病分布情况中的任意省份,页面会弹出对应省份的3D图。
环境
- Python 3.11.2
- node v18.19.0
- Debian bookworm
先安装依赖
pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple/
然后运行app.py
,期间保持其一直运行(建议制作service)
python3 app.py
再进入analysis/fe/template
,先安装依赖
npm install
最后运行程序
npm run dev -- --host
整个程序的入口为以下这些IP
整个项目已打包为Docker镜像,并推送至仓库。
beatrueman/analisis:1.0.0
docker run -p 5173:5173 beatrueman/analisis:1.0.0