-
效果图：
tutieshi_640x430_6s.gif air-bubble-cloud插件npm地址：https://www.npmjs.com/package/air-bubble-cloud
air-bubble-cloud气泡词云，通过原生js编辑，能够自定义修改气泡大小样式，可以对dom进行编辑。插件上手简单，修改容易。
*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 |
