# 简单的数据可视化

**Repository Path**: deng-sipeng/simple-data-visualization

## Basic Information

- **Project Name**: 简单的数据可视化
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-10-31
- **Last Updated**: 2024-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 可视化

## README

# 简单的数据可视化

#### 介绍
本项目志在通过一个方便，快捷的可视化工具，来帮助用户通过前端页面快速完成数据可视化的要求。

#### 软件架构
软件架构说明
1. 前端负责展示数据信息。
2. 后端负责数据的相关计算。
3. 数据库负责存储数据，以及将后端计算后的结果发送给前端。


#### 安装教程

1. python下载。
2. pycharm下载安装。
3. vscode及相关插件下载安装。
4. mysql下载安装。
5. navicat下载来便利mysql操作。

相关记录或工作汇报
一. 10.24日-10.31日
1. 完成了vscode的下载，写出了第一个简单的可视化前端页面。（使用的死数据，即在前端代码中把数据已经定义出来了）
2. 完成了python和pycharm的下载安装，下载了后端框架flask，并且第一次写出了hello，world。
![输入图片说明](image/image.png)
3. 完成了mysql的下载安装，利用navicat来方便操作mysql数据库。
## 二. 汇报
### 11.1 日工作汇报
1. 使用前后端和sql数据库初步实现饼图实现（使用了echart前端页面实现）。
工作结果:
![输入图片说明](image/image1.png)
### 11.2 日工作汇报
1. 利用爬虫爬取2024.10月成都市的天气数据。
![爬取的数据](image/1.0image.png)
![爬取的网站](image/data-from-web-image1.0image.png)
2. 使用爬取的数据进行数据可视化处理，前端页面左边进行数据展示，右边利用折线图，饼图和雷达图可视化最高和最低气温，天气状况占比，风向数据。
![输入图片说明](image/Frist-DataVis1.0image.png)
3. 完善昨天设计的饼图，加上直方图，雷达图，散点图，以及折线图
![输入图片说明](image/Database-from-vis-image1.0image.png)
### 11.3 日工作汇报
1. 下一步实现文件上传功能。
2. 将上传的文件导入mysql中。
3. 实现上传文件数据的可视化处理。
### 11.4 日工作汇报
1. 解决处理文件上传功能出现的问题。
2. 实现上传文件数据的可视化处理。
### 11.5日工作汇报
1. 实现文件的上传。（将原来从数据库读取的天气数据改为从页面上传读取数据）
2. 前端存储的数据有限。超过限度报错。
3. 读取csv文件和xls文件。
![输入图片说明](image/up-xls-image1.0image.png)
![输入图片说明](image/up-csvdata-image1.0image.png)
### 11.11日工作汇报
1.经过几天的努力，实现了对未知数据的判断和生成对应的数据图表。
![输入图片说明](image/data-decide-vis-image1.0image.png)
### 11.17日工作汇报
1.修改了代码中存在的小问题（如果所有纯数字数据无法正常显示）。
![输入图片说明](image/%E7%BA%AF%E6%95%B0%E5%AD%97%E6%95%B0%E6%8D%AE%E6%94%B9bugimage.png)
### 11.18日工作汇报
1.修改了图像视图，增加了桑基图，将饼状图进行了修改，增加了漏斗图。
![输入图片说明](image/%E6%A1%91%E5%9F%BA%E5%9B%BEimage.png)
### 11.26日工作汇报
1.重构了一下代码。
2.给每个图像加了一个边框。
![输入图片说明](image/%E9%87%8D%E6%9E%84%E4%BB%A3%E7%A0%81+%E8%BE%B9%E6%A1%86image.png)
### 12.2日更新
1.增加了选择图表显示图表，根据用户需求来显示图表。
![输入图片说明](image/%E9%80%89%E6%8B%A9%E5%9B%BE%E8%A1%A8image.png)
### 12.11日更新
1.优化了图表显示。
![输入图片说明](image/e7bd368cf4174802ae8f502ff6fa6658.png)
### 12.16日更新
1.将上传文件，数据选择，图表选择改为配置文件。
![输入图片说明](image/%E9%85%8D%E7%BD%AEimage.png)
选择文件位置，文件数据列，图表选择。
2.根据选择来生成表格和对应的图表。
![输入图片说明](image/Json%E5%9B%BE%E7%89%87image.png)
![输入图片说明](image/%E6%95%88%E6%9E%9C%E5%9B%BE1image.png)
### 12.26日更新
1.添加了背景颜色控制和整个图表容器控制的配置文件。
2.添加了控制指定图表的容器的配置文件。
![输入图片说明](image/12-26%E9%85%8D%E7%BD%AE%E6%9B%B4%E6%96%B0%E5%90%8E%E7%95%8C%E9%9D%A2image.png)
![输入图片说明](image/12-26%E6%97%A5%E6%93%8D%E4%BD%9C%E7%95%8C%E9%9D%A2%E5%9B%BEed632782197ac556be7fddad040c0c11.png)