文字云组件

### 1.参选赛道+作品仓库地址连接

赛道B，https://gitee.com/liuxueji/word-cloud.git

### 2.作者ID

刘学技

### 3.作品效果图

![image-20220712123256823](https://liuxueji.oss-cn-guangzhou.aliyuncs.com/image-20220712123256823.png)

### 4.实现原理

#### 4.1 随机颜色

在效果图中我们可以看到，每个词的颜色是不一样的，这是通过随机颜色实现的

我们知道，颜色可以通过rgb获取，rgb中有三个参数rgb(xxx,xxx,xxx)，通过三个参数决定颜色，所以我们可以通过随机数来生成这三个参数

> 参数取值范围： 0~255

getColor()

```
        let r = Math.floor(Math.random() * 255);
        let g = Math.floor(Math.random() * 255);
        let b = Math.floor(Math.random() * 255);
        return "rgb(" + r + "," + g + "," + b + ")";
```

> 该方法用于获取颜色，并且是通过随机数获取，最后通过字符拼接得到一个完整的`rgb(xxx,xxx,xxx)`并返回

#### 4.2 文字大小

文字大小是用过temp（步频）和num（词频）两个参数控制的，num是固定的，步频的可以用户自定义。此外，为了防止词频过大，造成文字过大或者过小，影响用户体验，所以，增加最大文字和最小文字

getSize(num)

```
    getSize (num) {
        let fontSize = num * this.temp;
        if(fontSize>this.fontMax) fontSize = this.fontMax
        if (fontSize<this.fontMin) fontSize = this.fontMin
        console.log(this.fontMin)
        return fontSize +'px' ;
    }
```

### 4.3 数据整合

通过循环，将上面获取到的文字大小、文字颜色，push到list中的每一项中，此时我们的数据就有文字对应的样式了

展示数据的时候我希望能将位置打乱，所以需要对数组随机排序，方法有很多，我是通过sort()方法来实现的

```
sort(a,b)为一个方法时，如果返回值<0，则a会排到b前面，返回值>0，则a会排到b后面
根据这个性质，我们只需要随机生成返回值，使它在正负数区间内即可
```

getList()

```
    getList () {
        this.list.forEach(item => {
            let temp = item;
            temp.size = this.getSize(item.num)
            temp.color = this.getColor()
            this.textList.push(temp)
        })
        // 将数组顺序打乱
        this.textList.sort(() => {
            return (Math.random()-0.5);
        });
    }
```

#### 4.4 组件调用

组件调用这里我就不介绍了，详细使用可以看官方文档。

这里传入的参数中list的格式，必须有text（文字）和num（频率），类似这样`[{text:'文本1',num:10}]`

```
<element name='comp' src='../../common/component/wordCloud/index.hml'></element>
<div class="container">
    <comp list="{{userlist}}" width="400" height="500" temp="6" font-max="100" font-min="20"></comp>
</div>
```

### 5.细节描述

- **组件功能**：根据文字出现次数动态展示文字大小、随机展示文字颜色、文字顺序随机排序。
- **组件价值**：可以更直观的展示出现频率高的文字，可视化展示每个文字的重要性。

- **应用场景**：可以用来美化文字、用来进行做大量文字对比、通过文字出现频率展示热点文字。

OpenHarmony-SIG/contest
关闭

内容风险标识

评论 (0)

OpenHarmony-SIG/contest关闭 .gitee-modal { width: 500px !important; }

内容风险标识