| Echarts | 您所在的位置：网站首页 › 词云图可视化 › Echarts |
Echarts
|
词云图（WordCloud）是对文本中出现频率较高的“关键词”予以视觉化的展现，词云图可以过滤掉大量的低频低质的文本信息，使得浏览者只要一眼扫过文本就可领略文本的主旨。 词云图是一种非常好的图形展现方式，这种图形可以让人们对一个网页或者一篇文章进行语义分析，也就是分析同一篇文章中或者同一网页中关键词出现的频率。词云图对于产品排名、热点问题或舆情监测是十分有帮助的。 在最新版Echarts 4.ｘ官网中，已不再支持词云图功能，也找不到相应的API。若需要进行词云图开发，则需要引入echarts.js文件，再通过命令引入echarts-wordcloud.min.js文件。 利用2019年10月全球编程语言的TIOBE排名数据展现其中的文本信息，如图所示。 由图可知，每个文本都呈现出不同的大小和灰度 。此外，C、Java、Python这3个文本明显呈现出与其他文本不同的大小，这说明了这3个词的值也都会相对大于其他文本的值。 图示如下： 源代码如下： 词云图案例 //基于准备好的dom，初始化ECharts图表 var myChart = echarts.init(document.getElementById("main")); var option = { //指定图表的配置项和数据 backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1 title: { //配置标题组件 text: '全球编程语言的TIOBE排名', x: 'center', y: 15, textStyle: { color: 'green', fontSize: 22, } }, tooltip: { show: true }, //配置提示框组件 series: [{ //数据系列及其配置 name: '全球编程语言的TIOBE排名', //设置名称 type: 'wordCloud', //设置图表类型为字云图 sizeRange: [15, 100], //设置数据大小范围 size: ['80%', '80%'], //设置显示的字云图的大小 textRotation: [0, 45, 90, 135, -45, -90], //设置文字倾斜角度 textPadding: 3, //设置文字之间的间距 autoSize: { enable: true, minSize: 5 }, //设置文字的自动大小 textStyle: { normal: { color: function () { return 'rgb(' + [ Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255) ].join(',') + ')'; } }, emphasis: { shadowBlur: 26, color: '#333', shadowColor: '#ccc', fontSize: 20 } }, data: [ //设置具体的数据 { name: "Java", value: 16884 }, { name: "C", value: 16180 }, { name: "Python", value: 9089 }, { name: "C++", value: 6229 }, { name: "C#", value: 3860 }, { name: "VB.NET", value: 3745 }, { name: "Ruby", value: 1318 }, { name: "Assembly", value: 1307 }, { name: "R", value: 1261 }, { name: "Delphi", value: 1046 }, { name: "VB", value: 1234 }, { name: "Go", value: 1100 }, { name: "Delphi", value: 1046 }, { name: "SAS", value: 915 }, { name: "Perl", value: 1023 }, { name: "Matlab", value: 924 }, { name: "PL/SQL", value: 822 }, { name: "D", value: 814 }, { name: "Scheme", value: 193 }, { name: "COBEL", value: 447 }, { name: "Scratch", value: 524 }, { name: "Dart", value: 448 }, { name: "ABAP", value: 447 }, { name: "Scala", value: 442 }, { name: "Fortran", value: 439 }, { name: "LiveCode", value: 169 }, { name: "Lisp", value: 409 }, { name: "F#", value: 391 }, , { name: "Rust", value: 356 }, { name: "Kotlin", value: 319 }, { name: "Ada", value: 316 }, { name: "Logo", value: 261 }, { name: "SQL", value: 1935 }, { name: "RPG", value: 274 }, { name: "PHP", value: 1909 }, { name: "LabVIEW", value: 243 }, { name: "Haskell", value: 209 }, { name: "Bash", value: 196 }, { name: "ActionScript", value: 182 }, { name: "Transact-SQL", value: 569 }, { name: "PowerShell", value: 178 }, { name: "VBScript", value: 203 }, { name: "JavaScript", value: 2076 }, { name: "TypeScript", value: 304 }, { name: "Objective-C", value: 1501 }, { name: "Prolog", value: 261 }, { name: "Groovy", value: 1394 }, { name: "Swift", value: 1362 }, { name: "Crystal", value: 168 }, { name: "Lua", value: 379 }, { name: "Julia", value: 224 } ] //data结束 }] //series结束 }; //option结束 myChart.setOption(option); //为echarts对象加载数据 复制代码 |
【本文地址】
公司简介
联系我们