g-ui-web/README.md

可视化组件库

### 快速上手

g-ui-web 基于vue3 + vite5 + typeScript5 + Element-plus + Echarts5 封装的标准UI组件。

### 安装

```bash:no-line-numbers
yarn add g-ui-web -S
或者
npm install g-ui-web -S
```

### 全局使用

> #### 前提条件：使用项目必须全局注册 Element-plus 组件库

```ts
// main.ts
import { createApp } from "vue"
import App from "./App.vue"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
// element-plus图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
import GuiWeb from "g-ui-web"
import "g-ui-web/lib/style.css"
const app = createApp(App)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
// 注册ElementPlus
app.use(ElementPlus)
// 注册GuiWeb
app.use(GuiWeb)
app.mount("#app")
```

### 按需引入

```ts
// 在main.ts中按下引入
import 'g-ui-web/lib/style.css'
// 单个.vue文件引入
<script setup lang="ts">
  import {GButton} from "g-ui-web"
</script>
```

### 组件清单

#### 图表类

| 组件名         | 说明     |
| -------------- | -------- |
| GChart         | 基础图表 |
| GBar           | 柱状图   |
| GLine          | 折线图   |
| GFoldingPillar | 折柱图   |
| GPie           | 饼图     |
| GRadar         | 雷达图   |
| GFunnel        | 漏斗图   |
| GMap           | 地图     |

#### baiduMap类

| 组件名   | 说明   |
| -------- | ------ |
| GHeatMap | 热力图 |

#### 非标类

| 组件名           | 说明                 |
| ---------------- | -------------------- |
| GText            | 文字（指标）         |
| GRingText        | 文字（环图/进度条）  |
| GBox             | 内容块               |
| GRanking         | 排行榜               |
| GReserve         | 预实对比（+达成率）  |
| GMilepost        | 项目/分期计划/里程碑 |
| GNodeachievement | 节点达成             |
| GGridTable       | 常用报表             |

#### 标准UI类（Element-plus）

| 组件名      | 说明       |
| ----------- | ---------- |
| GRow        | 布局       |
| GButton     | 按钮       |
| GInput      | 输入框     |
| GRadio      | 单选框     |
| GCheckbox   | 多选框     |
| GDatePicker | 日期选择器 |
| GForm       | 表单       |
| GSwitch     | 开关       |
| GUpload     | 上传       |
| GCard       | 卡片       |
| GCarousel   | 跑马灯     |
| GSelect     | 选择器     |
| GCascader   | 级联选择器 |
| GPagination | 分页       |
| GProgress   | 进度条     |
| GTable      | 表格       |
| GTag        | 标签       |
| GTree       | 树形控件   |
| GTreeSelect | 树形选择   |
| GTabs       | 标签页     |
| GDialog     | 对话框     |
| GTooltip    | 文字提示   |
| GWatermark  | 水印       |

### 函数清单

| 函数名   | 说明                                 | 参数                                                                                    |
| -------- | ------------------------------------ | --------------------------------------------------------------------------------------- |
| setTheme | 设置主题                             | theme主题名称，isDark是否暗黑主题                                                       |
| Local    | window.localStorage 浏览器永久缓存   | `set` 设置永久缓存，`get` 获取永久缓存，`remove` 移除永久缓存，`clear` 移除全部永久缓存 |
| Session  | window.sessionStorage 浏览器临时缓存 | `set` 设置临时缓存，`get` 获取临时缓存，`remove` 移除临时缓存，`clear` 移除全部临时缓存 |