open-index/open-npm huggingface dataset:
npm package: @psr-framework/vue-plugin-big-screen
Description: vue3.x 大屏组件
Author: zhoudingding
Latest version: 1.1.0

# vue3-plugin-big-screen

vue3.x组件 大屏

## 支持特性
1. 大屏展示组件
2. 大屏设计器组件
3. 在线拖拽设计大屏布局
4. 在线设计组件样式
5. 在线设计组件数据绑定逻辑
npm package: @psr-framework/vue-plugin-highcharts
Description: vue3.x Highcharts组件
Author: zhoudingding
Latest version: 0.0.2

# vue3-plugin-highcharts

Highcharts vue3.x组件

## 安装

```shell
npm i @psr-framework/vue3-plugin-highcharts
```

## 全局注册

```ts
import "@psr-framework/vue3-plugin-highcharts/style.css"
import {PsrVue3HighchartsPlugin} from "@psr-framework/vue3-plugin-highcharts";
import {PsrVue3HighchartsPlugin} from "./index";

const app = createApp(App).use(PsrVue3HighchartsPlugin).mount('#app')
```

## 按需注册

```ts
import "@psr-framework/vue3-plugin-highcharts/style.css"
import {PsrVue3Highcharts} from "@psr-framework/vue3-plugin-highcharts";
```

## 组件

### PsrVue3Highcharts Highcharts图表

#### 属性

1. chartType 图表类型 默认值'chart' (chart:基础图表,stockChart:股票图表,mapChart:地图图表,ganttChart:甘特图表)
2. chartDarkTheme 是否使用深色主题 默认值false
3. chartOptions 图表配置

#### 导出

1. chart: Highcharts.Chart 图表对象
npm package: @psr-framework/vue3-plugin-amap
Description: 高德地图AMap JSAPI vue3.x组件
Author: zhoudingding
Latest version: 1.4.7

# vue3-plugin-amap

高德地图AMap JSAPI vue3.x组件

## 安装

```shell
npm i @psr-framework/vue3-plugin-amap
```

## 全局注册

```ts
import "@psr-framework/vue3-plugin-amap/style.css"
import {PsrVue3AMapPlugin} from "@psr-framework/vue3-plugin-amap";

const app = createApp(App).use(PsrVue3AMapPlugin).mount('#app')
```

## 按需注册

```ts
import "@psr-framework/vue3-plugin-amap/style.css"
import {PsrVue3AMap} from "@psr-framework/vue3-plugin-amap";
```

## 组件

### PsrVue3AMap 地图

#### 属性

1. mapKey 高德地图API访问密钥 必填
2. mapLogo 是否显示高德地图logo 默认值true
3. mapCenter 视图中心经纬度 { lng: number, lat: number }
4. mapZoom 视图缩放级别 默认值5

#### 插槽

1. default(map) 图层、覆盖物等，插槽属性map：地图对象

#### 导出

1. map: AMap.Map 地图对象

### PsrVue3AMapMarker 点标记

#### 属性

1. aMap 地图对象
2. markerPosition 位置经纬度
3. markerTitle 标题文本
4. markerVisible 可见性
5. markerDraggable 可拖拽
6. markerLabel 标签文本
7. markerLabelDirection 标签方向
8. markerLabelOffset 标签偏移
9. markerCustom 自定义内容 默认值false

#### 插槽

1. 默认 自定义内容

#### 导出

1. marker: AMap.Marker 标记对象

### PsrVue3AMapMarkerCluster 点聚合

#### 属性

1. aMap 地图对象
2. clusterData 聚合数据
3. clusterGridSize 聚合网格大小 默认值60
4. clusterMaxZoom 聚合最大放大级别 默认值18
5. clusterAverageCenter 是否使用平均中心 默认值true
6. clusterStyles 聚合样式
7. clusterCustomMarker 自定义未聚合标记

#### 插槽

1. marker(data) 自定义未聚合标记内容，插槽属性data：标记对应的聚合数据元素

#### 导出

1. markerCluster: AMap.MarkerCluster 标记聚合对象

### PsrVue3AMapLayerBuildings 建筑图层

#### 属性

1. aMap 地图对象
2. buildingsWallColor 墙壁颜色
3. buildingsRoofColor 屋顶颜色
4. buildingsOpacity 透明度 默认值1
5. buildingsZoomMin 显示建筑的缩放级别下限 默认值2
6. buildingsZoomMax 显示建筑的缩放级别上限 默认值20
7. buildingsVisible 可见性

#### 导出

1. buildings: AMap.Buildings 建筑图层对象

### PsrVue3AMapInfoWindow 消息窗体

#### 属性

1. aMap 地图对象
2. infoWindowCustom 自定义内容 默认值false
3. infoWindowVisible 可见性(双向绑定)
4. infoWindowPosition 打开位置

#### 导出

1. infoWindow: AMap.InfoWindow 消息窗体对象

### PsrVue3AMapLayerThreeJs ThreeJs图层

#### 属性

1. aMap 地图对象
2. layerData THREE.Object3D对象
3. layerOpacity 透明度 默认值1
4. layerZoomMin 显示显示图层的缩放级别下限 默认值2
5. layerZoomMax 显示显示图层的缩放级别上限 默认值20
6. layerVisible 可见性

#### 导出

1. threeJs: AMap.GLCustomLayer 图层对象
npm package: @psr-framework/vue3-plugin-big-screen
Description: vue3.x 大屏组件
Author: zhoudingding
Latest version: 1.2.4

# vue3-plugin-big-screen

vue3.x组件 大屏

## 支持特性
1. 大屏展示组件
2. 大屏设计器组件
3. 在线拖拽设计大屏布局
4. 在线设计组件样式
5. 在线设计组件数据绑定逻辑
npm package: @psr-framework/vue3-plugin-drag-resize
Description: vue3.x 拖拽缩放组件
Author: zhoudingding
Latest version: 1.0.3

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:

1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.

You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
npm package: @psr-framework/vue3-plugin-echarts
Description: vue3.x Echarts组件
Author: zhoudingding
Latest version: 0.0.1

# vue3-plugin-echarts
Apache Echarts vue3.x组件

## 安装

```shell
npm i @psr-framework/vue3-plugin-echarts
```

## 全局注册

```ts
import "@psr-framework/vue3-plugin-echarts/style.css"
import {PsrVue3EchartsPlugin} from "@psr-framework/vue3-plugin-echarts";

const app = createApp(App).use(PsrVue3EchartsPlugin).mount('#app')
```

## 按需注册

```ts
import "@psr-framework/vue3-plugin-echarts/style.css"
import {PsrVue3Echarts} from "@psr-framework/vue3-plugin-echarts";
```

## 组件

### PsrVue3Echarts 地图

#### 属性

1. chartDarkTheme 深色主题 默认值false
2. chartOptions 图标配置项

#### 导出

1. echarts: EChartsType echarts实例对象
npm package: @psr-framework/vue3-plugin-ruler
Description: vue3.x 标尺组件
Author: zhoudingding
Latest version: 1.3.2

# vue3-plugin-ruler

vue3.x组件 标尺容器

## 支持特性:
1. 滚轮控制内容缩放
2. 拖拽移动内容视口
3. 滚轮控制标尺滚动
4. 双击标尺添加标记和辅助线，可拖拽移动，双击标记删除辅助线
5. 鼠标定位坐标显示，辅助线显示
6. 编辑/视口控制模式切换