UNI-DATA

# 介绍

组件库依托于低代码大屏平台 (opens new window)构建，为大屏应用提供了丰富多样的数据可视化组件，涵盖各类展示需求，多种类型组件可供使用：

  • 素材

包含自定义上传背景图、视频、图片、图标等元素，灵活定制界面风格。

  • 地图

包含 Echarts 绘制地图、Leaflet 地图库及高德地图三种类型，基本覆盖各类地图展示需求。

  • 装饰

包含醒目大标题、精致小标题、个性边框与装饰条等元素 。

  • 图表
  1. 包含 基本图表 柱状图、条形图、折线图、饼环图等
  2. 包含 高级图表 雷达图、散点图、词云、桑基图、关系图、漏斗图等
  3. 包含 特殊装饰图表 点缀数据等
  • 表格

包含简易表格、自动滚动表格、滚动排名列表、轮播列表，以及更多其他类型。

  • 控件

包含 tab 切换、轮播图、下拉菜单、下拉选择器、时间选择器、全屏按钮控件等。

# 使用流程

  1. 访问 UNI-DATA 低代码大屏平台 (opens new window)，并开启可视化编辑工具。

    • 登录后，选择 新建项目 或者编辑 已有项目 进入大屏工作台。

    • 在工作台页面，从左侧的组件库中拖拽组件到中间的编辑区域，开始设计您的大屏布局。

  2. 代码大屏平台导出源代码

    • 大屏设计完成后，点击中间的编辑区域右下方的 导出 按钮，即可导出较高质量可二次开发的代码。

# 项目结构

.
├── dist
├── node_modules                     # 包文件
├── public                           # 静态资源（直接拷贝发布，不经过webpack处理）
├── src
│   ├── assets                       # 项目资源（经过webpack处理）
│   │   ├── image
│   │   │   ├── screen               # 低代码导出页面使用的资源文件
│   ├── packages                     # 低代码相关组件及数据
│   │   ├── components               # 组件
│   │   ├── public                   # 组件公用的代码
│   │   │   ├── plugins
│   │   │   │   ├── components.ts    # 组件注册
│   │   │   │   ├── icon.ts          # 图标注册
│   │   │   │   ├── naive.ts         # naive UI库注册
│   │   │   │   ├── theme.ts         # naive UI主题配置初始化
│   │   │   ├── stores
│   │   │   │   ├── dataStore        # 组件数据
│   │   │   │   ├── themeStore       # 主题数据
│   │   │   ├── styles               # 公用样式及字体文件
│   │   │   ├── utils                # 公用工具方法
│   ├── router                       # 路由
│   ├── store                        # 状态管理
│   ├── views                        # 页面
│   │   ├── group                    # 页面分组
│   │   ├── screen.vue               # 导出的大屏页面
│   ├── App.vue
│   ├── main.ts
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package.json
├── package-lock.json
├── tsconfig.json
└── vue.config.js

# 项目运行

由于组件库基于 Vue，若要使用，需确保已有一个 Vue 项目环境。已有 Vue 项目或采用 UMD 版本开发的，可直接跳过项目创建步骤。

安装 Vue/Cli

  • npm 安装
npm i -g @vue/cli
  • yarn 安装
yarn global add @vue/cli

npm install
  • 运行项目
npm run dev 或 npm run serve
  • 打包编译项目
npm run build

运行环境

运行环境要求 Node16 及以上， Npm8 及以上，需安装 vue 脚手架@vue/cli
技术栈采用 vue3 + typescript + pinia；

柱状图 →