# air-bubble-cloud
* 气泡词云，通过传入数据，自动生成动态移动的气泡词云
### Project setup(下载安装插件)
```
npm i air-bubble-cloud --save
或者
yarn add air-bubble-cloud --save
```

#### main.js import(在main.js文件中全局引入组件和相关样式)
```
//引入插件和css样式
import AirBubbleCloud from 'air-bubble-cloud';
import "air-bubble-cloud/air-bubble-cloud.css";
//注册使用插件
Vue.use(AirBubbleCloud);
```

#### use in component(在组建中使用气泡词云组件)
```
<AirBubbleCloud />
```

### 组件配置项介绍

- 属性

| 属性名 | 说明 | 数据类型 | 默认值 |
| ------ | ------ | ------ | ------ |
| baseSize | 最大的气泡直径 | number | 100 |
| baseFont | 最大的字体大小 | number | 20 |
| boxWidth | 外面盒子的宽度 | number | 300 |
| boxHeight | 外面盒子的高度 | number | 200 |
| data | 词云参数 | array | 表二介绍 |

- data数据参数

| 属性名 | 说明 | 
| ------ | ------ | 
| name | 标题 |
| value | 数据 |
| textStyle | 气泡样式 | 

- textStyle气泡样式

| 属性名 | 说明 | 
| ------ | ------ | 
| color | 文字颜色 |
| background | 气泡背景颜色 |
| backgroundImage | 气泡背景颜色（可设置渐变颜色） | 

- 对外暴露的事件方法

| 方法名 | 说明 | 
| ------ | ------ | 
| click | 点击事件，参数 item,index |