今天完成内容：
学习web
词云和柱状图的实现
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page import="dao.UserDao,bean.User"%>
<%@page import="java.util.ArrayList"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>可视化图</title>
<script src="js/jquery.min.js"></script>
<script src="js/echart3.js"></script>
<script src="js/echarts-wordcloud.js"></script>
<style>
#main{
100%;
height: 1500px;
border:1px solid #ddd;
float:center;
}
</style>
</head>
<div align="center"><a target='_blank' href="index.jsp">论文查询</a></div>
<body>
<div id="zhuzhuang" style="height:500%;">
</div>
<script type="text/javascript">
var ly;
function xyz(){
var dt;
var hzb=new Array(0);
var zzb=new Array(0);
$.ajax({
url : "lalala",
async : true,
type : "POST",
data : $('#SD').serialize(),
dataType : "json",
success : function(data) {
dt = data;
ly=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);
hzb.push(dt[i].name);
zzb.push(dt[i].value);
}
//alert("mydata"+mydata);
var myChart = echarts3.init(document.getElementById('main'));
//设置点击效果
myChart.setOption({
title: {
text: ''
},
tooltip: {},
series: [{
type : 'wordCloud', //类型为字符云
shape:'smooth', //平滑
gridSize : 8, //网格尺寸
size : ['50%','50%'],
//sizeRange : [ 50, 100 ],
rotationRange : [-45, 0, 45, 90,60,16], //旋转范围
textStyle : {
normal : {
fontFamily:'微软雅黑',
color: function() {
return 'rgb(' +
Math.round(Math.random() * 255) +
', ' + Math.round(Math.random() * 255) +
', ' + Math.round(Math.random() * 255) + ')'
}
},
emphasis : {
shadowBlur : 5, //阴影距离
shadowColor : '#333' //阴影颜色
}
},
left: 'center',
top: 'center',
right: null,
bottom: null,
'100%',
height:'100%',
data:mydata
}]
});
var zhudiv=echarts3.init(document.getElementById('zhuzhuang'));
option = {
xAxis: {
type: 'category',
data: hzb
},
yAxis: {
type: 'value'
},
series: [{
data: zzb,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black'
}
}
},
},
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
};
option && zhudiv.setOption(option);
biaoge();
},
error : function() {
alert("请求失败");
},
});
}
function biaoge(){
var tab=document.getElementById("kkk");
var str="<table>";
for(i=0;i<ly.length;i++ ){
str=str+"<tr><td>"+ly[i].name+"</td><td>"+ly[i].value+"</td></tr>";
}
str=str+"</table>";
var div = document.createElement("div");
div.id="changeresdiv";
div.innerHTML = str;
tab.appendChild(div);
}
/*function yyx(){
var zhudiv=echarts3.init(document.getElementById('zhuzhuang'));
option = {
xAxis: {
type: 'category',
data: hzb
},
yAxis: {
type: 'value'
},
series: [{
data: zzb,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black'
}
}
},
},
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
};
option && zhudiv.setOption(option);
}*/
</script>
<form action=" method="post" id="SD">
<table>
<tr><td><input type="text" name="xxx"></td></tr>
</table>
</form>
<input type="button" id= 'yyy' onclick="xyz()" value ="请选择查询词数"/>
<div id="main" align="center" style="height:300%;">
</div>
<div id="kkk"></div>
</body>
</html>
看视频
遇到问题：
无
明日目标：
学习web端的开发
学习css