冲刺团队作业二，顶会热词爬取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <script type="text/javascript"> var mydata = new Array(); window.onload = function () { var url = "wordcloud.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].hotword; d['value'] = json[i].weight; mydata.push(d); } console.log(mydata) } } } </script> </body> </html>
@charset "UTF-8"; body{ margin: 0px; padding: 0px; } div{ padding: 0px; margin: 0px; } #title{ width:100%; height:50px; text-align:center; line-height: 50px; background:black; color:white } #header{ width:100%; height:50px; line-height: 50px; background:DarkGray; color:white } .header_button_check{ text-decoration:none; padding:14px 20px; background:white; color:black; } .header_button_uncheck{ text-decoration:none; padding:14px 20px; background:DarkGray; color:black; } .input{ axlength:120 ; width:518px; height:28px; } select{ height:28px; } .button_fun{ width: 50px ; height: 28px; } .classname{ border: 0px solid red; width: 100%; padding-left: 0px; margin-top: 5px; } .button_new{ text-decoration: none; width: 50px ; height: 28px; background: white; color: white; border:none; }
<?php /** * * User: Xxg * Date: 2021/6/13 */ ?> <?php $i = 0; $title1=$_GET['title1']; $title2=$_GET['title2']; $conn = mysqli_connect('localhost','root','0721','mydb'); mysqli_query($conn,'set names utf-8'); echo "<table border='1px' width='100%'>"; echo "<tr>"; echo"<th>"; echo "序号"; echo "</th>"; echo"<th>"; echo "篇名"; echo "</th>"; echo"<th>"; echo "链接"; echo "</th>"; echo "</tr>"; $sql = "select * from cvpr where title like '%{$title1}%' and title like '%{$title2}%'"; $result = $conn->query($sql); if ($result->num_rows>0){ while ($row = $result->fetch_assoc()){ $i = $i+1; echo "<tr>"; echo"<td>"; echo $i; echo "</td>"; echo"<td>"; echo $row['title']; echo "</td>"; echo"<td>"; echo $row['lianjie']; echo "</td>"; echo "</tr>"; } } echo "</table>"; //?>
<html> <head> <meta charset="utf-8"> <script src='https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'></script> <!-- <script src="../../echarts/dist/echarts.js"></script> --> <script src='echarts-wordcloud.js'></script> </head> <body> <style> html, body{ width: 100%; height: 100%; margin: 0; } input{ axlength:120 ; width:518px; height:28px; } .button_fun{ width: 50px ; height: 28px; } </style> <div id='main' style=" 45%;height:90%;float:left;border: 1px solid red;margin-top: 6%" ></div> <div style=" 100%;height: 10% ;text-align:center; border: 1px solid red"> <input type = "text" id = "num" placeholder="请输入你要查询的热词数量" ><input type="button" class="button_fun" onclick="click1(mydata)" value="查询"> </div> <div id='main1' style=" 50%;height:90%;float:right;border: 1px solid red;margin-top: 0%" > </div> <script> var nameArray = new Array(); var valueArray = new Array(); var b = new Array(); var nameArr_slice = new Array(); var valueArr_slice = new Array(); var mydata = new Array(); window.onload = function () { var url = "wordcloud.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].hotword; d['value'] = json[i].weight; 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 sum(){ // var beforeData = mydata; // let tempArr = []; // for (let i = 0;i<beforeData.length;i++){ // if (tempArr.indexOf(beforeData[i].name) === -1){ // afterArr.push({ // name:beforeData[i].name, // value:beforeData[i].value, // }); // tempArr.push(beforeData[i].name) // }else{ // for (let j = 0;j<afterArr.length;j++){ // if (afterArr[j].name == beforeData[i].name){ // afterArr[j].value =afterArr[j].value +beforeData[i].value; // break; // } // } // } // } // } function click1() { //数据排序 var name = document.getElementById("num"); var num = name.value; mydata.sort(compare('value',false)); spreate_value(mydata); spreate_name(mydata) //截取 b = mydata.slice(0,num); nameArr_slice = nameArray.slice(0,num); valueArr_slice = valueArray.slice(0,num); var chart = echarts.init(document.getElementById('main')); var option = { tooltip: {}, series: [ { type: 'wordCloud', gridSize: 2, sizeRange: [12, 50], rotationRange: [-90, 90], shape: 'pentagon', 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 chart1 = echarts.init(document.getElementById('main1')); // var option; // option = { // xAxis: { // type: 'category', // data:nameArr_slice, // // xisLabel: { // // interval:0, // // rotate:40 // // } // axisLabel: { // interval: 0, // rotate:40 // } // }, // yAxis: { // type: 'value' // }, // series: [{ // data:valueArr_slice, // type: 'bar' // }] // }; // option&&chart1.setOption(option); // window.onresize = chart1.resize; // 生成表 creatTab(nameArr_slice,valueArr_slice); } function spreate_value(array1) { for (var count = 0;count<array1.length;count++){ valueArray.push(array1[count].value*987654321); } } function spreate_name(array1) { for (var count = 0;count<array1.length;count++){ nameArray.push(array1[count].name); } } function creatTab(array1,array2){ // array1 name ,array2,value var div1 =document.getElementById('main1'); var count = document.getElementById('num').value; // alert(rows+' '+cols) var tab='<table border=1 width=500">' for(var i=0;i<count;i++){ tab+='<tr>' for(var j=0;j<3;j++){ if ( j== 0){ var k = i+1; tab+="<td>"+k+"</td>" } if (j == 1){ tab+="<td>"+array1[i]+"</td>"; } if (j == 2){ tab+="<td>"+Math.round(array2[i])+"</td>"; } } tab+='</tr>' } tab+='</table>'; div1.innerHTML=tab } </script> </body> </html>