将数据表中的热词统计结果用echarts热词云展示
前提:用DBUtil正确连接数据库,引用相关Js
allcloud.html
<!-- 内容主体区域 -->
<div id="main" style="width: 85%;height: 600px;float:auto"></div>
<script>
var myChart = echarts3.init(document.getElementById('main'));
var dt;
var hzb=new Array(0);
var zzb=new Array(0);
$.ajax({
url : "allCloudServlet",
async : true,
type : "post",
data : {
},
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);
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: {
formatter:function (params){
console.log(params);
return data.name + " : " +data.value + "次";
}
},
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,
width:'100%',
height:'100%',
data:mydata
}]
});
},
error : function() {
alert("请求失败");
},
});
</script>
</div>
allCloudServlet
package servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import dao.Dao;
import demo.all;
import demo.tiyu;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet("/allCloudServlet")
public class allCloudServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doGet(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<all> list = Dao.getAll();
//这里把“类别名称”和“销量”作为两个属性封装在一个Product类里,每个Product类的对象都可以看作是一个类别(X轴坐标值)与销量(Y轴坐标值)的集合
// System.out.println(list.toString());
ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类
String json = mapper.writeValueAsString(list); //将list中的对象转换为Json格式的数组
//System.out.println(json);
//将json数据返回给客户端
resp.setContentType("text/html; charset=utf-8");
resp.getWriter().write(json);
}
}
all.java
package demo;
public class all {
private String name;
private String value;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}
Dao.getAll()
public static ArrayList<all> getAll(){
ArrayList<all> list=new ArrayList<>();
String sql="select * from alldata";
Connection conn= DBUtil.getConn();
ResultSet rs =null;
PreparedStatement pstmt=null;
try {
pstmt=conn.prepareStatement(sql);
rs=pstmt.executeQuery();
while (rs.next()) {
all plane = new all();
plane.setName(rs.getString("name"));
plane.setValue(rs.getString("value"));
list.add(plane);
}
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
finally {
DBUtil.close(rs, pstmt, conn);
}
return list;
}