【免费】基于Spark实时电商用户行为分析与预测(Java版本+可视化大屏+Kafka+SpringBoot+Vue3) 锋哥原创出品，必属精品

java1234_小锋2026-07-26 8:56

大家好，我是Java1234_小锋老师，分享一套锋哥原创的基于Spark实时电商用户行为分析与预测(Java版本+可视化大屏+Kafka+SpringBoot+Vue3)

项目介绍

随着电子商务行业的快速发展，平台每天都会产生海量的用户行为数据，包括浏览、加购、收藏和购买等。如何对这些行为数据进行实时采集、高效统计与科学预测，已成为电商运营决策和智能推荐的关键问题。传统的离线批处理方式存在延迟高、反馈慢、难以支撑实时运营的不足，因此构建一套面向实时场景的电商用户行为分析与预测系统具有重要的工程意义和应用价值。

本文设计并实现了基于 Spark 的实时电商用户行为分析与预测系统。系统采用前后端分离架构，后端以 Java 与 Spring Boot 为核心构建 REST 接口服务，结合 Apache Kafka 完成行为事件的异步投递与缓冲，利用 Spark MLlib 对窗口销售额进行线性回归预测，并将结果持久化至 MySQL；前端基于 Vue3、Element Plus 与 ECharts 实现管理后台与可视化大屏。系统主要功能包括管理员登录与个人中心、数据概览、行为数据查询、商品管理、实时统计、销售额预测以及可视化大屏展示。

在数据分析方面，系统通过行为模拟器持续生成 pv、cart、fav、buy 四类行为事件，按时间窗口聚合 PV、UV、加购数、收藏数、购买数和销售额等指标；在预测方面，采用滞后特征与小时特征构建训练集，优先使用 Spark 线性回归模型，并在异常情况下自动降级为 Java OLS 回归，保证服务可用性。测试结果表明，系统能够稳定完成实时统计与预测展示，界面交互清晰，能够满足本科毕业设计对完整性、可用性和技术综合性的要求。

源码下载

链接: https://pan.baidu.com/s/1bdwW7xpV4z9jKPVVHKTscg?pwd=1234

提取码: 1234

系统展示

核心代码

java 复制代码 
package com.java1234.controller;

import com.java1234.common.PageResult;
import com.java1234.common.Result;
import com.java1234.dto.ErrorMetricOut;
import com.java1234.dto.PredictionOut;
import com.java1234.service.PredictionService;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
import java.util.Map;

/**
 * 预测分析控制器
 */
@RestController
@RequestMapping("/api/prediction")
public class PredictionController {

    private final PredictionService predictionService;

    public PredictionController(PredictionService predictionService) {
        this.predictionService = predictionService;
    }

    /**
     * 分页查询预测结果
     */
    @GetMapping("/list")
    public Result<PageResult<PredictionOut>> list(
            @RequestParam(defaultValue = "1") int page,
            @RequestParam(defaultValue = "10") int size) {
        return Result.ok(predictionService.list(page, size));
    }

    /**
     * 对比图表
     */
    @GetMapping("/compare")
    public Result<List<PredictionOut>> compare() {
        return Result.ok(predictionService.compare());
    }

    /**
     * 误差指标
     */
    @GetMapping("/error")
    public Result<ErrorMetricOut> error() {
        return Result.ok(predictionService.error());
    }

