網頁上就是上圖這種效果
直接上代碼吧，其中數據由servlet從數據庫讀取，通過ajax傳遞給前端：
jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id = "main" style="width: 1200px;height: 800px;"></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script type="text/javascript" src = "js/echarts-wordcloud.min.js"></script>
<script type="text/javascript">
var maskImage = new Image();
maskImage.src = 'c.png';
$(document).ready(function(){
go();
});
function go() {
$.ajax({
type : "POST", //請求方式
url : "get", //請求路徑
data : { //請求參數
},
success : function(msg) { //異步請求成功執行的回調函數
da=JSON.parse(msg);
option = {
title: {
text: '詞雲',//標題
x: 'center',
textStyle: {
fontSize: 23
}
},
backgroundColor: '#F7F7F7',
tooltip: {
show: true
},
series: [{
name: '熱點分析',//數據提示窗標題
type: 'wordCloud',
drawOutOfBound:true,
sizeRange: [6, 66],//畫布范圍
rotationRange: [-45, 90],//數據翻轉范圍
shape: 'circle',
textPadding: 0,
autoSize: {
enable: true,
minSize: 6
},
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: da.word//數據
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
maskImage.onload = function() {
myChart.setOption(option);
};
window.onresize = function() {
myChart.resize();
}
myChart.on('click',function(params){
window.open('list?key='+params.name)//這里是設置點擊事件
});
},//狀態信息；拋出的異常信息
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
alert("數據加載失敗了"+errorThrown)
}
});
}
</script>
</body>
</html>
其中要導入的echarts-wordcloud.min.js文件請自行百度下載
接下來是servlet:
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.text.SimpleDateFormat;
import java.util.Date;
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 javax.servlet.http.HttpSession;
import com.alibaba.fastjson.JSONObject;
import Dao.UD;
/**
* Servlet implementation class get
*/
@WebServlet("/get")
public class get extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public get() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8"); //設置 HttpServletResponse使用utf-8編碼
response.setHeader("Content-Type", "text/html;charset=utf-8"); //通知瀏覽器使用utf-8解碼
response.getWriter().append("Served at: ").append(request.getContextPath());
Date dNow = new Date( );
request.setCharacterEncoding("utf-8");
JSONObject json=new JSONObject();
try {
Statement statement = conn.createStatement();
String num,country;
String sql = "select * from world where time ='"+date+"' ";
ArrayList<HashMap<String, String>> l=new ArrayList<HashMap<String, String>>();
HashMap<String, String> map = new HashMap<>();
ResultSet rs = statement.executeQuery(sql);
while(rs.next()){
num = rs.getString(4);
country= rs.getString(1);
map.put("name", country);
map.put("value", num);
l.add(map);
map = new HashMap<>();
}
json.put("world",l);
rs.close();
} catch (SQLException e) {
// TODO 自動生成的 catch 塊
e.printStackTrace();
}
PrintWriter out = response.getWriter();
response.resetBuffer();
out.write(json.toString());
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}