WordCloud is a visual presentation of “keywords” with high frequency in the text. WordCloud can filter out a large number of low-frequency and low-quality text information, so that visitors can understand the main idea of the text as long as they glance at the text. Word cloud map is a very good graphical display, which allows people to carry out semantic analysis of a web page or an article, that is, to analyze the frequency of keywords in the same article or the same page. Word cloud maps are very helpful for product ranking, hot issues or public opinion monitoring. In the latest version of Echarts 4.x, the word cloud function is no longer supported in the official website, nor can the corresponding API be found. If wordcloud development is needed, the echarts.js file needs to be introduced, and then the echarts-wordcloud.min.js file needs to be introduced by command.

The text information is presented using TIOBE ranking data for global programming languages in October 2019, as shown in the figure below. As can be seen from the figure, each text presents a different size and gray scale. In addition, C, Java and Python texts are obviously different in size from other texts, which indicates that the values of these three words are also relatively larger than the values of other texts.

The illustration is as follows:

Source code is as follows:

< HTML >< head> <meta charset=" utF-8 "> </title> <script type="text/javascript" SRC ='js/echarts.js'></script> <script type="text/javascript" src='js/echarts-wordcloud.min.js'></script> </head> <body> <div id="main" style="width:80%; height: 500px; border: 1px solid black"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var option = {backgroundColor: 'rgba(128, 128, 128, 0.1)', rgba set transparency 0.1 title: { 'TIOBE Ranking for Global Programming Languages ', x:' Center ', Y: 15, textStyle: {color: 'green', fontSize: 22,}}, Tooltip: {show: Series: [{// Data series and its configuration name: 'TIOBE ranking of global programming languages ', // Set the name type: 'wordCloud', // set the chart type to sizeRange: [15, 100], // Set the size range of data: ['80%', '80%'], // set the size of the displayed word cloud map textRotation: [0, 45, 90, 135, -45, -90], // Set the text Angle textPadding: 3, // Set the text spacing autoSize: {enable: true, minSize: 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: [// set specific 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 end}] //series end}; / / end option myChart. SetOption (option). </script> </body> </ HTML >Copy the code