UNPKG

air-bubble-cloud

Version:

气泡词云,通过传入数据,自动生成动态移动的气泡词云

57 lines (45 loc) 1.45 kB
# 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 |