脚本宝典收集整理的这篇文章主要介绍了纯前端实现词云展示+附微博热搜词云Demo代码,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近工作中做了几个数据可视化大屏项目,其中也有用到了词云展示,以前做词云都是用python库来生成图片显示的,这次用了纯前端的实现(Ctrl+V真好用),同时顺手做个微博热搜的词云然后记录一下~
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>
微博热搜的数据用到一个我之前的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:Deali-Axy/WeiboWordCloud-frontend: 微博词云,前端 (github.com)
地址:https://github.com/Deali-Axy/WeiboWordCloud-frontend
以上是脚本宝典为你收集整理的纯前端实现词云展示+附微博热搜词云Demo代码全部内容,希望文章能够帮你解决纯前端实现词云展示+附微博热搜词云Demo代码所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。