位置: IT常识 - 正文

echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)

编辑:rootadmin
echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化) 基本使用方法

推荐整理分享echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

echarts-wordcloud是基于echarts的一个词云库,是我常用的一个组件,业务上用的多一点,但是这个库在echarts的官网文档里面没有说明,git上的说明也很少,有些配置需要自己摸索,下面都是我的血泪总结。官方github地址

依赖

首先要安装echarts包,这是基础包,然后还需要额外引入词云的包,对应的版本可自行选择,我这不是最新的

“echarts-wordcloud”: “^2.0.0” “echarts”: “^5.1.2”

echarts-wordcloud 血泪总结使用说明 (配置项及其不足点优化)

项目中使用:

import * as echarts from 'echarts'import 'echarts-wordcloud'echarts-wordcloud 的基本配置项

首先基本使用:

// 这里和echarts的使用一样,先拿到容器元素const chart = echarts.init(document.getElementById('tlrealtimewordcloud'))// 这里是官方给出的一些基本的配置项,我做一些说明chart.setOption({ ... series: [{ type: 'wordCloud',// shape这个属性虽然可配置,但是在词的数量不太多的时候,效果不明显,它会趋向于画一个椭圆 shape: 'circle', // 这个功能还没用过 keepAspect: false, // 这个是可以自定义背景图片的,词云会按照图片的形状排布,所以有形状限制的时候,最好用背景图来实现,而且,这个背景图一定要放base64的,不然词云画不出来 maskImage: maskImage, // 下面就是位置的配置 left: 'center', top: 'center', width: '70%', height: '80%', right: null, bottom: null, // 词的大小,最小12px,最大60px,可以在这个范围调整词的大小 sizeRange: [12, 60], // 每个词旋转的角度范围和旋转的步进 rotationRange: [-90, 90], rotationStep: 45, // 词间距,数值越小,间距越小,这里间距太小的话,会出现大词把小词套住的情况,比如一个大的口字,中间会有比较大的空隙,这时候他会把一些很小的字放在口字里面,这样的话,鼠标就无法选中里面的那个小字,这里可以用函数根据词云的数量动态返回间距 gridSize: 8,// 允许词太大的时候,超出画布的范围 drawOutOfBound: false,// 布局的时候是否有动画 layoutAnimation: true, // 这是全局的文字样式,相对应的还可以对每个词设置字体样式 textStyle: { fontFamily: 'sans-serif', fontWeight: 'bold', // 颜色可以用一个函数来返回字符串,这里是随机色 color: function () { // Random color return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } }, emphasis: { focus: 'self', textStyle: { textShadowBlur: 10, textShadowColor: '#333' } }, // 数据必须是一个数组,数组是对象,对象必须有name和value属性 data: [{ name: 'Farrah Abraham', value: 366, // 这里就是对每个字体的样式进行设置 textStyle: { } }] }]});优化项shape

shape也可以是一个函数,比如希望是矩形的时候(来自官方githup问答区)

shape: function shapeSquare(theta) { return Math.min( 1 / Math.abs(Math.cos(theta)), 1 / Math.abs(Math.sin(theta)) ) },gridSize

可以用一个函数根据词云的数量动态确定词间距

color

颜色可以在外面统一配置,也可以像下文那样给每个词都配置一下,这里推荐一组好看的配色

['#86D4FF', '#FF8F6C', '#2CF263', '#9FA8F7', '#1274FF', '#E6613D', '#FFC629', '#FFAB2E', '#F78289', '#FF6C96', '#45BFD4', '#4E31FF', '#31FBFB','#86D4FF', '#BF8AFD', '#FFF500', '#DE58FF', '#72ED7C', '#0BEEB8','#931CFF', '#3D25F2', '#F995C8', '#FBE9B4', '#FF4AB6']

效果是这样的

权重问题

组件会严格按照value值的大小分配权重,权重就体现在字体大小上。所以如果数据本身分布不均匀的时候,视觉效果看起来不够好,比如一个数为10000,其他的数为100-10,那么只能体现出两种权重了,即10000和其他。但是这样往往会导致视觉上,权重的分层不够明显,所以我们这个时候需要给数据分配权重,也就是改变每个词的fontSize.

代码主要思路是:

