个人作业二第二阶段冲刺记录
发布日期2021.5.3
今天老师发布了此项目的第二阶段，这侧跟上次一样也是先设计了一个页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>热词云</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="js/echarts.min.js"></script>
<script src="js/echarts-wordcloud.js"></script>
<style>
body {
font-family: "Lato", sans-serif;
background-image:url("456.jpg");
background-size: cover;
}
#main
{
width: 100%;
border: 1px solid #ddd;
height: 0;
float: center;
}
.layui-input
{
width: 250px;
height: 10px;
padding: 12px 16px;
font-size: 16px;
margin: 0;
outline: 0;
box-shadow: none;
border-radius: 30px;
border: 2px solid #c4c7ce;
background: white;
color: #222;
overflow: hidden;
box-sizing: content-box;
}
.layui-btn
{
width: 80px;
height: 40px;
color: #fff;
background: #0bc5de;
line-height: 40px;
text-align: center;
border: 0px;
}
.layui-inline
{
margin-top:20px;
}
a
{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
li{
list-style-type:none;
}
</style>
<script type="text/javascript">
function openNav1() {
document.getElementById("main").style.height = "400px";
}
</script>
</head>
<body>
<div class="layuimini-container">
<h1 align="center">热词云</h1>
<div>
<li><a href="lunwen.html">论文检索 </a></li>
</div>
<fieldset class="table-search-fieldset">
<div style="margin: 10px 10px 10px">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">排行TOP数</label>
<div class="layui-input-inline">
<input type="text" name="num" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn" onclick="openNav1()" lay-submit lay-filter="data-search-btn1"> 搜 索</button>
</div>
</div>
</form>
</div>
</fieldset>
<div id="main" align="center">
</div>
<div>
<table class="layui-hide" id="currentTableId1" lay-filter="currentTableFilter1"></table>
</div>
<script src="layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'laydate', 'table'], function () {
var $ = layui.jquery,
form = layui.form,
laydate = layui.laydate,
table = layui.table;
laydate.render({
elem: '#fdate'
});
// 监听搜索操作
form.on('submit(data-search-btn1)', function (data) {
var result = JSON.stringify(data.field);
console.log("搜索");
$.ajax({
url: "YunServlet?method=tu&num="+data.field.num,
async: false,
dataType: "json",
success: function(data) {
dt = data;
var mydata = new Array(0);
for (var i = 0; i < dt.length; i++) {
var d = {};
d["name"] = dt[i].name;
d["value"] = dt[i].value;
mydata.push(d);
}
var myChart = echarts.init(document.getElementById('main'));
//设置点击效果
myChart.setOption({
title: {
text: '热词TOP'
},
tooltip: {},
series: [{
type: 'wordCloud', //类型为字符云
shape: 'smooth', //平滑
gridSize: 9, //网格尺寸
size: ['50%', '50%'],
//sizeRange : [ 50, 100 ],
rotationRange: [-45, 0, 45, 80], //旋转范围
textStyle: {
normal: {
fontFamily: '微软雅黑',
color: function() {
return 'rgb(' +
Math.round(Math.random() * 255) +
', ' + 3 +
', ' + Math.round(Math.random() * 255) + ')'
}
},
emphasis: {
shadowBlur: 5, //阴影距离
shadowColor: '#333' //阴影颜色
}
},
left: 'center',
top: 'center',
width: '100%',
height: '100%',
data: mydata
}]
});
myChart.on('click', function(params) {
table.reload('currentTableId', {
url: 'ClickServlet'
,where: {keywords:params.name} //设定异步数据接口的额外参数
});
});
},
error: function() {
alert("请求失败");
},
});
table.render({
elem: '#currentTableId1',
url: 'YunServlet',
where: { method: 'tongji', num:data.field.num},
page: true,
limit:15,
cols: [[
{field: 'keyword', width: 100, title: '关键词'},
{field: 'number',width: 200,title: '出现次数',sort: true},
]],
skin: 'line'
});
layer.msg("搜索成功",{icon:1});
return false;
});
// 监听搜索操作
});
</script>
</body>
</html>
浙公网安备 33010602011771号