回答：
提供一个思路：可以根据热度设置一个倍率，然后字体大小和背景透明度根据倍率设置
回答：
使用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
