智慧活畜交易大数据中心

基于Vue 3 + ECharts的科技风数据大屏项目

特性

• 🖥️ 固定尺寸设计: 默认5120×1440像素，支持滚动条
• ⚙️ 动态配置: JSON配置文件管理屏幕尺寸
• 📊 丰富图表: 多种ECharts图表类型
• 🎨 科技风格: 深色主题，炫酷动效
• 📱 响应式布局: 适配不同屏幕尺寸
• 🔄 实时数据: 模拟数据自动更新

快速开始

安装依赖

npm install

开发模式

npm run dev

构建生产版本

npm run build

配置管理

修改屏幕尺寸

编辑 public/config.json 文件：

{
  "screen": {
    "width": 5120,     // 屏幕宽度
    "height": 1440,    // 屏幕高度
    "title": "智慧活畜交易大数据中心"
  },
  "dashboard": {
    "refreshInterval": 5000,
    "animationDuration": 300
  }
}

常用尺寸参考

分辨率	宽度	高度	用途
5K超宽屏	5120px	1440px	专业显示器
4K	3840px	2160px	4K显示器
2K	2560px	1440px	2K显示器
1080p	1920px	1080px	标准显示器

项目结构

├── public/
│   └── config.json          # 配置文件
├── src/
│   ├── components/          # 组件目录
│   │   ├── RealTimeStats.vue       # 实时交易统计
│   │   ├── CountySalesStats.vue    # 本县销售统计
│   │   ├── TradingTrendChart.vue   # 交易趋势图表
│   │   ├── BeijingTrendChart.vue   # 转牛京津冀趋势
│   │   ├── ChinaMap.vue            # 中国地图
│   │   ├── ExchangeMonitor.vue     # 交易所实时监控
│   │   ├── SalesChannelStats.vue   # 转牛销售渠道统计
│   │   ├── PurchaserAnalysis.vue   # 采购商来源分析
│   │   ├── SupplyDemandData.vue    # 供需实数据
│   │   └── TransactionDetails.vue  # 交易明细统计
│   ├── styles/              # 样式文件
│   ├── utils/
│   │   └── config.js        # 配置管理工具
│   └── App.vue              # 主组件
└── package.json

部署说明

1. 构建项目：npm run build
2. 将 dist 目录部署到Web服务器
3. 根据实际屏幕修改 config.json 配置
4. 访问部署的URL

技术栈

• Vue 3.3.4
• ECharts 5.4.3
• Vite 4.4.9
• SCSS 1.66.1

开发说明

• 所有图表组件支持响应式
• 数据更新通过定时器模拟
• 支持深色科技风主题
• 使用CSS Grid进行布局