java/jsp利用echarts实现报表统计的例子
更新时间：2015-11-18 15:51:00 作者：佚名 
我要评论(0)
echarts用来做数据报表的一个展示效果了，这里我们来给各位介绍一个java/jsp利用echarts实现报表统计的例子，例子非常的简单只是把数据调出来给echarts即可了。开始上代码。
echarts用来做数据报表的一个展示效果了，这里我们来给各位介绍一个java/jsp利用echarts实现报表统计的例子，例子非常的简单只是把数据调出来给echarts即可了。
开始上代码。
首先是tag，这个东西，大学之后，几乎不怎么用了，没想到现在又用到了。
<%@ tag pageEncoding="UTF-8" isELIgnored="false" body-content="empty"%>
<%--自定义div容器id--%>
<%@attribute name="container" required="true" %>
<%--自定义标题--%>
<%@attribute name="title" required="true" %>
<%--自定义子标题--%>
<%@attribute name="subtitle" required="false" %>
<%--自定义数据请求url--%>
<%@attribute name="urls" required="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script src="/echarts-2.1.8/build/dist/jquery.min.js"></script>
<script src="/echarts-2.1.8/build/dist/echarts-all.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('${container}'));
var option={
title : {
text: '${title}',
subtext: '${subtitle}'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:[]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : []
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} '
}
}
],
series : []
};
//采用ajax异步请求数据
$.ajax({
type:'post',
url:'${urls}',
dataType:'json',
success:function(result){
if(result){
//将返回的category和series对象赋值给options对象内的category和series
option.xAxis[0].data = result.axis;
option.legend.data = result.legend;
var series_arr=result.series;
for(var i=0;i<series_arr.length;i++){
option.series[i] = result.series[i];
}
myChart.hideLoading();
myChart.setOption(option);
}
},
error:function(errMsg){
console.error("加载数据失败")
}
});
// 为echarts对象加载数据
// myChart.setOption(option);
</script>写tag需要引入jstl包，谷歌下就有了。1.2之前需要两个包，一个jstl，一个standard。1.2之后貌似合并为一个了。<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>这句的写法也有点不同。为防万一，我是引入的两个包。
使用ajax请求，需要引入jquery的包，引入echarts的时候，同时引入这个。
在上面代码中，最主要的还是标红的那段，series是一个数组，后台加入多组数据的时候，这里需要遍历取出。
jsp页面引入该标签：
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2014/11/24 Time: 12:02 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib prefix="c" tagdir="/WEB-INF/tags" %> <html> <head> <title></title> </head> <body> <div id="main" style="height: 400px"></div> <c:linecharts container="main" title="测试标签" subtitle="测试子标签" urls="/tags"></c:linecharts> </body> </html>
前端的部分到此算是完成，然后就是后台部分了。
后台用两个java对象，封装一下要传递的数据
package bean.newseries;
import java.util.ArrayList;
import java.util.List;
/**
* Created by on 2014/11/25.
*/
public class Echarts {
public List<String> legend = new ArrayList<String>();//数据分组
public List<String> axis = new ArrayList<String>();//横坐标
public List<Series> series = new ArrayList<Series>();//纵坐标
public Echarts(List<String> legendList, List<String> categoryList, List<Series> seriesList) {
super();
this.legend = legendList;
this.axis = categoryList;
this.series = seriesList;
}
}这里放series的具体数据：
package bean.newseries;
import java.util.List;
/**
* Created by on 2014/11/25.
*/
public class Series {
public String name;
public String type;
public List<Integer> data;
public Series(String name, String type, List<Integer> data) {
this.name = name;
this.type = type;
this.data = data;
}
}后台业务中，将自己的数据，放到对象中，然后转换成json格式：
package tagservlet;
import bean.newseries.Echarts;
import bean.newseries.Series;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
/**
* Created by on 2014/11/24.
*/
public class NewTagServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<String> legend=new ArrayList<String>(Arrays.asList(new String[]{"最高值","最低值"}));
List<String> axis=new ArrayList<String>(Arrays.asList(new String[]{"周一","周二","周三","周四","周五","周六","周日"}));
List<Series> series=new ArrayList<Series>();
series.add(new Series("最高值","line",new ArrayList<Integer>(Arrays.asList(21,23,28,26,21,33,44))));
series.add(new Series("最低值","line",new ArrayList<Integer>(Arrays.asList(-2,-12,10,0,20,11,-6))));
Echarts echarts=new Echarts(legend,axis,series);
ObjectMapper objectMapper=new ObjectMapper();
System.out.println(objectMapper.writeValueAsString(echarts));
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
out.println(objectMapper.writeValueAsString(echarts));
out.flush();
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}这个里面，用jackson将对象转为json格式字符串，输出到页面即可。
自此，图表就可以顺利生成了。
您可能感兴趣的文章:
相关文章
静态服务器 使用node搭建一个可在任何目录下通过命令启动的一个简单http静态服务器 完整代码链接 安装：npm install yg-server -g 启动：yg-server2019-02-06- 一、前言 The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance. DllPlu2019-02-06
- 简单的 TodoList 实现一个简单的 todolist，当我输入内容后，点击提交自动添加在下面，如下图所示： 用代码实现这个效果： <div id="app"> <input ty2019-02-06
- 在照着Tensorflow官网的demo敲了一遍分类器项目的代码后，运行倒是成功了，结果也不错。但是最终还是要训练自己的数据，所以尝试准备加载自定义的数据，然而d2019-02-06
- ES6 通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用，并通过解构简化对象的数据提取过程。 一、字面量语法扩展 在 ES6 模式下使用字2019-02-06
- 前言 最近由于流量增大，redis 出现了一连串错误，比如： LOADING Redis is loading the dataset in memory use of closed network connection connec2019-02-06
- 使用TensorFlow构建一个神经网络来实现二分类，主要包括输入数据格式、隐藏层数的定义、损失函数的选择、优化函数的选择、输出层。下面通过numpy来随机生成一2019-02-06
- 字符串的大小写转换功能在日常中经常使用。那么如何实现一个简单的大小写转换功能呢? 在php中，最终使用的是c语言的toupper,tolower函数将字符进行大小写2019-02-06
- 前言 开发网关项目时，在请求时往请求头header中放入了签名sign_key信息，在接收请求时再从header中拿出，在本地调试时是可以的，但上线之后通过Nginx代理之后2019-02-06
- __import__函数 我们都知道import是导入模块的，但是其实import实际上是使用builtin函数import来工作的。在一些程序中，我们可以动态去调用函数，如果我们2019-02-06
最新评论