    /**
     * 残差数据
     */
    @GetMapping("/residual")
    public Result<List<Map<String, Object>>> residual() {
        return Result.ok(predictionService.residual());
    }
}
html 复制代码 
<template>
  <div class="page-container">
    <div class="page-card">
      <div class="page-title">销售额预测分析</div>

      <!-- 误差指标卡片 -->
      <div class="error-cards">
        <div class="error-card">
          <div class="metric-label">RMSE (均方根误差)</div>
          <div class="metric-value">{{ errorMetric.rmse }}</div>
        </div>
        <div class="error-card">
          <div class="metric-label">MAE (平均绝对误差)</div>
          <div class="metric-value">{{ errorMetric.mae }}</div>
        </div>
        <div class="error-card">
          <div class="metric-label">MAPE (平均绝对百分比误差 %)</div>
          <div class="metric-value">{{ errorMetric.mape }}%</div>
        </div>
      </div>

      <!-- 真实 vs 预测对比图 -->
      <div ref="compareRef" class="pred-chart pred-chart-compare"></div>

      <!-- 残差图 -->
      <div ref="residualRef" class="pred-chart pred-chart-residual"></div>

      <!-- 预测数据表格 -->
      <el-table :data="tableData" stripe border style="width:100%">
        <el-table-column prop="window_time" label="时间窗口" min-width="170">
          <template #default="{ row }">{{ formatWindowTime(row.window_time) }}</template>
        </el-table-column>
        <el-table-column prop="true_sales" label="真实销售额" min-width="130">
          <template #default="{ row }">
            <span style="color:#409eff;font-weight:600">¥{{ row.true_sales }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="pred_sales" label="预测销售额" min-width="130">
          <template #default="{ row }">
            <span style="color:#67c23a;font-weight:600">¥{{ row.pred_sales }}</span>
          </template>
        </el-table-column>
        <el-table-column label="误差" min-width="120">
          <template #default="{ row }">
            <span :style="{ color: Math.abs(row.true_sales - row.pred_sales) > 500 ? '#f56c6c' : '#909399' }">
              ¥{{ (row.true_sales - row.pred_sales).toFixed(2) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="生成时间" min-width="170">
          <template #default="{ row }">{{ formatDateTime(row.create_time) }}</template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:16px;justify-content:flex-end"
        v-model:current-page="page"
        v-model:page-size="size"
        :total="total"
        layout="total, prev, pager, next"
        @change="loadTable"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import request from '@/utils/request'
import { formatDateTime, formatWindowTime } from '@/utils/format'

const errorMetric = ref({ rmse: 0, mae: 0, mape: 0 })
const tableData = ref([])
const page = ref(1)
const size = ref(10)
const total = ref(0)
const compareRef = ref(null)
const residualRef = ref(null)
let charts = []

/**
 * X 轴日期时间标签配置（分行显示，避免底部裁切）
 */
function buildAxisLabel() {
  return {
    rotate: 30,
    interval: 'auto',
    hideOverlap: true,
    fontSize: 11,
    margin: 16,
    formatter(val) {
      const text = formatWindowTime(val)
      if (text.length >= 16) return `${text.slice(0, 10)}\n${text.slice(11)}`
      return text
    },
  }
}

/**
 * 初始化真实销售额 vs 预测销售额对比图
 */
function initCompareChart(data) {
  const chart = echarts.init(compareRef.value)
  const labels = data.map(d => formatWindowTime(d.window_time))
  chart.setOption({
    title: { text: '真实销售额 vs 预测销售额 对比', left: 'center', textStyle: { fontSize: 15 } },
    tooltip: {
      trigger: 'axis',
      formatter(params) {
        const idx = params[0]?.dataIndex ?? 0
        const lines = [labels[idx] || '']
        params.forEach(p => lines.push(`${p.marker}${p.seriesName}: ${p.value}`))
        return lines.join('<br/>')
      },
    },
    // 图例放顶部，避免与底部日期重叠
    legend: { data: ['真实销售额', '预测销售额'], top: 32 },
    xAxis: {
      type: 'category',
      data: labels,
      axisTick: { alignWithLabel: true },
      axisLabel: buildAxisLabel(),
    },
    yAxis: { type: 'value', name: '销售额(元)' },
    series: [
      {
        name: '真实销售额',
        type: 'line',
        smooth: true,
        data: data.map(d => Number(d.true_sales)),
        itemStyle: { color: '#409eff' },
        lineStyle: { width: 3 },
        symbol: 'circle',
        symbolSize: 8,
      },
      {
        name: '预测销售额',
        type: 'line',
        smooth: true,
        data: data.map(d => Number(d.pred_sales)),
        itemStyle: { color: '#67c23a' },
        lineStyle: { width: 3, type: 'dashed' },
        symbol: 'diamond',
        symbolSize: 8,
      },
    ],
    grid: { left: 20, right: 24, bottom: 28, top: 72, containLabel: true },
  })
  charts.push(chart)
}

/**
 * 初始化预测残差分析图
 */
function initResidualChart(data) {
  const chart = echarts.init(residualRef.value)
  const labels = data.map(d => formatWindowTime(d.window_time))
  chart.setOption({
    title: { text: '预测残差分析 (真实值 - 预测值)', left: 'center', textStyle: { fontSize: 15 } },
    tooltip: {
      trigger: 'axis',
      formatter(params) {
        const idx = params[0]?.dataIndex ?? 0
        const p = params[0]
        return `${labels[idx] || ''}<br/>${p.marker}残差: ${p.value}`
      },
    },
    xAxis: {
      type: 'category',
      data: labels,
      axisTick: { alignWithLabel: true },
      axisLabel: buildAxisLabel(),
    },
    yAxis: { type: 'value', name: '残差(元)' },
    series: [{
      type: 'bar',
      data: data.map(d => ({
        value: d.residual,
        itemStyle: { color: d.residual >= 0 ? '#409eff' : '#f56c6c' },
      })),
      barWidth: 20,
    }],
    grid: { left: 20, right: 24, bottom: 28, top: 56, containLabel: true },
  })
  charts.push(chart)
}

/**
 * 加载预测图表与误差指标
 */
async function loadData() {
  const [errorRes, compareRes, residualRes] = await Promise.all([
    request.get('/prediction/error'),
    request.get('/prediction/compare'),
    request.get('/prediction/residual'),
  ])
  errorMetric.value = errorRes.data
  charts.forEach(c => c.dispose())
  charts = []
  initCompareChart(compareRes.data)
  initResidualChart(residualRes.data)
}

/**
 * 分页加载预测结果表格
 */
async function loadTable() {
  const res = await request.get('/prediction/list', { params: { page: page.value, size: size.value } })
  tableData.value = res.data.items
  total.value = res.data.total
}

onMounted(() => { loadData(); loadTable() })
onUnmounted(() => charts.forEach(c => c.dispose()))
</script>

<style scoped>
/* 预留足够高度，保证倾斜日期时间不被裁切 */
.pred-chart {
  width: 100%;
  margin-bottom: 24px;
}
.pred-chart-compare {
  height: 480px;
}
.pred-chart-residual {
  height: 420px;
}
</style>
相关推荐
keyipatience1 小时前
日志和线程池
java·开发语言
鱼香鱼香rose2 小时前
java-2
java·开发语言·python
是小蟹呀^10 小时前
Spring Security + JWT 面试题整理
java·jwt·springsecurity
spencer_tseng12 小时前
Redis + Nacos.bat
java·windows·dos
troyzhxu12 小时前
列表查询的 GraphQL —— 一行代码终结你的 if-else 地狱！
java·springboot·graphql
孫治AllenSun13 小时前
【DataX】生产环境搭建DataX集群案例
java·开发语言·jvm
好好沉淀14 小时前
@NotBlank(message = “{xxx}“) 注解中花括号的含义
java
fīɡЙtīиɡ ℡14 小时前
内存泄漏产生的原因
java·spring·servlet
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点032026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片04AI科技热点日报 | 2026年07月01日05国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路07幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新102026 年 AI 大模型 & AI 编程工具实战全总结