纯前端实现词云展示+附微博热搜词云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)
地址:https://github.com/Deali-Axy/WeiboWordCloud-frontend
参考资料
- echarts-wordcloud组件项目地址:https://github.com/ecomfe/echarts-wordcloud
- 博客:https://segmentfault.com/a/1190000023022232
纯前端实现词云展示+附微博热搜词云Demo代码的更多相关文章
- Redis简单案例(一) 网站搜索的热搜词
对于一个网站来说,无论是商城网站还是门户网站,搜索框都是有一个比较重要的地位,它的存在可以说是 为了让用户更快.更方便的去找到自己想要的东西.对于经常逛这个网站的用户,当然也会想知道在这里比较“火” ...
- Python网络爬虫-爬取微博热搜
微博热搜的爬取较为简单,我只是用了lxml和requests两个库 url=https://s.weibo.com/top/summary?Refer=top_hot&topnav=1& ...
- 2020不平凡的90天,Python分析三个月微博热搜数据带你回顾
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:刘早起早起 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...
- nodejs实现定时爬取微博热搜
The summer is coming " 我知道,那些夏天,就像青春一样回不来. - 宋冬野 青春是回不来了,倒是要准备渡过在西安的第三个夏天了. 废话 我发现,自己对 coding 这 ...
- SparkStreaming实时日志分析--实时热搜词
Overview 整个项目的整体架构如下: 关于SparkStreaming的部分: Flume传数据到SparkStreaming:为了简单使用的是push-based的方式.这种方式可能会丢失数据 ...
- Python爬取微博热搜以及链接
基本操作,不再详述 直接贴源码(根据当前时间创建文件): import requests from bs4 import BeautifulSoup import time def input_to_ ...
- BeautifulSoup爬取微博热搜榜
获取url 设定请求头 requests发出get请求 实例化BeautifulSoup对象 BeautifulSoup提取数据 import requests 2 from bs4 import B ...
- Sharepoint页面项目展示画廊纯前端实现,后端用list/library简单维护
需求背景: Sharepoint页面项目展示画廊.图片+文字,要求图片与文字用Sharepoint Library维护,然后在sharepoint页面上被调用,生成项目展示画廊. 解决方案(纯前端), ...
- python实现使用词云展示图片
记录瞬间 首先,要安装一些第三方包 pip install scipyCollecting scipy Downloading https://files.pythonhosted.org/packa ...
随机推荐
- 51nod1836-战忽局的手段【期望dp,矩阵乘法】
正题 题目连接:http://www.51nod.com/Challenge/Problem.html#problemId=1836 题目大意 \(n\)个点\(m\)次随机选择一个点标记(可以重复) ...
- CF990G-GCD Counting【dfs】
正题 题目链接:https://www.luogu.com.cn/problem/CF990G 题目大意 给出一棵有点权的树,对于每个\(k\)求有多条路径的点权\(gcd\)为\(k\) \(1\l ...
- ASP.NET Core 中间件的使用(三):全局异常处理机制
前言 我们经常听到"秒修复秒上线",觉得很厉害的样子. 其实不然,这只是一个调侃而已,出现问题的方式很多(逻辑漏洞.代码异常.操作方式不正确等). 我们今天来说代码异常问题怎么快速 ...
- Linux命令行:监视系统IO、内存、CPU、GPU
[监视IO] Linux18.04自带工具sysstat,其中的iostat可以用于观察IO情况.Linux16.04系统没有默认安装,需要手动安装,安装sysstat时需要下载新的内核(我的原本是1 ...
- 【C++ Primer Plus】编程练习答案——第3章
1 void ch3_1() { 2 using namespace std; 3 unsigned int factor = 12; 4 unsigned int inch, feet; 5 cou ...
- 解析csv数据绘制曲线图
一个解析csv数据的小工具,所做项目中要查看脉冲图谱,经理就让我这个刚入职的小萌新写了个小程序.同事将csv格式的脉冲数据发给我,我的想法就是,将这些csv里的数据作为纵轴,x++为横轴,绘制出折线图 ...
- 9.亿级流量电商系统JVM模型参数预估方案
1. 需求分析 大促在即,拥有亿级流量的电商平台开发了一个订单系统,我们应该如何来预估其并发量?如何根据并发量来合理配置JVM参数呢? 假设,现在有一个场景,一个电商平台,比如京东,需要承担每天上亿的 ...
- 返回值优化 RVO
<深度探索C++对象模型>-- 2.3 返回值的初始化 & 在编译器层面做优化
- 解决Mybatis 报错Invalid bound statement (not found)
解决Mybatis 报错Invalid bound statement (not found) 出现此错误的原因 1.xml文件不存在 2.xml文件和mapper没有映射上 namespace指定映 ...
- WEB安全指南
说明:本文是Mozilla Web应用部署文档,对运维或者后端开发团队的部署行为进行指导.该部署安全规范内容充实,对于部署有很大意义.同时也涉及到了许多web前端应用安全的基本知识,如CSP, TOK ...