jsp中使用echarts简单示例

最新推荐文章于 2024-05-28 11:11:34 发布

Rong_Gong

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量4.9k

点赞数

分类专栏： JAVAWeb 文章标签： jsp echarts javaweb

本文链接：https://blog.csdn.net/Rong_Gong/article/details/79339088

版权

JAVAWeb 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

使用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<Product> list = new ArrayList<Product>();
		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+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>柱状图演示</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  </head>
  
  <body>
  		<a href="index.jsp">首页</a><br>
  		<a href="echarts/line.jsp">折线图演示</a><br>
  		<a href="echarts/pie.jsp">饼图演示</a><br>
  		<div id = "main" style="width: 600px;height: 400px;"></div>
  		<script type="text/javascript">
  			var myecharts = echarts.init(document.getElementById('main'));
  			var option = {
  					backgroundColor:'#CC22FF',
  					title:{
  						text:'产品销量展示'
  					},
  					tooltip:{},
  					legend:{
  						data:['销量']
  					},
  					xAxis:{
  						data:[]
  					},
  					yAxis:{},
  					series:[{
  						name:'销量',
  						type:'bar',
  						data:[]
  					}]
  			};
  			myecharts.setOption(option);
  			myecharts.showLoading();
  			var names = [];
  			var nums = [];
  			$.ajax({
  				url:'ProductServlet',
  				type:'post',
  				async:'true',
  				data:{},
  				dataType:'json',
  				success:function(data){
  					for(var i = 0 ; i < data.length ; i++){
  						names.push(data[i].name);
  						nums.push(data[i].num);
  					}
  					myecharts.hideLoading();
  					myecharts.setOption({
  						xAxis:{
  	  						data:names
  	  					},
  	  				series:[{
  						name:'销量',
  						data:nums
  					}]
  					});
  				},
  				error:function(){
  					alert("图表数据加载失败");
  					myecharts.hideLoading();
  				}
  			});
  		</script>
  </body>
</html>

7.测试，结果

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

Rong_Gong

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
jsp中使用echarts简单示例

使用echarts的简单步骤：前言：echarts的使用可以参考官网，本博客只是初级入门。官网教程：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts1. 下载echarts，可到官网上下载echarts。2. 新建一个web project工程。3. ...
复制链接

扫一扫

专栏目录