淘宝用户行为分析大数据可视化

此项目旨在分析淘宝用户的行为数据，通过可视化技术展示关键统计数据，帮助了解用户的行为模式和偏好。项目包括数据处理、数据可视化以及后端数据服务。

获取项目代码 🚀 点击此处获取完整项目代码

运行效果展示图

视频演示

• 前端: HTML, CSS, Javascript, ECharts
• 后端: Flask
• 数据处理: Python, pandas
• 数据库: MySQL
• 缓存: Flask-Caching

• 数据读取:

  • 从名为 的文件中读取用户行为数据。这些数据包括用户ID、商品ID、行为类型（点击、购买、收藏等）、行为发生时间等字段。

• 数据清洗:

  • 清除空值和重复值: 对数据进行清洗操作，去除空值和重复的数据记录，确保数据质量。
  • 处理时间戳: 将时间戳字段转换为可识别的日期时间格式，以便后续的时间分组统计。
  • 时间范围处理: 根据业务需求，确保数据时间范围合理，可能需要过滤掉异常时间点或不合理的时间数据。

• 特征工程:

  • 行为统计: 根据用户行为类型（点击、购买、收藏等），计算各种行为的统计数据，如每个用户的总点击次数、总购买次数、总收藏次数等。
  • 独热编码处理: 将分类数据（如行为类型）转换为独热编码形式，以便后续的机器学习模型或分析使用。

• 数据库存储:

  • 将经过清洗和特征工程处理后的数据保存到 MySQL 数据库中。数据库中的表结构应该能够容纳用户行为数据，并支持快速查询和统计。
  • 每日和每小时的行为统计数据文件生成: 将数据按照日期和小时进行分组，生成每日和每小时的行为统计数据文件。这些文件可以用于后续的数据分析、报表生成或者用作机器学习模型的训练数据。

通过以上数据处理流程，可以保证从原始数据到最终存储的过程中数据质量和处理效率的高标准。这些步骤不仅保证了数据的准确性和完整性，还为后续的数据分析和应用提供了基础。

5.1 HTML (index.html)

• 功能:

  • 定义页面的整体结构和布局。
  • 包含头部导航栏、数据概览表格和多个图表容器。
  • 页面内的按钮和导航元素用于提供用户交互功能，如刷新数据和切换视图。

• 具体内容:

  • 头部: 包含页面标题和导航栏，便于用户在不同数据视图之间进行切换。导航栏中的按钮可以触发不同的前端功能，如刷新数据和切换到每日或分时统计视图。
  • 数据概览表格: 显示关键统计数据的表格，如用户数、商品数、类别数、点击数、购买数、购物车数和收藏数。这些数据可以帮助用户快速了解整体情况。
  • 图表容器: 定义用于嵌入和展示 ECharts 图表的 容器。每个图表容器对应一个特定的数据视图，例如每日用户行为统计、分时用户行为统计、点击Top10商品和购买Top10商品。

5.2 CSS (layer.css)

• 功能:

  • 设置页面的全局样式和布局样式，确保页面的一致性和美观性。
  • 使用媒体查询实现响应式设计，确保页面在不同设备和屏幕尺寸下都能正常显示和使用。

• 具体内容:

  • 全局样式: 定义基本的字体、颜色和其他全局样式设置，确保页面的整体视觉效果一致。
  • 布局样式: 配置头部、导航栏、数据表格和图表容器的布局，使页面结构清晰、内容易于阅读。
  • 媒体查询: 根据不同的屏幕尺寸调整布局和样式，确保在移动设备和桌面设备上都有良好的用户体验。例如，在小屏幕设备上，图表容器可能会从横向排列改为纵向排列，以适应屏幕宽度。

5.3 Javascript (chart.js)

• 功能:

  • 负责从后端获取数据，并将数据传递给图表组件。
  • 初始化并配置 ECharts 图表，包括设置图表的动画效果和事件监听，以增强用户的交互体验。

• 具体内容:

  • 获取数据: 使用 AJAX 请求从后端 API 获取图表所需的数据。确保数据请求的稳定性和正确性，并处理可能的错误情况。
  • 初始化图表: 使用 ECharts 初始化图表实例，配置图表的基本选项，包括标题、图例、坐标轴和数据系列。
  • 渲染图表: 将获取的数据填充到图表中，并在页面上渲染图表。确保图表能够动态更新和显示最新的数据。
  • 事件监听: 为图表添加交互事件监听器，如点击事件和悬停事件。通过这些事件可以实现更丰富的交互功能，如点击图表元素显示详细信息或跳转到相关页面。

通过以上 HTML、CSS 和 Javascript 的协调工作，前端部分能够实现良好的用户界面和交互体验，动态展示数据分析结果，并支持用户进行多种操作和查看不同的数据视图。

