純前端實現詞雲展示+附微博熱搜詞雲Demo程式碼

程式設計實驗室發表於2021-11-13
前端

前言

最近工作中做了幾個資料視覺化大屏專案，其中也有用到了詞雲展示，以前做詞雲都是用python庫來生成圖片顯示的，這次用了純前端的實現（Ctrl+V真好用），同時順手做個微博熱搜的詞云然後記錄一下~

依賴

  • echarts 4.x
  • echarts-wordcloud 1.1.3

tips：echarts-wordcloud現在有2.0和1.x兩個版本，2.0對應echarts 5.x版本

效果

image.png

實現過程

首先新建一個HTML（廢話）

因為是用echarts，所以需要一個div來放canvas：

<div class="chart" id="chartWordCloud" style="width: 100%;height: 600px;"></div>

接下來是JS部分

微博熱搜的資料用到一個我之前的OneCat專案的介面，資料的形式大概是這樣：

（熱搜關鍵詞資料是爬蟲拿到微博熱搜資料之後做分詞處理計算出來的，現在不太嚴謹，感覺應該做詞性分析，只取出名詞和動詞進行統計，效果會好一點）

{
    "detail": "微博熱搜關鍵詞",
    "data": [
        {
            "name": "男子",
            "rank": 1.0,
            "heat": 1552222,
            "count": 1
        },
        {
            "name": "直播間",
            "rank": 1.0,
            "heat": 1552222,
            "count": 1
        },
        {
            "name": "撿漏",
            "rank": 1.0,
            "heat": 1552222,
            "count": 1
        }
    ]
}

可以看到每個熱搜關鍵詞的熱度、出現數量、加權排名都有了~

搞定了資料之後，接下來要來渲染詞雲了

首先需要一個隨機生成顏色的函式，才能實現花花綠綠的效果

function randomColor() {
    return 'rgb(' + [
        Math.round(Math.random() * 255),
        Math.round(Math.random() * 255),
        Math.round(Math.random() * 255)
    ].join(',') + ')'
}

初始化echart物件

let chart = echarts.init(document.querySelector('#chartWordCloud'))

程式碼如下

fetch(API).then(res => res.json()).then(res => {
    let originData = res.data.map(item => ({
        name: item.name,
        value: item.heat
    }))

    const data = originData.map(val => ({
        ...val,
        textStyle: {
            normal: {
                color: randomColor()
            }
        }
    }))

    chart.setOption({
        series: [{
            type: 'wordCloud',
            shape: 'star',
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            width: '100%',
            height: '100%',
            sizeRange: [10, 80],
            rotationRange: [-90, 90],
            rotationStep: 45,
            gridSize: 8,
            drawOutOfBound: false,
            textStyle: {
                normal: {
                    fontFamily: 'sans-serif',
                    fontWeight: 'normal'
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data
        }]
    })
})

試試效果

我設定的造型是五角星，出來的效果就是這樣：

image.png

這是圓的：

image.png

如果改成心形麼就是這樣（好像不太像

image.png

來個鑽石試試

image.png

三角形

image.png

躺著的三角形

image.png

不皮了~

各個配置的作用如下

  • shape ：詞雲的形狀，預設是 circle，可選的引數有cardioid 、 diamond 、 triangle-forward 、 triangle 、 star。
  • left top right bottom ：詞雲的位置，預設是 center center。
  • width height ：詞雲的寬高，預設是 75% 80%。
  • sizeRange ：詞雲的文字字號範圍，預設是[12, 60] ，詞雲會根據提供原始資料的 value 對文字的字號進行渲染。以預設值為例， value 最小的渲染為 12px ，最大的渲染為 60px ，中間的值按比例計算相應的數值。
  • rotationRange rotationStep ：詞雲中文字的角度，詞雲中的文字會隨機的在 rotationRange 範圍內旋轉角度，渲染的梯度就是 rotationStep ，這個值越小，詞雲裡出現的角度種類就越多。以上面引數為例，可能旋轉的角度就是 -90 -45 0 45 90 。
  • gridSize ：詞雲中每個詞的間距。
  • drawOutOfBound ：是否允許詞雲在邊界外渲染，直接使用預設引數 false 就可以，否則容易造成詞重疊。
  • textStyle ：詞雲中文字的樣式， normal 是初始的樣式， emphasis 是滑鼠移到文字上的樣式。

Demo程式碼

為本文寫的Demo：Deali-Axy/WeiboWordCloud-frontend: 微博詞雲，前端 (github.com)

地址：https://github.com/Deali-Axy/WeiboWordCloud-frontend

參考資料

相關文章