1.0.1 • Published 3 years ago
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 | 表二介绍 |
| 属性名 | 说明 |
|---|
| name | 标题 |
| value | 数据 |
| textStyle | 气泡样式 |
| 属性名 | 说明 |
|---|
| color | 文字颜色 |
| background | 气泡背景颜色 |
| backgroundImage | 气泡背景颜色（可设置渐变颜色） |
| 方法名 | 说明 |
|---|
| click | 点击事件，参数 item,index |