Flask 应用 (app.py)

• API 接口: Flask 应用提供了一个 API 接口，用于处理前端请求。主要的 API 是 ，该接口返回图表所需的数据。前端通过调用此接口获取数据并进行展示。

• 处理前端请求: Flask 应用的主程序处理前端发送的 HTTP 请求。根路径 返回一个 HTML 页面，其中包含数据概要信息。API 路径 处理 GET 请求，返回所需的图表数据。

• 数据预处理: 在启动 Flask 应用时，如果本地数据文件不存在，会预先处理数据并将结果存储到 CSV 文件中。这些预处理包括按日期、按小时、按商品 ID 分组汇总数据，并生成数据概览。

• 数据缓存: 为了提高性能，Flask 应用使用 模块缓存 API 接口的响应数据。缓存时间设定为 3600 秒（即 1 小时），在此时间段内重复的请求会直接从缓存中获取数据，而不需要重新处理。

• 数据读取与分页: 从预处理生成的 CSV 文件中读取数据，并根据请求的分页参数（page 和 page_size）进行分页处理，以减少一次性返回大量数据的压力。

数据服务 (dataService.js)

• HTTP 请求: 负责发起 HTTP 请求，调用 Flask 应用提供的 API 接口 ，以获取所需的图表数据。

• 错误处理: 在发起 HTTP 请求过程中， 处理可能出现的网络错误和响应错误。如果请求失败，会在控制台打印错误信息，并返回 ，以确保前端能够处理数据获取失败的情况。

通过以上后端部分的设计和实现，整个应用能够高效地处理前端请求，提供所需的图表数据，并通过缓存机制提高性能，确保用户体验的流畅性。

7.1 ECharts 图表

• 每日用户行为统计

  • 功能: 展示每日用户在平台上的各类行为的统计数据，包括点击、购买、添加购物车和收藏等行为。
  • 具体内容:
    • 图表类型: 采用折线图或柱状图，便于展示随时间变化的趋势。
    • 数据展示: 每日的行为数据以时间为横轴，行为数量为纵轴进行展示。
    • 交互功能: 支持鼠标悬停显示详细数据，点击某一天的数据点可以显示该天的详细行为信息。

• 分时用户行为统计

  • 功能: 细化展示用户在不同时间段内的行为数据，帮助了解一天内用户行为的峰谷时段。
  • 具体内容:
    • 图表类型: 采用堆叠柱状图或面积图，以不同颜色区分不同的行为类型。
    • 数据展示: 时间以小时为单位，横轴表示一天中的24个小时，纵轴表示各个时间段的行为数量。
    • 交互功能: 鼠标悬停时显示具体时间段的详细数据，支持放大某个时间段进行更详细的查看。

• 点击Top10商品

  • 功能: 展示点击次数最多的前10个商品，帮助了解用户最感兴趣的商品。
  • 具体内容:
    • 图表类型: 采用横向条形图，便于比较不同商品的点击次数。
    • 数据展示: 横轴表示商品名称或ID，纵轴表示点击次数。前10个点击次数最多的商品按从高到低排序。
    • 交互功能: 鼠标悬停时显示商品的详细信息，点击某个商品可以跳转到商品详情页面或显示更详细的统计信息。

• 购买Top10商品

  • 功能: 展示购买次数最多的前10个商品，帮助了解用户购买行为的偏好。
  • 具体内容:
    • 图表类型: 采用横向条形图，便于比较不同商品的购买次数。
    • 数据展示: 横轴表示商品名称或ID，纵轴表示购买次数。前10个购买次数最多的商品按从高到低排序。
    • 交互功能: 鼠标悬停时显示商品的详细信息，点击某个商品可以跳转到商品详情页面或显示更详细的统计信息。

通过这些 ECharts 图表，可以直观、动态地展示淘宝用户的行为数据，帮助分析和理解用户行为模式和偏好，从而为业务决策提供有力支持。图表的交互功能增强了用户体验，使数据的展示更加生动和易于理解。

• 数据读取与处理:

  • 文件:
  • 功能: 该模块负责从 CSV 文件中读取原始数据。读取的数据可能包含缺失值和不一致的数据格式，因此模块中包含数据清洗和转换的功能。特征工程部分用于从原始数据中提取有用的特征，以便后续的分析和可视化。
  • 具体步骤:
    • 使用 pandas 库读取 CSV 文件。
    • 处理缺失值，如填充、删除或插值。
    • 数据格式转换，如日期格式统一。
    • 特征工程，如创建新的衍生特征或数据聚合。

