# 沙鲁大屏设计器
技术方案：Vue 3 + TypeScript + Vite + ant-design-vue
包管理器：pnpm

安装：pnpm install
运行：pnpm dev

1、运行前需要先拷贝组件库项目: shalu-dashboard-ui
2、需要添加本地link
```
cd shalu-dashboard-ui
pnpm link ./
pnpm link --global
cd shalu-dashboard-designer
pnpm link --global shalu-dashboard-ui
```


### 图表组件开发思路
- 图表的option参数归一，提供统一的配置，便于后期做主题配置
- 不同的图表提供可以配置的参数，后期通过归一化处理
- 组件配置：组件内容、组件样式
-- 组件样式为容器样式，包括：组件属性(如宽高、xy坐标、整体透明度等)、样式属性(如背景、边框、阴影等)
-- 组件内容为每个组件单独提供的配置组件，通常为数据源，数据样式等


### 图表文件夹结构目录如下：
```
components/Charts/
├── BarChart/ // 柱状图
│   └── BasicBar // 基础柱状图
|         ├── index.ts // 暴露组件相关信息
|         └── src
|             ├── BasicBar.vue // 图表组件
|             ├── Config.vue // 配置组件
|             └── props.ts // 组件属性及组件初始数据
...其他图表组件
├── hooks
│   └── useChartOptions.ts // 用于获取组件配置项options数据
|—— Charts.vue // 封装Charts组件
|—— DataConfig.vue // 数据配置组件
```

图表分为3层设计
1、实现层：通过useEchars封装，实现echarts的初始化加载，渲染，设置配置项目。
2、渲染层：提供图表统一的渲染，通过给实现层提供配置项，实现图表的渲染。
3、应用层：提供具体的业务组件。
图表封装采用echarts  后期可替换为其他图表库
图表配置项采用Echarts为通用配置项，可以通过切换“实现层”，满足不同图表库的适配器进行转换，满足不同图表库的配置项差异