javaWeb 饼状图从后台拿数据

今天在写购物商城系统时，前端显示饼状图时，不知道怎么去后台设置值，前台怎么获取值，经过一上午的查资料，与朋友讨论，终于解决了这个问题。

首先，使用饼状图，肯定要使用插件echarts，首先到官网上下载插件
http://echarts.baidu.com/download.html
然后在HTML中导入插件
找一个自己中意的饼图实例点进去查看它的源码
http://echarts.baidu.com/examples/#chart-type-pie
从官网上我找了一个实例源码

option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

我们要使用的就是它提供的这个源码
在HTML中，首先在body中给出一个div

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 <div id="main" style="width: 600px;height:400px;"></div>

在script 中

 // 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));

然后使用ajax发请求获取数据

  // 异步加载数据
  	//chart:xml中配置servlet的参数
        $.post('chart?action=getColumnChart').done(function (data) {
        	var data = eval('('+data+')').aaa;//aaa:后端设置的值
        	var names = {};
        	var total = {};
        	for(var i = 0;i<data.length;i++){
        		names[i]=data[i].name;
        		//total[i]=data[i].value;	
        	}
        	 /************************放我们copy过来的代码*****************************/  
        	var option = {
        		    title : {
        		        text: '某站点用户访问来源',
        		        subtext: '纯属虚构',
        		        x:'center'
        		    },
        		    tooltip : {
        		        trigger: 'item',
        		        formatter: "{a} <br/>{b} : {c} ({d}%)"
        		    },
        		    legend: {
        		        orient: 'vertical',
        		        left: 'left',
        		        data: names	//names我么获取的值
        		    },
        		    series : [
        		        {
        		            name: '访问来源',
        		            type: 'pie',
        		            radius : '55%',
        		            center: ['50%', '60%'],
        		            data: data,	//data我么获取的值
        		            itemStyle: {
        		                emphasis: {
        		                    shadowBlur: 10,
        		                    shadowOffsetX: 0,
        		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
        		                }
        		            }
        		        }
        		    ]
        		};
        	 /************************放我们copy过来的代码*****************************/  
        	 
        	// 使用刚指定的配置项和数据显示图表。
        	myChart.setOption(option); 
        });

xml中配置

<servlet>
    <servlet-name>chart</servlet-name>
    <servlet-class>com.wb.controller.ChartController</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>chart</servlet-name>
    <url-pattern>/chart</url-pattern>
  </servlet-mapping>

后端servlet中

package com.wb.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.wb.model.ChartList;
import com.wb.service.ChartService;
import com.wb.service.impl.ChartServiceImpl;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class ChartController extends HttpServlet{
	private static final long serialVersionUID = 1L;
	private ChartService chartService=null;
	

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		super.doPost(request, response);
		System.out.println("sssssss");
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		//解决传到前端的数据乱码问题
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html");
		String action=request.getParameter("action");
		//System.out.println("发请求了");
		if(action!=null&&"getColumnChart".equals(action)) {
			//System.out.println("发请求了");
			getColumnChart(request, response);
		}else{
			
		}
	}

	private void getColumnChart(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		JSONObject jObject = new JSONObject();
		List<ChartList> chartList = new ArrayList<ChartList>();
		//查询数据库返回的结果集
		chartList = chartService.getAdOrderList();			
		jObject.put("aaa", chartList);	//设置key为aaa
		PrintWriter pw=response.getWriter();
			pw.print(jObject);
		    pw.flush();
			pw.close();
	}
	@Override
	public void init() throws ServletException {
		super.init();
		chartService=new ChartServiceImpl();
	}
		
}

封装model类ChartList

package com.wb.model;

public class ChartList {

	private String name;//名称
	private int value;//查询的商品个数
	public ChartList(String name, int value) {
		super();
		this.name = name;
		this.value = value;
	}
	public ChartList() {
		super();
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getValue() {
		return value;
	}
	public void setValue(int value) {
		this.value = value;
	}
	@Override
	public String toString() {
		return "ChartList [name=" + name + ", value=" + value + "]";
	}

}

Dao的实现类

package com.wb.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.wb.dao.ChartDao;
import com.wb.model.ChartList;
import com.wb.util.JdbcUtil;

public class ChartDaoImpl implements ChartDao{

	private Connection con=null;
	private Statement sta=null;
	private PreparedStatement pre=null;
	private ResultSet rs=null;
	private List<ChartList> cList=null;
	private ChartList chartList = null;
	//获取分类名和类别之下的成交总数
	@Override
	public List<ChartList> getAdOrderList() {
		cList = new ArrayList<ChartList>();
		con=JdbcUtil.getConnection();
		String sql = "SELECT ps.`pname`,SUM(g.`t_number`) total FROM t_psort ps " + 
				"JOIN t_product p ON ps.pid = p.`sortid` " + 
				"JOIN goods_orders g ON p.`id` = g.`t_goodsId` " + 
				"WHERE g.`t_orderStatus` = 6 " + 
				"GROUP BY ps.`pid`";
		try {
			sta = con.createStatement();
			rs = sta.executeQuery(sql);
			while(rs.next()) {
				chartList = new ChartList();
				chartList.setName(rs.getString("pname"));
				chartList.setValue(rs.getInt("total"));
				cList.add(chartList);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			JdbcUtil.close(rs, sta, con);
		}
		return cList;
	}
	
}

刚开始写的时候，是将private List cList=null;写成了
private List cList=new ArrayList();
导致的结果是显示的饼图没问题，但是刷新一遍在显示数据就会重复一遍，导致的原意是，当第一次加载的时候，cList中的值没有清空，导致下一次访问时就不在重新new了。所以，将cList初始化为null，在方法中实例化，每次访问方法前，cList的值都为null，返回的结果和第一次访问时都一样。