# open-flowmix-v6

**Repository Path**: lowcode-china/open-flowmix-v6

## Basic Information

- **Project Name**: open-flowmix-v6
- **Description**: open-flowmix-v6 可视化大屏设计平台是一个基于 Web 的交互式工具，允许用户通过拖放操作创建、配置和管理数据可视化仪表板。该平台支持多种图表类型，提供实时预览，并允许用户导出他们的设计。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://mindlink.turntip.cn
- **GVP Project**: No

## Statistics

- **Stars**: 12
- **Forks**: 3
- **Created**: 2025-04-14
- **Last Updated**: 2025-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## open-flowmix-v6

![可视化大屏设计器](./demo.gif)

> open-flowmix-v6 可视化大屏设计平台是一个基于 Web 的交互式工具，允许用户通过拖放操作创建、配置和管理数据可视化仪表板。该平台支持多种图表类型，提供实时预览，并允许用户导出他们的设计。

### 1.1 核心功能

- 拖拽式图表布局管理
- 多种图表类型支持（柱状图、折线图、饼图等12种图表）
- 实时图表配置与预览
- 响应式设计预览（桌面、平板、手机）
- 主题切换（明/暗模式）
- 本地保存与加载
- 导出为 JSON 或图片


## 2. 技术栈

### 2.1 前端框架与库

- **React 18**: 用于构建用户界面的 JavaScript 库
- **Next.js 15**: React 框架，提供服务端渲染、路由等功能
- **TypeScript**: JavaScript 的超集，提供类型安全
- **Tailwind CSS**: 实用优先的 CSS 框架，用于快速构建自定义设计
- **shadcn/ui**: 基于 Radix UI 和 Tailwind CSS 的组件库
- **react-beautiful-dnd**: 用于实现拖放功能的 React 库
- **Lucide React**: 提供图标的 React 组件库


### 2.2 状态管理

- **React Hooks**: 使用 useState 和 useCallback 进行组件内状态管理
- **本地存储**: 使用 localStorage 进行仪表板配置的持久化


### 2.3 可视化技术

- **Canvas API**: 使用原生 Canvas 绘制各种图表
- **自定义图表组件**: 基于 Canvas 实现的轻量级图表渲染器

关注【趣谈前端】公众号，获取更多技术干货，项目最新进展，和开源实践。

##### 联系作者wx：cxzk_168

## 在线办公相关解决方案

1. [flowmix/docx多模态文档编辑器](https://flowmix.turntip.cn)
2. [灵语AI文档](https://mindlink.turntip.cn)
3. [H5-Dooring智能零代码平台](https://github.com/MrXujiang/h5-Dooring)