jsp中使用echarts简单示例

使用echarts的简单步骤：

前言：echarts的使用可以参考官网，本博客只是初级入门。官网教程：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

1.     下载echarts，可到官网上下载echarts。

2.     新建一个web project工程。

3.     在webRoot下新建一个js文件夹，放入echarts.min.js和jquery.js(具体情况具体操作)下图中echarts文件夹放的是bar.jsp（柱状图显示）

4.新建一个class，本例中新建的是一个Product.java

public class Product {
	private String name;
	private int num;
	
	public Product(String name, int num) {
		super();
		this.name = name;
		this.num = num;
	}
	public Product() {
		super();
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getNum() {
		return num;
	}
	public void setNum(int num) {
		this.num = num;
	}
	@Override
	public String toString() {
		return "Product [name=" + name + ", num=" + num + "]";
	}
	
}

5.新建一个servlet,本例中新建的servlet命为ProductServlet

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		List list = new ArrayList();
		list.add(new Product("衬衫",50));
		list.add(new Product("羊毛衫",35));
		list.add(new Product("裤子",30));
		list.add(new Product("袜子",46));
		list.add(new Product("裤袜",40));
		
		Gson json = new Gson();
		String result = json.toJson(list);
		System.out.println(result);
		response.getWriter().write(result);
	}

注意：此处进行了json的转换，本例子中使用的是谷歌的json包，名为gson.jar

6.新建一个名为bar.jsp的页面（本例中放在webRoot/echarts/bar.jsp）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    
    
    
    
	
	
	    
	
	
	
	
	
  
  
  
  		首页

  		折线图演示

  		饼图演示

  		

  		
  

7.测试，结果

示例源代码： http://download.csdn.net/download/rong_gong/10253443