echarts实现词云图表，及参数配置详解

最近，公司要实现一个关键词的统计显示，于是想起了词云图，记录一下，效果图如下所示。也可以直接去我的博客下载打包好的所有脚本和html。

(https://download.csdn.net/download//85035375)

1、在 html 中创建一个渲染图表的 div ，引入脚本

    <script src="js/echart3.js"></script><script src="js/echarts-wordcloud.js"></script>

2、js基本配置

 function TJ_GJC() {var myChart = echarts3.init(document.getElementById('mzgqc'));var keywords = [{"name":"男神","value":2.64},{"name":"好身材","value":4.03},{"name":"校草","value":24.95},{"name":"酷","value":4.04},{"name":"时尚","value":5.27},{"name":"阳光活力","value":5.80},{"name":"初恋","value":3.09},{"name":"英俊潇洒","value":24.71},{"name":"霸气","value":6.33},{"name":"腼腆","value":2.55},{"name":"蠢萌","value":3.88},{"name":"青春","value":8.04},{"name":"网红","value":5.87},{"name":"萌","value":6.97},{"name":"认真","value":2.53},{"name":"古典","value":2.49},{"name":"温柔","value":3.91},{"name":"有个性","value":3.25},{"name":"可爱","value":9.93},{"name":"幽默诙谐","value":3.65}]var option = {series: [{type: 'wordCloud',//maskImage: maskImage,sizeRange: [15, 80],rotationRange: [0, 0],rotationStep: 45,gridSize: 8,shape: 'pentagon',width: '100%',height: '100%',textStyle: {normal: {color: function () {return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';},fontFamily: 'sans-serif',fontWeight: 'normal'},emphasis: {shadowBlur: 10,shadowColor: '#333'}},data: keywords}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize", function() {myChart.resize();});}

配置详解：

left top right bottom ：词云的位置，默认是 center；
shape：词云的形状，默认是circle(圆形)，可选的参数有cardioid（心形）、diamond（菱形正方形）、triangle-forward、triangle（三角形）、star（星形）、pentagon （五边形）；
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 是鼠标移到文字上的样式。
maskImage：词云轮廓图，白色区域将被排除在绘图文本之外,形状选项将继续应用为云的形状，如下图所示。

目前有两种方式(时间问题未尝试，亲们自己动手哈)

（1）可以在iconfont中下载（最好是填充的）图案，转为base64，就可以用来生成有图案的词云了。

（2）

var maskImage = new Image();
//var world_option = world_cloud(eval('(' +  '${cloud}' + ')'),maskImage);
var world_option = world_cloud(data,maskImage);
maskImage.onload = function () {  world_option.series[0].maskImage  worldChart.setOption(world_option);  }
maskImage.src = 'img/ren1.png';

以上基本为 echarts-wordcloud 所有的配置项。

参考文章：echarts实现词云图表

echarts 简单词云制作，自定义图案词云echarts-wordcloud.js

Echart 之词云 setOption配置说明

在echarts3中使用字符云

echarts——各个配置项详细说明总结

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

echarts实现词云图表，及参数配置详解相关推荐

【深入理解Hadoop原理】Hadoop 参数配置详解
Hadoop 参数配置详解一.常用端口组件节点默认端口配置用途说明 HDFS DataNode 50010 dfs.datanode.address datanode服务端口,用于数据传 ...
JVM启动参数配置详解
JVM启动参数配置详解 1. JDK8的JVM启动参数默认配置 2. JDK8的JVM启动参数说明 2.1 基本参数 2.2 G1相关参数 2.3 辅助信息 1. JDK8的JVM启动参数默认配置 - ...
echarts的词云图表类型有哪些_词云图的几种制作方法评测，你pick哪款
前言大家好,不知道大家会在什么场合使用词云图,对我来说词云图的优点除了它可以展示大量文本数据.从而让读者快速抓住重点,更重要的是词云图好看啊所以今天给大家分享几种词云图的制作方法.首先我们来思考一下 ...
echarts的词云图表类型有哪些_数据可视化之常见12种图表类型分析
数据可视化有众多展现方式,不同的数据类型要选择适合的展现方法,今天友创云天就整理分析了几种常见的类型,给大家提供参考. 1.饼图饼图是一个划分为几个扇形的圆形统计图表.每个扇形的弧长(以及圆心角和面 ...
【收藏】hdfs参数配置详解
hdfs-site.xml 配置参数 hdfs-site.xml 参数配置
python词云乱码_python词云库wordCloud使用方法详解(解决中文乱码)
文章中的例子主要借鉴wordColud的examples,在文章对examples中的例子做了一些改动. 一.wordColud设计中文词云乱码使用wordColud设计词云的时候可能会产生乱码问题 ...
5G-NR非连续接收DRX参数配置详解
5G-NR系统配置中的非连续接收系统 DRX:Discontinuous Reception 5G终端商用在即,根据前期测试及部分5G友好用户反馈,"5G终端功耗大,待机差"问题特 ...
java词云生成，kumo项目详解
0. 前言需要在后端生成一个词云图给小程序. 使用kumo项目实现. 1. demo 首先新建maven项目,prom.xml中加入以下依赖.加完之后记得reload. 要确保自己电脑或者服务器安装 ...
yacs、yaml进行实验参数配置详解
1 介绍很多模型需要设置超参数,当超参数过多时,不方便管理,于是出现了很多类似yaml,yacs的包.YACS是一个轻量级库,用于定义和管理系统配置,例如那些在为科学实验设计的软件中常见的配置.这些 ...
niginx参数配置详解（转）
作者:邓永超链接:https://zhuanlan.zhihu.com/p/38015228 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. configure 参 ...

echarts实现词云图表，及参数配置详解

echarts实现词云图表，及参数配置详解相关推荐

最新文章

热门文章