位置: 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)(内格罗斯岛)

  • 海关完税凭证是交给海关么
  • 一般纳税人认定表
  • 行政事业单位购买固定资产的流程
  • 建筑综合税率包含企业所得税吗
  • 换出交易性金融资产入账价值
  • 怎么在网站上打印
  • 商业汇票和商业本票
  • 个人出口货物到国外
  • 原材料盈亏会计分录怎么写
  • 小规模附加税减免政策2023最新
  • 报销退回多余款项怎么开收据
  • 企业成立股东没有实际出资分录怎么写?
  • 上月应交税金
  • 增值税专用发票几个点
  • 个人去税务局开居间费发票
  • 分公司亏损还会分摊所得税吗
  • 消费税征收范围注释
  • 个体工商户税收标准2023年
  • 小规模纳税人不用交增值税吗
  • 小规模纳税人残疾人纳税优惠
  • 资产负债表应交税费计算公式
  • 营改增一般纳税人申请过渡性财政扶持资金
  • 发票拍照打印出来不清晰
  • 材料未到,货款尚未支付
  • 怎么清除更新记录
  • 员工两处取得的荣誉
  • php中如何使用session
  • mac电脑色彩设置
  • 公司多缴税款了怎么办?可以退吗?
  • 2015年4月4日摄于Tear Drop Arch附近的月全食,犹他州纪念碑谷 (© Alan Dyer/Alamy)
  • codelite教程
  • php文字转语音源码
  • 在缴纳企业所得税的情形
  • 未确认融资费用报表填在哪个科目
  • php curl代理
  • 结转制造费用用什么科目
  • elinks --dump
  • 土地使用税和房产税怎么申报
  • mac node-gyp
  • 软件行业的成本核算
  • 技术服务收入属于什么收入
  • 固定资产有内容限制吗
  • 长期待摊费用借方负数什么意思
  • 受托加工的物资属于资产吗
  • 安全基金提取会计分录
  • 项目支付预缴税额怎么算
  • 进账单,其中有两个账户
  • 往来款多了会怎么样
  • 亏损股东现金补偿怎么算
  • 外商投资企业的中国投资者
  • 开票需要缴纳印花税吗
  • 企业亏损应纳税所得额怎么填
  • 进项税额转出忘记结转
  • 物流公司保险怎么买
  • 分支机构需要单独设立账簿吗
  • sqlserver数据库备份
  • sql语句查询去重
  • 科普知识大全
  • kill强制结束进程的参数
  • centos nis
  • 鲁大师安装失败怎么回事
  • winxp如何增加c盘空间
  • windows7怎么禁用网络
  • WIN10系统更新文件在哪里
  • javascript怎么设置
  • 如何设置edittext控件中的文字
  • 30岁亿万富婆
  • opengl中点画圆算法
  • js 图片加载
  • 安卓机虚拟键盘
  • arp欺骗防护软件
  • 怎么使用vue和axios连接后端
  • android圆形按钮
  • numpy使用心得
  • jquery获取指定元素
  • javascript概述及作用
  • 技术总结结束语
  • 北京市地方税务局发票查验
  • 国家税务总局山东省电子税务局
  • 单位个人所得税网上申报流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设