Granite TimeSeries FlowState R1电商销量预测实战Vue前端可视化大屏最近和几个做电商的朋友聊天他们都在头疼同一个问题备货。备多了怕压库存备少了又怕错过销售高峰眼睁睁看着流量来了却没货可发。传统的经验判断越来越不准市场变化快得让人跟不上节奏。正好我最近在研究时间序列预测试用了IBM开源的Granite TimeSeries FlowState R1模型。这个模型在时序数据预测上表现挺不错特别是对电商这种有明显周期性和趋势性的销量数据。光有预测结果还不够决策者需要直观地看到趋势、对比和关键数据。所以我琢磨着能不能把它的预测能力和一个好看又好用的前端大屏结合起来这篇文章我就来分享一个完整的实战案例用Granite TimeSeries FlowState R1模型预测未来商品销量再用Vue.js和ECharts搭建一个交互式数据可视化大屏。你会看到从数据准备、模型预测到前端图表渲染、数据联动的全过程。不管你是对AI预测感兴趣还是想做个炫酷的数据看板相信都能找到一些实用的思路。1. 为什么需要销量预测与可视化在做这个项目之前我们先得想清楚它到底能解决什么实际问题。对于电商运营来说拍脑袋决定采购量风险太大了。大促前该备多少货新品上线后销量走势会怎样哪些品类即将进入淡季这些问题如果能有数据支撑的预测决策会踏实很多。而Granite TimeSeries FlowState R1这类模型就是专门用来从历史数据中学习规律预测未来值的。它处理像日销量、周销售额这类时间序列数据很在行。但光有预测数字还不够。一堆冷冰冰的表格和CSV文件很难让人快速抓住重点。运营总监需要一眼看到整体趋势品类经理关心自己负责的品类表现采购同事则需要明确的采购建议。这时候一个集成的可视化大屏就派上用场了。它能把关键的预测指标、趋势曲线、品类对比用图表直观地呈现出来。哪里增长快哪里可能有风险通过颜色、走势图、排行榜一目了然。这比看报告效率高多了也更容易在团队间达成共识。所以我们这个项目的核心价值就两点一是用AI模型给出更靠谱的销量预测二是用可视化大屏让预测结果“活”起来真正辅助业务决策。2. 整体方案设计与技术选型要把想法落地得先搭个架子。整个项目可以分成两大块后端预测服务和前端可视化大屏。后端预测服务 它的核心任务就是运行Granite TimeSeries FlowState R1模型。我选择用Python来搭建主要是模型相关的生态比如PyTorch、pandas这些库在Python里用起来最顺手。我会用FastAPI来写接口因为它轻量、异步性能好文档也自动生成前后端对接方便。模型预测是一个相对耗时的过程所以后端服务会接受前端的请求调用模型算出结果再通过API返回给前端。前端可视化大屏 这部分的目标是好看、好用、交互强。Vue.js是我的首选它的组件化开发方式非常适合构建这种复杂的单页面应用数据驱动视图的理念也让图表数据更新变得很简单。图表库方面ECharts功能强大、文档齐全各种类型的图表都能满足从折线图、柱状图到饼图、地图用它来展示预测数据再合适不过。数据流 整个流程跑起来是这样的前端大屏加载时或者用户选择不同商品、时间范围后会向后端发送一个请求。后端接到请求从数据库或文件里读取对应的历史销量数据送入Granite模型进行预测。模型计算出未来一段时间的销量预测值后后端把这些数据整理好通过API返回给前端。前端Vue组件收到数据驱动ECharts图表更新新的预测曲线和指标就实时展示在大屏上了。简单来说就是“前端触发 - 后端预测 - 数据返回 - 前端渲染”的一个闭环。3. 后端实战用Granite模型进行销量预测理论说完了我们动手把后端预测部分实现出来。这里我假设你已经有了Python环境并且准备好了CSV格式的历史销量数据至少包含日期和销量两列。3.1 环境准备与模型初步了解首先创建一个项目目录并安装必要的依赖。Granite TimeSeries FlowState R1模型可以通过Hugging Face的Transformers库来加载和使用。# 创建项目目录并进入 mkdir sales-forecast-dashboard cd sales-forecast-dashboard # 创建后端服务目录 mkdir backend cd backend # 创建虚拟环境可选但推荐 python -m venv venv # Windows激活: venv\Scripts\activate # Mac/Linux激活: source venv/bin/activate # 安装核心依赖 pip install fastapi uvicorn pandas numpy pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu # 根据你的CUDA版本选择 pip install transformers scikit-learnGranite TimeSeries FlowState R1是一个基于Transformer架构的时间序列预测基础模型。它已经在海量的时序数据上进行了预训练因此对于电商销量这种数据我们往往不需要从头训练通过“微调”或者直接使用其强大的特征提取能力就能得到不错的预测效果。对于快速验证和演示我们可以先使用其零样本或少样本预测能力。3.2 构建FastAPI预测接口接下来我们创建一个简单的FastAPI应用它提供一个API端点接收商品ID或数据返回未来N天的销量预测。在backend目录下创建main.py文件from fastapi import FastAPI, HTTPException from pydantic import BaseModel import pandas as pd import numpy as np from datetime import datetime, timedelta import joblib # 用于保存和加载预处理管道 from typing import List, Optional import logging # 配置日志 logging.basicConfig(levellogging.INFO) logger logging.getLogger(__name__) app FastAPI(title电商销量预测API, description基于Granite TimeSeries模型的销量预测服务) # 定义请求体模型前端可以传递历史数据也可以只传商品ID由后端查询 class ForecastRequest(BaseModel): product_id: Optional[str] None # 商品ID historical_data: Optional[List[dict]] None # 可选的直接历史数据格式如 [{date: 2023-01-01, sales: 100}, ...] forecast_days: int 30 # 需要预测未来多少天 # 模拟一个简单的“模型预测”函数 # 在实际项目中这里会替换为加载真正的Granite模型并进行推理 def mock_granite_forecast(historical_series: pd.Series, forecast_horizon: int) - pd.Series: 模拟Granite模型的预测过程。 实际应用中此处应替换为 1. 加载预训练的Granite TimeSeries FlowState R1模型。 2. 将历史数据转换为模型要求的输入格式。 3. 运行模型推理得到预测结果。 4. 将输出转换回业务数据格式。 logger.info(f模拟预测基于{len(historical_series)}天历史数据预测未来{forecast_horizon}天) # 这里用一个非常简单的规则来模拟预测取最近7天的平均销量并加上一点随机波动和轻微上升趋势 last_7_avg historical_series[-7:].mean() # 生成预测日期 last_date historical_series.index[-1] future_dates [last_date timedelta(daysi1) for i in range(forecast_horizon)] # 模拟预测值基线值 轻微线性增长 随机噪声 np.random.seed(42) # 固定随机种子使结果可复现 trend np.linspace(0, forecast_horizon * 0.01, forecast_horizon) # 轻微上升趋势 noise np.random.randn(forecast_horizon) * 0.05 # 5%的随机噪声 predicted_values last_7_avg * (1 trend noise) # 确保预测值非负 predicted_values np.maximum(predicted_values, 0) return pd.Series(predicted_values, indexfuture_dates) def load_historical_data(product_id: str) - pd.Series: 根据商品ID从数据库或文件加载历史销量数据。 这里我们模拟从CSV文件读取。 # 假设有一个CSV文件包含date, product_id, sales列 try: # 实际项目中这里会是数据库查询或读取特定文件 # df pd.read_csv(fdata/{product_id}.csv, parse_dates[date]) # 为了演示我们生成一段模拟历史数据 dates pd.date_range(enddatetime.today(), periods365, freqD) # 过去一年数据 # 模拟有周期性周和趋势的销量数据 np.random.seed(int(product_id or 123)) # 用product_id做随机种子使不同商品数据不同 base 100 trend np.linspace(0, 50, 365) weekly_seasonality 20 * np.sin(2 * np.pi * np.arange(365) / 7) noise np.random.randn(365) * 15 sales base trend weekly_seasonality noise sales np.maximum(sales, 0).astype(int) historical_series pd.Series(sales, indexdates) logger.info(f为商品 {product_id} 生成了 {len(historical_series)} 条模拟历史数据) return historical_series except Exception as e: logger.error(f加载商品 {product_id} 历史数据失败: {e}) raise HTTPException(status_code404, detailf未找到商品 {product_id} 的历史数据) app.post(/api/forecast, summary获取商品销量预测) async def get_forecast(request: ForecastRequest): 核心预测接口。 接收商品ID或直接的历史数据返回未来一段时间的销量预测。 try: historical_series None # 1. 获取历史数据 if request.historical_data: # 如果前端直接提供了历史数据 df pd.DataFrame(request.historical_data) df[date] pd.to_datetime(df[date]) df.set_index(date, inplaceTrue) historical_series df[sales].sort_index() logger.info(f使用前端提供的 {len(historical_series)} 条历史数据) elif request.product_id: # 根据商品ID加载历史数据 historical_series load_historical_data(request.product_id) else: raise HTTPException(status_code400, detail必须提供 product_id 或 historical_data) if len(historical_series) 30: raise HTTPException(status_code400, detail历史数据不足至少需要30天数据) # 2. 调用预测函数此处为模拟实际应调用真实模型 forecast_series mock_granite_forecast(historical_series, request.forecast_days) # 3. 整理返回数据格式方便前端使用 historical_for_chart [{date: idx.strftime(%Y-%m-%d), sales: val} for idx, val in historical_series[-90:].items()] # 返回最近90天历史 forecast_for_chart [{date: idx.strftime(%Y-%m-%d), sales: round(val, 2)} for idx, val in forecast_series.items()] # 计算一些关键指标给前端大屏展示 last_historical_sales historical_series.iloc[-1] predicted_avg_sales forecast_series.mean() growth_rate ((predicted_avg_sales - last_historical_sales) / last_historical_sales * 100) if last_historical_sales 0 else 0 response { product_id: request.product_id or provided_data, historical_data: historical_for_chart, forecast_data: forecast_for_chart, key_metrics: { last_actual_sales: round(float(last_historical_sales), 2), predicted_avg_sales: round(float(predicted_avg_sales), 2), growth_rate_percent: round(float(growth_rate), 2), forecast_peak: round(float(forecast_series.max()), 2), forecast_peak_date: forecast_series.idxmax().strftime(%Y-%m-%d), } } logger.info(f预测完成返回未来 {request.forecast_days} 天预测数据) return response except HTTPException: raise except Exception as e: logger.exception(预测过程中发生错误) raise HTTPException(status_code500, detailf内部服务器错误: {str(e)}) app.get(/) async def root(): return {message: 电商销量预测API服务已运行, docs: /docs} if __name__ __main__: import uvicorn uvicorn.run(app, host0.0.0.0, port8000)这个后端服务已经具备了核心功能。它提供了一个/api/forecast的POST接口。前端可以传一个商品ID过来后端会模拟加载该商品过去一年的销量数据实际项目接数据库然后调用mock_granite_forecast函数来“预测”未来30天的销量。请注意mock_granite_forecast函数目前只是一个简单的模拟。在真实部署中你需要在这里集成真正的Granite TimeSeries FlowState R1模型。这通常涉及从Hugging Face加载预训练模型。将历史销量数据预处理成模型需要的格式如归一化、构建时间特征。运行模型推理得到预测结果。对预测结果进行后处理如反归一化。为了快速验证前后端联调我们用模拟函数是没问题的。运行这个后端服务cd backend python main.py访问http://localhost:8000/docs就能看到自动生成的API文档并且可以测试接口了。4. 前端实战用Vue与ECharts构建可视化大屏后端跑起来了现在我们来打造前端的可视化大屏。我们用Vue 3的组合式API来写这样逻辑组织会更清晰。4.1 初始化Vue项目与安装依赖首先在前端项目目录下和backend同级创建一个Vue项目。# 回到项目根目录 cd .. # 使用Vite创建Vue项目选择Vue和TypeScript可选 npm create vuelatest frontend # 按照提示操作项目名就用frontend根据需要选择特性Router, Pinia等按需添加 cd frontend npm install echarts vue-echarts axios dayjs # axios用于调用后端APIdayjs用于日期处理vue-echarts是ECharts的Vue组件 npm install --save-dev types/echarts # 如果使用TypeScript安装完成后我们先清理一下src/App.vue和src/components/HelloWorld.vue准备从头搭建。4.2 设计大屏布局与核心组件我们规划的大屏主要包含这几个区域顶部概览区展示核心KPI如当前销量、预测平均销量、增长率、预测峰值。核心图表区一个大的折线图同时展示历史销量曲线和未来预测曲线清晰看到趋势。品类对比区一个柱状图展示不同商品品类或不同商品的预测销量对比。数据表格区一个详细的表格列出未来每日的预测销量数据支持排序和筛选。控制面板区提供下拉框让用户选择要预测的商品以及调整预测的天数。在src/components目录下我们创建几个组件KpiCards.vue顶部KPI卡片。ForecastChart.vue核心预测折线图。CategoryBarChart.vue品类对比柱状图。ForecastDataTable.vue预测数据表格。ControlPanel.vue控制面板。4.3 实现核心图表历史与预测趋势图我们先来实现最重要的ForecastChart.vue组件。它使用vue-echarts来渲染一个折线图。!-- src/components/ForecastChart.vue -- template div classchart-container h3销量趋势与预测/h3 div v-ifloading classloading加载预测数据中.../div div v-else-iferror classerror{{ error }}/div VChart v-else classchart :optionchartOption :autoresizetrue / /div /template script setup langts import { ref, computed, watch } from vue; import VChart from vue-echarts; import { use } from echarts/core; import { CanvasRenderer } from echarts/renderers; import { LineChart } from echarts/charts; import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, MarkLineComponent, } from echarts/components; import type { ComposeOption } from echarts/core; import type { LineSeriesOption, TitleComponentOption, GridComponentOption } from echarts/types/dist/shared; use([ CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, MarkLineComponent, ]); // 定义ECharts配置类型 type ECOption ComposeOptionLineSeriesOption | TitleComponentOption | GridComponentOption; // 定义组件接收的props interface ForecastDataPoint { date: string; sales: number; } interface Props { historicalData: ForecastDataPoint[]; forecastData: ForecastDataPoint[]; loading?: boolean; error?: string; } const props withDefaults(definePropsProps(), { loading: false, error: , }); // 计算属性生成ECharts配置项 const chartOption computedECOption(() { // 合并历史数据和预测数据用于X轴 const allDates [...props.historicalData.map(d d.date), ...props.forecastData.map(d d.date)]; const historicalSales props.historicalData.map(d d.sales); const forecastSales props.forecastData.map(d d.sales); // 为了在折线图中区分预测部分的历史数据用null填充 const historicalSeriesForChart [...historicalSales, ...new Array(forecastSales.length).fill(null)]; // 预测部分历史数据用null填充 const forecastSeriesForChart [...new Array(historicalSales.length).fill(null), ...forecastSales]; const splitIndex props.historicalData.length; // 历史数据结束的索引 return { title: { text: 历史销量与未来预测, left: center, textStyle: { fontSize: 16 }, }, tooltip: { trigger: axis, formatter: function (params: any) { const param params[0]; const dataIndex param.dataIndex; let tip ${param.axisValue}br/; if (dataIndex splitIndex) { // 历史数据点 tip ${param.seriesName}: b${param.data}/b; } else { // 预测数据点 const forecastParam params.find((p: any) p.seriesName 销量预测); tip 预测销量: b${forecastParam?.data || N/A}/b; } return tip; }, }, legend: { data: [历史销量, 销量预测], top: 30, }, grid: { left: 3%, right: 4%, bottom: 3%, top: 15%, containLabel: true, }, xAxis: { type: category, boundaryGap: false, data: allDates, axisLabel: { formatter: function (value: string) { // 简化日期显示避免过于拥挤 return value.slice(5); // 显示 MM-DD }, }, }, yAxis: { type: value, name: 销量, }, series: [ { name: 历史销量, type: line, data: historicalSeriesForChart, itemStyle: { color: #5470c6 }, lineStyle: { width: 3 }, showSymbol: false, // 数据点太多不显示标记点 smooth: true, }, { name: 销量预测, type: line, data: forecastSeriesForChart, itemStyle: { color: #91cc75 }, lineStyle: { width: 3, type: dashed, // 预测线用虚线表示 }, showSymbol: false, smooth: true, markLine: { silent: true, lineStyle: { type: solid, color: #ff0000, width: 1 }, data: [ { xAxis: splitIndex - 0.5, // 在历史与预测交界处画一条竖线 }, ], label: { show: false }, }, }, ], graphic: [ { type: text, left: center, top: 60, style: { text: 预测开始, fill: #ff0000, fontSize: 12, }, }, ], }; }); /script style scoped .chart-container { width: 100%; height: 500px; background-color: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); margin-bottom: 24px; } .chart-container h3 { margin-top: 0; margin-bottom: 15px; color: #333; } .chart { width: 100%; height: calc(100% - 40px); } .loading, .error { display: flex; justify-content: center; align-items: center; height: 100%; font-size: 16px; color: #666; } .error { color: #f56c6c; } /style这个组件接收historicalData和forecastData两个数组作为属性然后用ECharts画出一条蓝色的历史销量实线和一条绿色的预测销量虚线。中间用一条红色竖线清晰地分隔开“历史”和“未来”。4.4 整合页面与调用后端API现在我们把所有组件在主页App.vue里组装起来并实现从后端获取数据。!-- src/App.vue -- template div idapp header classapp-header h1 电商销量智能预测大屏/h1 p基于 Granite TimeSeries 模型与 Vue.js 可视化/p /header main classdashboard !-- 控制面板 -- ControlPanel :product-idselectedProductId :forecast-daysforecastDays product-changehandleProductChange days-changehandleDaysChange refreshfetchForecastData classcontrol-panel / !-- KPI概览卡片 -- KpiCards :metricskeyMetrics :loadingloading classkpi-section / !-- 核心预测图表 -- ForecastChart :historical-datahistoricalData :forecast-dataforecastData :loadingloading :errorerror classmain-chart / div classbottom-row !-- 品类对比图 -- CategoryBarChart :category-datacategoryData :loadingloading classcategory-chart / !-- 预测数据表格 -- ForecastDataTable :forecast-dataforecastData :loadingloading classdata-table / /div /main footer classapp-footer p数据更新时间: {{ lastUpdateTime }} | 预测模型: Granite TimeSeries FlowState R1/p /footer /div /template script setup langts import { ref, onMounted } from vue; import axios from axios; import dayjs from dayjs; import ControlPanel from ./components/ControlPanel.vue; import KpiCards from ./components/KpiCards.vue; import ForecastChart from ./components/ForecastChart.vue; import CategoryBarChart from ./components/CategoryBarChart.vue; import ForecastDataTable from ./components/ForecastDataTable.vue; import type { ForecastDataPoint, KeyMetrics } from ./types; // 响应式数据 const selectedProductId ref(P1001); // 默认选中的商品 const forecastDays ref(30); const historicalData refForecastDataPoint[]([]); const forecastData refForecastDataPoint[]([]); const keyMetrics refKeyMetrics({ last_actual_sales: 0, predicted_avg_sales: 0, growth_rate_percent: 0, forecast_peak: 0, forecast_peak_date: , }); const categoryData ref([ // 模拟品类数据实际应从后端获取 { name: 电子产品, value: 12500 }, { name: 服装服饰, value: 8900 }, { name: 家居用品, value: 7600 }, { name: 美妆个护, value: 5400 }, { name: 食品饮料, value: 11200 }, ]); const loading ref(false); const error ref(); const lastUpdateTime ref(); // 后端API基础URL const API_BASE_URL http://localhost:8000; // 获取预测数据 async function fetchForecastData() { loading.value true; error.value ; try { const response await axios.post(${API_BASE_URL}/api/forecast, { product_id: selectedProductId.value, forecast_days: forecastDays.value, }); const data response.data; historicalData.value data.historical_data; forecastData.value data.forecast_data; keyMetrics.value data.key_metrics; lastUpdateTime.value dayjs().format(YYYY-MM-DD HH:mm:ss); console.log(预测数据获取成功:, data); } catch (err: any) { console.error(获取预测数据失败:, err); error.value err.response?.data?.detail || 网络请求失败请检查后端服务是否运行; // 失败时使用模拟数据保持页面可看 generateMockData(); } finally { loading.value false; } } // 模拟数据生成用于后端不可用时 function generateMockData() { const today dayjs(); const hist []; for (let i 89; i 0; i--) { const date today.subtract(i, day).format(YYYY-MM-DD); const sales Math.round(100 Math.random() * 50 20 * Math.sin(i / 7 * 2 * Math.PI)); hist.push({ date, sales }); } historicalData.value hist; const forecast []; for (let i 1; i forecastDays.value; i) { const date today.add(i, day).format(YYYY-MM-DD); const base 150; const trend i * 0.5; const seasonality 25 * Math.sin((i 10) / 7 * 2 * Math.PI); const noise (Math.random() - 0.5) * 20; const sales Math.round(base trend seasonality noise); forecast.push({ date, sales }); } forecastData.value forecast; keyMetrics.value { last_actual_sales: hist[hist.length - 1].sales, predicted_avg_sales: Math.round(forecast.reduce((a, b) a b.sales, 0) / forecast.length), growth_rate_percent: 12.5, forecast_peak: Math.max(...forecast.map(d d.sales)), forecast_peak_date: forecast.find(d d.sales Math.max(...forecast.map(d d.sales)))!.date, }; lastUpdateTime.value dayjs().format(YYYY-MM-DD HH:mm:ss) (模拟数据); } // 事件处理 function handleProductChange(newProductId: string) { selectedProductId.value newProductId; fetchForecastData(); } function handleDaysChange(newDays: number) { forecastDays.value newDays; fetchForecastData(); } // 初始化 onMounted(() { fetchForecastData(); }); /script style * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, sans-serif; background-color: #f5f7fa; color: #333; } #app { min-height: 100vh; display: flex; flex-direction: column; } .app-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem 1.5rem; text-align: center; } .app-header h1 { font-size: 2.2rem; margin-bottom: 0.5rem; } .app-header p { opacity: 0.9; font-size: 1.1rem; } .dashboard { flex: 1; padding: 1.5rem; max-width: 1400px; margin: 0 auto; width: 100%; } .control-panel { margin-bottom: 1.5rem; } .kpi-section { margin-bottom: 1.5rem; } .main-chart { margin-bottom: 1.5rem; } .bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } media (max-width: 1024px) { .bottom-row { grid-template-columns: 1fr; } } .category-chart, .data-table { background-color: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } .app-footer { text-align: center; padding: 1rem; background-color: #eef1f6; color: #666; font-size: 0.9rem; margin-top: auto; } /style这个主页面把各个组件都组织在了一起并且通过fetchForecastData函数调用我们之前写好的后端API。页面加载时会自动获取默认商品P1001未来30天的预测数据并更新所有图表和指标。4.5 实现其他组件与运行项目由于篇幅限制KpiCards、CategoryBarChart、ForecastDataTable和ControlPanel组件的详细代码不在这里全部展开。它们的实现思路是类似的KpiCards.vue接收keyMetrics对象用几个卡片展示关键数据可以用el-card或自己写样式。CategoryBarChart.vue接收品类数据用ECharts渲染一个横向或纵向柱状图展示不同品类的预测销量对比。ForecastDataTable.vue接收forecastData数组用el-table或原生表格渲染一个带排序功能的详细数据表格。ControlPanel.vue包含商品选择下拉框和预测天数滑块并向上触发product-change和days-change事件。你可以在src/types.ts中定义共享的数据类型// src/types.ts export interface ForecastDataPoint { date: string; sales: number; } export interface KeyMetrics { last_actual_sales: number; predicted_avg_sales: number; growth_rate_percent: number; forecast_peak: number; forecast_peak_date: string; }最后确保src/main.ts正确引入了ECharts// src/main.ts import { createApp } from vue import App from ./App.vue import ECharts from vue-echarts import echarts const app createApp(App) app.component(VChart, ECharts) // 全局注册VChart组件 app.mount(#app)现在分别启动后端和前端服务# 终端1启动后端服务 cd backend python main.py # 终端2启动前端开发服务器 cd frontend npm run dev打开浏览器访问http://localhost:5173Vite默认端口你就能看到一个完整的电商销量预测可视化大屏了通过顶部的控制面板切换商品或调整预测天数所有图表和数据都会实时更新。5. 总结与展望把这个项目从头到尾跑通一遍感觉还是挺有成就感的。前端那个大屏图表随着数据动态变化确实比只看数字报表直观多了。Granite模型的预测能力虽然我们这里用了模拟为决策提供了数据依据而Vue和ECharts搭建的可视化界面则让这些数据变得易懂、易用。在实际业务中这个方案还有很多可以深化和优化的地方。比如后端可以接入真实的数据库定期自动训练和更新模型前端大屏可以增加更多维度的分析比如按地区、按渠道拆分预测还可以加入预警功能当预测销量低于安全库存时自动高亮提示。技术选型上Vue 3的组合式API让逻辑组织非常清晰ECharts也足够强大能满足绝大多数可视化需求。前后端分离的架构也让后续的维护和扩展变得灵活。如果你对AI模型落地或者数据可视化感兴趣这个案例提供了一个不错的起点。你可以尝试用更复杂真实的模型替换掉后端的模拟函数或者给前端大屏添加更丰富的交互和动画效果。最重要的是这套思路可以迁移到很多类似的场景比如流量预测、库存预警、财务分析等等让数据真正驱动业务增长。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。