<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>登录界面</title> <link rel=stylesheet href=login.css> <script type=text/javascript src=https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js></script> <script type=text/javascript src=js/echarts-wordcloud.js></script> <style> .column1{ text-align:center; } </style> </head> <body> <div class=column1 style=width: 100%;height: 10%; > <p>输入词云图的个数：<input type=text id=count ><input type=button value=显示 onclick=click1(mydata) ></p> </div> <div style=width: 100%; height: 400px> <table border=1 align=left> <THEAD align=center><TR><TH>单词</TH><TH>词频</TH></TR></THEAD> <TBODY id='main'></TBODY> </table> <div id=main1 style=width:100%; height: 400px align=center></div> <script type=text/javascript> var b = new Array(); var n = new Array(); var c = new Array(); var mydata = new Array(); window.onload = function () { var url = sheet1.json; var request = new XMLHttpRequest(); request.open(get,url); request.send(null); request.onload = function(){ if (request.status == 200){ var json = JSON.parse(request.responseText) for (var i = 0;i<json.length;i++) { var d = {}; d['name'] = json[i].name; d['value'] = json[i].count; mydata.push(d); } console.log(mydata) } } } function compare(property,desc) { return function (a, b) { var value1 = a[property]; var value2 = b[property]; if(desc==true){ // 升序排列 return value1 - value2; }else{ // 降序排列 return value2 - value1; } } } function click1() { //数据排序 var name = document.getElementById(count); var num = name.value; mydata.sort(compare('value',false)); //截取 b = mydata.slice(0,num);// for(i=0;i<b.length;i++){ n.push(b[i].name); c.push(b[i].value); } var chart = echarts.init(document.getElementById('main1')); var option = { tooltip: {}, series: [ { type: 'wordCloud', gridSize: 2, sizeRange: [12, 50], rotationRange: [-90, 90], shape: 'pentagon', width: 600, height: 400, drawOutOfBound: true, textStyle: { color: function () { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } }, emphasis: { textStyle: { shadowBlur: 10, shadowColor: '#333' } }, data:b } ] }; chart.setOption(option); window.onresize = chart.resize; //} var div1 = document.getElementById('main'); var code = ; for(a=0;a<b.length;a++){ code += <TR><TD>+b[a].name+</TD><TD>+b[a].value+</TD></TR>; } //code += <TR><TD>Learning</TD><TD>123</TD></TR>; //code += <TR><TD>Image</TD><TD>61</TD></TR>; //code += <TR><TD>Network</TD><TD>57</TD></TR>; //code += <TR><TD>Deep</TD><TD>57</TD></TR>; div1.innerHTML = code; // 初始化echarts实列对象 /*var myChart = echarts.init(document.getElementById(main)); // 指定配置项和数据(option) var option = { legend: { top: 0%, right:0%, textStyle: { color: #2f89cf, fontSize: 12, }, }, color: [#2f89cf], tooltip: { trigger: axis, axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: shadow, // 默认为直线，可选为：'line' | 'shadow' }, }, // 修改图标的大小 grid: { left: 0%, top: 10px, right: 0%, bottom: 4%, containLabel: true, }, xAxis: [{ type: category, data: n, axisTick: { alignWithLabel: true, }, // 修改刻度标签相关样式 axisLabel: { color: rgba(12, 25, 255, .6), fontSize: 12, interval: 1, //控制是否全部显示 }, // 不显示x轴的样式 }, ], yAxis: [{ type: value, // 修改刻度标签相关样式 axisLabel: { color: rgba(255, 255, 255, .6), fontSize: 12, }, // y轴坐标系 axisLine: { lineStyle: { color: rgba(255, 255, 255, .1), width: 2, }, }, // y轴分割线的颜色 splitLine: { lineStyle: { color: rgba(255, 255, 255, .1), }, }, }, ], series: [ { name: 词频, type: bar, color:orange, // 修改柱子的宽度 barWidth: 10%, data: c, itemStyle: { // 修改柱子的圆角 barBorderRadius: 5, }, }, ], }; // 把配置项给实列对象 myChart.setOption(option); // 让图表跟随屏幕自动的去适应 window.onresize = chart.resize; window.addEventListener(resize, function() { myChart.resize(); }); */ } </script> </div> </body> </html>