# word-cloud

**Repository Path**: Jioho/word-cloud

## Basic Information

- **Project Name**: word-cloud
- **Description**: 词云demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-04
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# word-cloud

## 介绍

3D 旋转词云

## 引入

引入对应的 js 文件

- 普通引入

```html
<script src="xxxx/wordCloud.js"></script>
```

- vue 等项目引入

```js
require('@/xxx/wordCloud.js')
```

引入后，会在 `window` 对象上挂载 `WordCloud` 方法

## 使用

```js
var config = {} // 参数详见后面说明
var cloud = new WorldCloud(config)
```

### config 参数说明

| 参数        | 默认值                | 说明                               | 必填 |
| :---------- | :-------------------- | :--------------------------------- | :--- |
| radius      | 200                   | 词云圆球的直径                     | 否   |
| innerRadius | 0                     | 内部圆直径，添加该项后中间会有空白 | 否   |
| list        | []                    | 要配置的数组，具体项见下面配置     | 否   |
| move        | true                  | 是否加载后立刻开始转动             | 否   |
| tspeed      | 1                     | 移动速度的倍数                     | 否   |
| target      | ''                    | 挂载节点的名称 / 容器节点          | 是   |
| direction   | { x: 1, y: 1, z: -1 } | 移动速度和方位的控制               | 否   |
| moveTime    | 60                    | 每次更新的时间 单位：毫秒          | 否   |

### list 项配置说明

```json
[{ "text": "层特效", "className": "", "style": { "fontSize": "18px" } }]
```

- `text` :词云标签显示的文案

- `className` :使用外部的 class

- `style` :内部使用驼峰命名，设置对应的 css 行内样式
  - 样式中，如果传入的是数值类型，将会自动被补充 `px` 单位。

### direction 配置说明

```json
{ "x": 1, "y": 1, "z": -1 }
```

- `x` x 轴旋转方向

  - x 为 0 ，x 轴方向则不发生滚动
  - x 为正数，球体 x 轴从右到左滚动
  - x 为负数，球体 x 轴从左到右滚动

- `y` y 轴旋转方向

  - y 为 0 ，y 轴方向则不发生滚动
  - y 为正数，球体 y 轴从上到下滚动
  - y 为负数，球体 y 轴从下到上滚动

- `z` 时针（顺时针/逆时针）旋转方向
  - z 为 0 ，球体不会发生时针方向的旋转
  - z 为正数，球体顺时针转动
  - z 为负数，球体逆时针转动

1. 三个参数同时生效，三个参数均不为空时可实现伪 3D 球体旋转
2. 三个参数的值均为数值类型，会根据三个参数 `乘` 配置中的`tspeed`(速度倍数)。得出某个方向的旋转速度。得出的数字的`绝对值` 越大，某个方向旋转速度越快。
3. 使用 `tspeed` 配置为负数，可以整体改变球体运动方向

## 对象的方法

使用 `WorldCloud` 创建词云对象后，可以通过以下的方法控制词云  
下面的 `api` 调用都基于 `cloud` 展示

```js
var config = {} // 参数详见后面说明
var cloud = new WorldCloud(config)
```

### start

重新让词云开始旋转，适用于一开始默认没有转动/已经暂停后重新转动

```js
cloud.start()
```

### stop

暂停词云的转动

```js
cloud.start()
```

### changeSpeed

更新词云的移动速度/方向  
调用 `changeSpeed` 是一个对象，里面包裹 `x,y,z,tspeed`  
其中 `x,y,z,tspeed` 均为非必填参数  
根据参数的正负值和大小，可以实现改变方向旋转，旋转速度等

```js
var x = 1,
  y = 1,
  z = 1,
  tspeed = 1

cloud.changeSpeed({ x: x, y: y, z: z, tspeed: tspeed })
```

### getCurrentSpeed

获取当前词云的速度/方向信息

```js
var config = cloud.getCurrentSpeed()
console.log(config) // {x,y,z,tspeed}
```

### destroy

由于词云旋转依赖于 `setInterval` 触发更新，所以当页面销毁的时候，最好能调用一下销毁的方法

**销毁后，数据和配置均不会保留**

```js
cloud.destroy()
```

### on

添加订阅事件，当前支持的事件如下：

| 事件名     | 触发场景                               | 回调参数             | 参数说明                                                                           |
| :--------- | :------------------------------------- | :------------------- | :--------------------------------------------------------------------------------- |
| error      | 初始化成功后取消/订阅事件失败          | {message}            | message 错误消息                                                                   |
| mouseover  | 鼠标移入词云的时候触发，会连续触发多次 | { event, target }    | event:当前触发的 event ， target:当前进过的节点，有可能是父节点                    |
| mouseleave | 鼠标移出词云后触发                     | { event, direction } | event:当前触发的 event ， direction:鼠标离开后的 x,y,z 配置 用于获取鼠标离开的方向 |
| click      | 点击某个 a 标签触发的回调              | {target,data}        | target:当前触发的 a 标签节点， data:在初始化传入的 setting 中，某一项的全部信息    |

```js
cloud.on('click', function (res) {
  console.log(res.target) // a 节点信息
  console.log(res.data) // config 中对应项的信息 { "text": "层特效", "className": "", "style": { "fontSize": "18px" } }
})

cloud.on('error', function (res) {
  console.log(res.message) // 错误消息提示
})
```

### remove

删除订阅事件  
比如一开始监听了鼠标移动方法，后续触发某个场景后不需要监听了，可以通过 `remove` 移除对应的监听事件

```js
cloud.remove('mouseover')
```

### reset

重置词云  
相当于销毁了词云，重新传入一段新的，完整的配置，重新展示一个词云

重置后，之前所有的监听事件也会失效，需要重新监听

```js
var config = {}
cloud.reset(config)
```