• 数据库操作:

  • 工具: SQLAlchemy
  • 功能: 该模块负责与 MySQL 数据库的交互。使用 SQLAlchemy 创建数据库连接，定义数据模型，并将处理后的数据保存到数据库中。
  • 具体步骤:
    • 创建数据库连接字符串，配置数据库连接参数。
    • 使用 SQLAlchemy 定义 ORM 模型，映射数据库表结构。
    • 将清洗和处理后的数据插入数据库表中。
    • 实现查询功能，以便后端 API 可以获取需要的数据。

• 后端 API:

  • 框架: Flask
  • 功能: 提供 RESTful API 接口，供前端通过 AJAX 调用以获取图表数据。API 负责从数据库中检索数据，并以 JSON 格式返回给前端。
  • 具体步骤:
    • 定义 Flask 应用程序，配置路由。
    • 实现数据查询 API，处理前端请求。
    • 在 API 中调用数据库操作模块，从数据库检索数据。
    • 将检索到的数据转换为 JSON 格式，并通过 API 返回。

• 图表渲染:

  • 库: ECharts, chart.js
  • 功能: 负责在前端页面中使用 ECharts 库渲染图表。初始化和配置图表，包括过渡动画和事件监听，以提高用户交互体验。
  • 具体步骤:
    • 在前端页面中引入 ECharts 和 chart.js 库。
    • 使用 AJAX 请求后端 API 获取图表数据。
    • 使用 ECharts 初始化图表，配置图表选项，如图例、轴、数据系列等。
    • 实现图表过渡动画，以增强视觉效果。
    • 监听图表事件，如点击、悬停，提供用户交互功能。

通过这些功能模块，系统能够高效地处理数据，存储和检索数据，并在前端提供动态、交互性强的数据可视化图表。

• layer.css: 定义了 HTML 元素、布局、图表容器和按钮的样式，确保页面的整体外观。
• index.html: 使用 HTML 构建页面结构，包含头部、数据表格、图表容器和按钮。
• chart.js: 包含初始化 ECharts 图表实例、定义图表选项、获取后端数据并渲染图表的逻辑。
• dataService.js: 提供 函数，用于发送 HTTP 请求并处理响应数据。
• data_processing.py: 负责读取、清洗和处理用户行为数据，并将处理后的数据存入数据库。
• app.py: 创建 Flask 应用，提供 API 接口以供前端获取图表数据，并配置缓存。

• API 路由:

  • 参数: 无参数

    • 说明: 该 API 不需要额外的请求参数，调用时直接返回所有图表所需的数据。

  • 返回值: 返回 JSON 格式的图表数据

    • 数据结构: 返回的数据包括以下几个部分：

      • 每日用户行为统计（）：包含每一天的用户点击、购买、加入购物车和收藏行为的统计数据。
      • 分时用户行为统计（）：包含每天每小时的用户点击、购买、加入购物车和收藏行为的统计数据。
      • 点击 Top10 商品（）：包含点击次数最多的前10个商品的详细信息。
      • 购买 Top10 商品（）：包含购买次数最多的前10个商品的详细信息。

    • 字段说明：

      • 每日用户行为统计：
        • ：日期（格式为 ）
        • ：点击次数
        • ：购买次数
        • ：加入购物车次数
        • ：收藏次数
      • 分时用户行为统计：
        • ：小时（格式为 ）
        • ：点击次数
        • ：购买次数
        • ：加入购物车次数
        • ：收藏次数
      • 点击 Top10 商品：
        • ：商品ID
        • ：商品名称
        • ：点击次数
      • 购买 Top10 商品：
        • ：商品ID
        • ：商品名称
        • ：购买次数

通过这个 API，前端可以轻松获取所需的所有图表数据，并根据需要进行展示和交互。这些数据将用于绘制每日和分时用户行为统计图表，以及点击和购买次数最多的商品排行图表，帮助用户直观地了解淘宝用户的行为模式和偏好。

项目通过对淘宝用户行为数据的分析，提供以下功能：

• 展示每日用户的点击、购买、购物车和收藏行为统计
• 展示分时用户的点击和购买行为统计
• 展示点击Top10商品和购买Top10商品
• 提供数据概览，包括用户数、商品数、类别数、点击数、购买数、购物车数和收藏数

12.1 HTML (index.html)

定义页面结构，包含头部、数据表格和图表容器。

12.2 CSS (layer.css)

定义全局样式和各部分的样式。

12.3 Javascript (chart.js)

初始化 ECharts 图表，并从后端获取数据。

12.4 Javascript (dataService.js)

从后端获取图表数据。

12.5 数据处理 (data_processing.py)

读取、处理和存储用户行为数据。

12.6 Flask 应用 (app.py)

提供 API 接口，并从数据库读取数据。