純前端實現詞雲展示+附微博熱搜詞雲Demo代碼
前言
最近工作中做了幾個數據可視化大屏項目，其中也有用到了詞雲展示，以前做詞雲都是用python庫來生成圖片顯示的，這次用了純前端的實現（Ctrl+V真好用），同時順手做個微博熱搜的詞云然後記錄一下~
依賴
- echarts 4.x
- echarts-wordcloud 1.1.3
tips：echarts-wordcloud現在有2.0和1.x兩個版本，2.0對應echarts 5.x版本
效果
實現過程
首先新建一個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
}]
})
})
試試效果
我設置的造型是五角星，出來的效果就是這樣：
這是圓的：
如果改成心形么就是這樣（好像不太像
來個鑽石試試
三角形
躺着的三角形
不皮了~
各個配置的作用如下
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)
地址：//github.com/Deali-Axy/WeiboWordCloud-frontend
參考資料
- echarts-wordcloud組件項目地址：//github.com/ecomfe/echarts-wordcloud
- 博客：//segmentfault.com/a/1190000023022232
