文字大小和颜色随着热度改变如何做？

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

青火

2174

发布于
2019-11-26

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

君迹我心

5.1k41927

发布于
2019-11-26

更新于
2019-11-27

词云。
echarts-wordcloud。

丿有点丶小情绪丨

1425

发布于
2019-11-26

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件排布</title>
  <style>
    .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;
    }
  </style>
</head>
<body>
<div class="word-box"></div>
</body>
<script>
  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 + `<div class="word-item" style="font-size: ${cur.fontSize}px; font-weight: ${cur.fontWeight}; color: ${cur.color};">${cur.word}</div>`
  }, '');

  wordBox.innerHTML = templateHtml

</script>
</html>

文字大小和颜色随着热度改变如何做？

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

怎么获取动态弹出对话框的模拟单击？

如何实现类似豆包的AI改写框跟随内容滚动效果？