寒假学习记录13_云图学习

对热词的展示需要用到云图，因此进行了学习，有如下记录。

云图的使用要比关系图简单，因为没有link这一项要写。只要在data中调用访问数据库的方法将热词名字和出现频数循环写进来就可以实现云图的展示了，关键代码如下所示。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="hotWords.dao.LoadDaoImpl"%>
<%@page import="hotWords.bean.Explain"%>
<%@page import="java.util.List"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src='https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js'></script>
<script src='../test/dist/echarts-wordcloud.js'></script>
</head>
<%
request.setCharacterEncoding("UTF-8");
LoadDaoImpl loadDaoImpl=new LoadDaoImpl();
String type=null;
List<Explain> explains=null;
if(request.getParameter("type")==null)
explains=loadDaoImpl.load();
%>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<div id='main'></div>
<script>
var chart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
series: [ {
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'pentagon',
width: 600,
height: 400,
drawOutOfBound: true,
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: [
<%for(Explain e:explains){%>
{
name: "<%=e.getWords() %>",
value: <%=e.getNum()%>
},
<%}%>
]
} ]
};
chart.setOption(option);
window.onresize = chart.resize;
</script>
</body>
</html>

posted on 2020-02-13 22:17  丸za  阅读(78)  评论(0)    收藏  举报

导航