数据量少于8个的时候,仅做了颜色的处理(业务需求,只有红黑两系颜色)数据量大于8个的时候,二分法,把数据分成四部分,对于第一梯队的数据来说,一般是最重要的,至少也有两个数据,我们只对这一部分的数据做权重处理,就可以有良好的视觉效果最大的那个词,给一个最大的权重60,第二个和第三个,分别给55和40,剩下的就是(40-排名数)如果还有需求的话,可以再细化一点,如果能上相关的聚类算法,那就更完美了 大体效果为: 可以看见,排名靠前的都显示的比较好,直观而且有层次感// 这里是我自己摸索的四分法,面对数据分配不均匀的时候还是挺有效果的 const blackcolor = ['#000000', '#2a2a2a', '#545454', '#7e7e7e'] const redcolor = ['rgb(249,8,8)', 'rgba(249,8,8, 0.7)', 'rgba(249,8,8, 0.5)', 'rgba(249,8,8, 0.3)'] const iterate = (arr, i, j, l) => { if(l === 0){ for(let k = i; k <= j; k++){ if(k === 0){ arr[k].textStyle = { color: blackcolor[l], fontSize: 60 } } else if(k < 3) { if(k % 2 === 0){ arr[k].textStyle = { color: redcolor[l], fontSize: 40 } } else { arr[k].textStyle = { color: blackcolor[l], fontSize: 55 } } } else { if(k % 2 === 0){ arr[k].textStyle = { color: redcolor[l], fontSize: 40 - k } } else { arr[k].textStyle = { color: blackcolor[l], fontSize: 40 - k } } } } } else { for(let k = i; k <=j ; k++){ if(k % 2 === 0){ arr[k].textStyle = { color: redcolor[l] } } else { arr[k].textStyle = { color: blackcolor[l] } } } } } const dealworddata = (data) => { let len = data.length if(len <= 8 ){ let i = 0,j = 0,k = 0 while(k<len){ if( k % 2 === 0){ data[k].textStyle = { color: redcolor[i] } i++ } else { data[k].textStyle = { color: blackcolor[j] } j++ } k++ } } else { let mid = len >> 1 let leftmid = len >> 1 let rightmid = (len - 1 + mid) >> 1 iterate(data, 0, leftmid, 0) iterate(data, leftmid, mid, 1) iterate(data, mid, rightmid, 2) iterate(data, rightmid, len-1, 3) } }背景图片const maskImage = new Image() maskImage.src = ‘’ // 这里是base64编码 ... maskImage: maskImage
本文链接地址:https://www.jiuchutong.com/zhishi/285139.html 转载请保留说明!

上一篇:木星及木卫一的蒙太奇图像 (© NASA/Johns Hopkins University Applied Physics Laboratory/Southwest Research Institute/Goddard Space Flight Center)(木卫一距离木星多远)

