# bin-datav

**Repository Path**: wangbin3162/bin-datav

## Basic Information

- **Project Name**: bin-datav
- **Description**: 基于vue3的数据可视化大屏基础组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 45
- **Forks**: 14
- **Created**: 2021-08-11
- **Last Updated**: 2025-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bin-datav

组件库基于vue3 ，主要应用于构建大屏数据展示页面（数据可视化），鉴于每次开发都需要复制粘贴，因此打算收录常用资源。

组件库部分组件，依赖于[Datav](https://github.com/DataV-Team/Datav)因其组件库不支持vue3，因此参考其源码进行重新实现。

组件库分为多种种类，如功能、装饰、边框、文字标题、图表等多种类别。

组件的宽高皆为100%，用于根据父容器宽高自适应。

由于组件皆为大屏数据展示使用，因此，demo统一使用神色背景，组件文字等也都为浅色，如需建立白底的数据展示，需自行修改组件内容颜色。

[![NPM version](https://img.shields.io/npm/v/bin-datav.svg)](https://www.npmjs.com/package/bin-datav)

### 文档
[文档说明](https://wangbin3162.github.io/bin-datav/)


### 安装

用如下方式进行安装

```bash
npm i bin-datav -S
# or 
yarn add bin-datav
```

### 引入

你可以引入整个 bin-datav，或是根据需要仅引入部分组件。我们先介绍如何引入完整的。

#### 完整引入

在 main.js 中写入以下内容：

```javascript
import { createApp } from 'vue'
import BinDatav from 'bin-datav'
import App from './App.vue'
import 'bin-datav/lib/styles/index.css'

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

以上代码便完成了 bin-datav 的引入。需要注意的是，样式文件需要单独引入。

#### 按需引入

如果你只希望引入部分组件，比如 Icon，那么需要在 main.js 中写入以下内容

```javascript
import { createApp } from 'vue'
import { Icon } from 'bin-datav'
import App from './App.vue'
import 'bin-datav/lib/styles/components/icon.css'

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

**特别提醒:按需引用仍然需要导入样式，即在 main.js 或根组件 import 'bin-datav/lib/styles/index.css';**

完整组件列表参考源代码