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;}@Overridepublic 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

jsp中使用echarts简单示例相关推荐

ajax地址为jsp,AJAX_在jsp中运用ajax(简单入门)，由于ajax为我们带来太多的好处 - phpStudy...
在jsp中运用ajax(简单入门) 由于ajax为我们带来太多的好处,所以在很多应用中我们都会优先选择这种技术,于是我也为之所吸引,现跟大家分享下一个简单的入门例子. regist.jsp文件:一个简 ...
Angular 项目中使用 ECharts 图表示例
最近项目需要用到echarts图表,但网上关于结合angular使用不多,而且总是导入报错,关于我用的版本做一个总结: (angular v6.0.9,echarts v4.1.0,@types/ec ...
C ++中线程的简单示例
有人可以发布一个简单的示例来说明如何在C ++中启动两个(面向对象)线程. 我正在寻找可以扩展运行方法(或类似方法)的实际C ++线程对象,而不是调用C样式线程库. 我遗漏了任何特定于OS的请求,希望 ...
在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码我们这里写的都是些死的数 ...
命令行运行vbs脚本并传参数给vbs中的变量简单示例
详细了解脚本请参考:脚本学习及应用分享 - 批处理和脚本的交互简单代码示例: CommandLine: path\cscript.exe xxx.vbs helloworld VBSCode ...
JSP中session的简单应用——以购物车为例
题目编写两个页面,一个显示一些历史图书的名称和价格,一个显示一些计算机书名的名称和价格.每本书后面都有一个链接--购买,单击该链接,能够将该书本加到购物车:每个页面上都有链接,单击该链接,将该图书从 ...
java项目如何分工合作,JavaWeb基础 jsp+servlet分工合作的简单示例
礼悟: 好好学习合思考,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼强身心,诚劝且行且珍惜. javaEE:7 javaSE:1.8 JSTL:1.2.2 ...
C#中汉字排序简单示例（拼音/笔划）
可以按照区域语言修改排序规则. class Program{static void Main(string[] args){string[] arr = { "趙(ZHAO)", ...
sql server中case的简单示例
select *, case when resultrate>0 then case --<<case嵌套 ...
jsp servlet示例_Servlet和JSP中的文件上传示例
jsp servlet示例使用Servlet和JSP将文件上传到服务器是Java Web应用程序中的常见任务. 在对Servlet或JSP进行编码以处理文件上传请求之前,您需要了解一点有关HTML和 ...

jsp中使用echarts简单示例

jsp中使用echarts简单示例相关推荐

最新文章

热门文章