下一篇:东内格罗斯省沿海的鹦嘴鱼,菲律宾 (© Tim Fitzharris/Minden Pictures)(内格罗斯岛)

  • 如何为文件夹加密(如何为文件夹加密)(如何为文件夹加密吗)

    如何为文件夹加密(如何为文件夹加密)(如何为文件夹加密吗)

  • vivoz3i怎么恢复出厂设置(vivoz3怎么恢复出厂设置)

    vivoz3i怎么恢复出厂设置(vivoz3怎么恢复出厂设置)

  • iqooz5x充电多少瓦

    iqooz5x充电多少瓦

  • 鸿蒙系统不能自己设置壁纸吗(鸿蒙系统不能自定义图标)

    鸿蒙系统不能自己设置壁纸吗(鸿蒙系统不能自定义图标)

  • word如何取消分节符设置(word如何取消分节符下一页)

    word如何取消分节符设置(word如何取消分节符下一页)

  • 微信怎么删除好友让对方没有我(微信怎么删除好友)

    微信怎么删除好友让对方没有我(微信怎么删除好友)

  • 三星s10+发热严重(三星s10+发热严重怎么办)

    三星s10+发热严重(三星s10+发热严重怎么办)

  • 小米手表苹果手机能用吗(小米手表苹果手机来电不显示)

    小米手表苹果手机能用吗(小米手表苹果手机来电不显示)

  • 小米9有实况拍照模式吗(小米9相机实况模式)

    小米9有实况拍照模式吗(小米9相机实况模式)

  • 苹果11pro max面部识别不了怎么回事(苹果11pro max面部解锁)

    苹果11pro max面部识别不了怎么回事(苹果11pro max面部解锁)

  • ipad为什么不能下载微信(ipad为什么不能连手机热点)

    ipad为什么不能下载微信(ipad为什么不能连手机热点)

  • 手机wps云空间已满怎么办(手机wps云空间已满怎么删除后电脑上文件还有吗)

    手机wps云空间已满怎么办(手机wps云空间已满怎么删除后电脑上文件还有吗)

  • 关机是被拉黑名单了吗(被拉黑关机和正常关机)

    关机是被拉黑名单了吗(被拉黑关机和正常关机)

  • 为什么爱奇艺全屏没有字幕(为什么爱奇艺全屏会挡住字幕)

    为什么爱奇艺全屏没有字幕(为什么爱奇艺全屏会挡住字幕)

  • vivo怎样设置sos(vivo怎样设置sos紧急联络)

    vivo怎样设置sos(vivo怎样设置sos紧急联络)

  • 抖音小店需要费用吗(抖音小店费用能退吗)

    抖音小店需要费用吗(抖音小店费用能退吗)

  • 小米mde6s手机怎么关机(小米mde6如何进入recovery)

    小米mde6s手机怎么关机(小米mde6如何进入recovery)

  • xp系统任务栏怎么调

    xp系统任务栏怎么调

  • typec接口是什么样子(typec接口的作用)

    typec接口是什么样子(typec接口的作用)

  • 抖音收藏好友能看到吗(抖音收藏的作品好友能看到吗)

    抖音收藏好友能看到吗(抖音收藏的作品好友能看到吗)

  • 怎么删除一页(怎么删除一页word)

    怎么删除一页(怎么删除一页word)

  • vivoy51安全模式怎么关闭(vivoy51安全模式怎么回事啊)

    vivoy51安全模式怎么关闭(vivoy51安全模式怎么回事啊)

  • x27升降摄像头光效怎么设置(x27升降摄像头有吱吱的声音吗)

    x27升降摄像头光效怎么设置(x27升降摄像头有吱吱的声音吗)

  • 基于vue 实现 excel导出导入功能(vue操作excel)

    基于vue 实现 excel导出导入功能(vue操作excel)

  • 使用stable diffusion webui在本地搭建中文的AI绘图模型(使用灭火器人要站在上风口还是下风口)

    使用stable diffusion webui在本地搭建中文的AI绘图模型(使用灭火器人要站在上风口还是下风口)

  • vue导入处理Excel表格详解(导入vue.js)

    vue导入处理Excel表格详解(导入vue.js)

  • 增值税发票上数量与单价
  • 主营业务成本的数据从哪里来的
  • 股权转让产生的印花税
  • 手机银行电子回单生成器
  • 建筑业一般计税税率
  • 未开票收入已报税怎么办
  • 承包经营承包费增值税
  • 外购白酒用于个人销售吗
  • 股权转让过户费用
  • 5年内亏损弥补账务
  • 高新技术企业必须要有研发费用吗
  • 进口原木的增值税率
  • 售后服务领用材料分录
  • 金蝶kis标准版软件操作流程演示
  • 消费税应纳税额计算方法是什么有何特点
  • 增值税专用发票税号错误
  • 增值税进项税额抵扣期限最新
  • 对外捐赠会计和税法差异调整
  • 全年一次性奖金税率表
  • win10系统声音有杂音
  • 无法找到脚本文件vbs怎么办
  • 公司被收购后所需资金
  • 非营利组织所得税申报
  • 稽查查补销售额后补开票如何申报
  • php身份证正则表达式
  • 变化检测是应用在图像的哪个运算中
  • web 前端
  • php密码加密技术phpass
  • 增值税纳税申报实训报告
  • 合并范围外关联方是什么
  • 出租厂房会计分录怎么写
  • 自由会计服务类工作者
  • javagui框架
  • 固定资产已提完折旧报废后如何处理
  • 资产负债表的货币资金怎么算
  • 劳动合同和劳务合同可以一起签吗
  • 交强险怎么报警
  • 出售其他权益工具投资其他综合收益
  • 民间非盈利组织会计制度核算的基础
  • 增值税免税企业可以开具专票吗
  • 应付职工薪酬工作流程
  • 付款金额比发票金额少怎么办
  • 长期债券是长期借款吗
  • 股本是什么类科目怎么记
  • 收到客户不要的定金怎么做账?
  • 更正会计凭证摘要怎么写?
  • 探望公司员工现金费用报销怎么写
  • 绿化植物税率
  • 信托保障基金会返还吗
  • 冲以前年度成本怎么做凭证
  • 融资手续费计入长期待摊
  • 分公司有独立账套吗
  • 新手公司内帐怎么做
  • 已提折旧是什么意思
  • 会计记账借贷记什么账户
  • win8怎么连接
  • VMware虚拟机安装苹果Mac OS
  • vcspawn.exe
  • 什么是微软软件
  • centos中如何安装软件
  • 一键u盘安装系统
  • 装win7ahci
  • ubuntu20.04软件中心
  • win7更改win10系统要怎么更改
  • win7只能上qq不能上网页
  • make_sock: could not bind to address 0.0.0.0:443
  • virtualbox开启虚拟化
  • Win7系统如何查看隐藏文件
  • unity自动攻击
  • cocos2dx视频教程
  • shell脚本如何注释
  • bootstrap表单模板
  • nodejs word
  • unity linux arm
  • python 字典的字典
  • js的iframe
  • wxpython中Textctrl回车事件无效的解决方法
  • 怎么用python播放音乐
  • python中scipy.stats
  • 学校 税务登记
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设