回答：

提供一个思路：可以根据热度设置一个倍率，然后字体大小和背景透明度根据倍率设置

回答：

使用websocket,热度变化时,数据自动改变

回答：

回答：

我提供一个我自己写的小demo

我猜楼主的问题是不知道如何把颜色亮度数字化，我这里使用的是hsl格式的颜色l可以直接表示颜色亮度，颜色亮度直接和value的占比对应

.word-box {

width: 300px;

margin: auto;

border: solid 1px #eee;

}

.word-box .word-item {

margin: 15px 0;

padding: 0 20px;

float: left;

vertical-align: middle;

}

const wordBox = document.querySelector('.word-box');

// 定义数据，value 表示文字的热度

const wordArr = [{

word: 'Alamofire',

value: 30,

}, {

word: 'BLE',

value: 40,

}, {

word: 'CocoalPods',

value: 50,

}, {

word: 'Framework',

value: 60

}, {

word: '开源库',

value: 100

}];

// 按照value排序

wordArr.sort((a, b) => a.value > b.value ? 1 : -1);

// 获取最大和最小值，计算单词的value占比

const

valueDistance = wordArr[wordArr.length - 1].value - wordArr[0].value,

fontSizeRange = [12, 20],

// 颜色范围，从纯黑到半黑(hsl颜色好处理颜色亮度，hex颜色自己去看如何处理颜色亮度)

baseColor = 'hsl(120, 0%, $%)',

// 颜色亮度从高到低

colorRange = [50, 0];

wordArr.map(v => {

// 计算value占比

v.percent = (v.value - wordArr[0].value) / valueDistance;

v.fontSize = (fontSizeRange[0] + (fontSizeRange[1] - fontSizeRange[0]) * v.percent).toFixed(2);

// 占比超过一半 字体加粗

v.fontWeight = v.percent > .5 ? 'bold' : 'normal';

const colorLightness = (colorRange[0] + (colorRange[1] - colorRange[0]) * v.percent).toFixed(2);

// 转换hsl的颜色

v.color = baseColor.replace('$', colorLightness)

});

const templateHtml = wordArr.reduce((acc, cur) => {

return acc + `

}, '');

wordBox.innerHTML = templateHtml