1、准备工作

1.1 需要引入的js

（1） echarts.js、echarts.min.js，这两个js可以直接去百度Echarts下载；

（2） jquery-3.4.1.js（版本不重要），它需求去jquery官网下载。

1.2 需要引入的jar包（使用json数据格式）

Java WORD 饼图 生成饼图 eclipse生成饼状图_java


1.3 需要掌握的知识

（1） 会使用Ajax的基本用法；

（2） 会使用JavaWeb开发简单网页。

2、创建项目

2.1 在Eclipse下面创建一个项目，见下图

Java WORD 饼图 生成饼图 eclipse生成饼状图_java_02


下面我根据项目结构从上到下为大家解释里面的内容

（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、页面效果图

Java WORD 饼图 生成饼图 eclipse生成饼状图_Java WORD 饼图 生成饼图_03