# node-red-contrib-dfdashboard

**Repository Path**: dfskgh/node-red-contrib-dfdashboard

## Basic Information

- **Project Name**: node-red-contrib-dfdashboard
- **Description**: 东方数科可视化仪表板节点，快速构建数据监控界面。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2025-12-11
- **Last Updated**: 2025-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# node-red-contrib-dfdashboard

> 东方数科可视化仪表板节点，快速构建数据监控界面。

## 特性

- **丰富组件**：图表、表格、仪表盘等多种可视化组件
- **响应式布局**：支持桌面和移动端自适应
- **实时更新**：WebSocket 支持数据实时刷新
- **主题定制**：可定制化颜色主题和样式

## 组件列表

### 数据展示组件
- 折线图、柱状图、饼图
- 实时数据表格
- 关键指标卡片
- 地图数据可视化

### 控制组件
- 按钮、开关、滑块
- 表单输入组件
- 日期时间选择器

## 快速开始

### 安装
bash
npm install node-red-contrib-dfdashboard
### 创建第一个仪表板
1. 拖动图表组件到工作区
2. 配置数据源和图表选项
3. 部署后访问 `http://localhost:1880/ui`

## 配置示例

### 实时监控仪表板
json
[
{
"id": "temperature-chart",
"type": "dfdashboard-chart",
"name": "温度监控",
"group": "environment",
"order": 1,
"chartType": "line",
"wires": [[]]
}
]
## 主题定制

### 自定义 CSS 变量
css
:root {
--df-primary-color: #1890ff;
--df-border-radius: 8px;
--df-font-family: 'Microsoft YaHei';
}
## 移动端适配
所有组件默认支持移动端响应式布局，可通过设置优化移动端体验。

## 浏览器兼容性

| 浏览器 | 最低支持版本 |
|--------|--------------|
| Chrome | 60+ |
| Firefox | 55+ |
| Safari | 12+ |
| Edge | 79+ |

## 示例项目
访问我们的 [示例库](https://github.com/东方数科/node-red-dashboard-examples) 查看完整实现：
- 工业监控大屏
- 环境数据看板
- 设备状态监控

## 许可证
MIT License © 2025 东方数科