1、准备工作
1.1 需要引入的js
（1） echarts.js、echarts.min.js，这两个js可以直接去百度Echarts下载；
（2） jquery-3.4.1.js（版本不重要），它需求去jquery官网下载。
1.2 需要引入的jar包（使用json数据格式）
1.3 需要掌握的知识
（1） 会使用Ajax的基本用法；
（2） 会使用JavaWeb开发简单网页。
2、创建项目
2.1 在Eclipse下面创建一个项目，见下图
下面我根据项目结构从上到下为大家解释里面的内容
（1）src>com.ydj.ajaxEcharts>AjaxEchartsServlet.java
这个java里面的内容作用是完成页面与后台交互，把数据按照JSON格式发送到页面。它继承了HttpServlet，是属于Servlet的内容
（2）src>com.ydj.model>User.java
这是User的实体类
（3）ajaxEcharts.js、echarts.js、echarts.min.js、jquery-3.4.1.js
ajaxEcharts.js这个js文件是我们自己编写，作用是接收后台Servlet传输过来的数据，利用的技术是ajax；
echarts.js、echarts.min.js、jquery-3.4.1.js这三个js文件是相应官网提供
（4) lib下面7个jar包
（5）web.xml是配置文件
（6）AjaxEchartsTest.jsp是显示数据的页面
2.2 相应代码（按Servlet顺序）
（1）User实体类
package com.ydj.model;
/**
* User实体类---JavaBean规范
* 存放性别和人数两个属性
* @author Carlos
*
*/
public class User {
private String sex; //性别
private int number; //人数
//无参构造方法
public User() {}
//有参构造方法
public User(String sex, int number) {
this.sex = sex;
this.number = number;
}
//get和set方法
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getNumber() {
return number;
}
public void setNumber(int number) {
this.number = number;
}
//重写hashCode和equals方法
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + number;
result = prime * result + ((sex == null) ? 0 : sex.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
User other = (User) obj;
if (number != other.number)
return false;
if (sex == null) {
if (other.sex != null)
return false;
} else if (!sex.equals(other.sex))
return false;
return true;
}
//重写toString方法
@Override
public String toString() {
return "User [sex=" + sex + ", number=" + number + "]";
}
}
（2）编写AjaxEchartsServlet.java代码
package com.ydj.ajaxEcharts;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ydj.model.User;
import net.sf.json.JSONArray;
public class AjaxEchartsServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("---成功进入AjaxEchartsServlet---");
//1.定义一个集合用于存放数据
ArrayList<User> lUsers = new ArrayList<User>();
//2.往list里面添加user对象
lUsers.add(new User("男", 10));
lUsers.add(new User("女",20));
System.out.println("---lUser:"+lUsers);
//3.转换为JSON数据格式
JSONArray jsonArray = JSONArray.fromObject(lUsers);
System.out.println("--jsonArray:"+jsonArray);
//4.响应
response.setContentType("text/html; charset=UTF-8");
PrintWriter printWriter = response.getWriter();
printWriter.println(jsonArray);
System.out.println("---结束----");
}
}
（3）配置web.xml文件
<!-- ajax和Echarts测试 -->
<servlet>
<servlet-name>AjaxEchartsServlet</servlet-name>
<servlet-class>com.ydj.ajaxEcharts.AjaxEchartsServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxEchartsServlet</servlet-name>
<url-pattern>/ajaxEchartsTest</url-pattern>
</servlet-mapping>
（4）编写AjaxEchartsTest.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 引入echarts.js -->
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入js -->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<title>Ajax和Echarts动态数据可视化</title>
</head>
<body>
<!-- 定义一个div存放可视化图表 -->
<div id="pie" style="width: 600px;height: 400px"></div>
<!-- 引入自己编写的ajaxEcharts.js文件 -->
<script src="${pageContext.servletContext.contextPath}/js/ajaxEcharts.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
（5）编写ajaxEcharts.js`
/* ajaxEcharts是自己编写 */
//1.饼图可视化化
var myChart = echarts.init(document.getElementById('pie')); //pie是jsp里面的div的id属性
//2.饼图样式设置(这里面的属性都是Echarts，可以根据自己想法从里面选取属性)
myChart.setOption({
title: {
text: '用户注册男女比例',
x:'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b}: {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data : ['男','女']
},
series : [ {
name : '性别',
type : 'pie',
radius : [ '50%', '70%' ],
avoidLabelOverlap : false,
label : {
normal : {
show : false,
position : 'center'
},
emphasis : {
show : true,
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
},
labelLine : {
normal : {
show : false
}
},
data : [] //这里的data数据就需要我们动态加入
} ]
});
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
//定义属性，存放ajax返回的json类型值
var values = [];
/*下面才是重头戏---Ajax动态获取*/
$.ajax({
type:"post",
async:true, //异步请求
url:"ajaxEchartsTest", //请求发送到的服务器servlet方法
data:{},
dataType:"json", //返回数据形式为json
success:function(result){
//请求成功时执行该函数内容，result即为服务器返回的json对象
if(result){
for(var i=0;i<result.length;i++){
values.push({
name:result[i].sex,
value:result[i].number
});
}
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
series: [{
// 根据名字对应到相应的系列
data: values
}]
});
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
3、页面效果图
3386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
