jsp利用echarts实现报表统计的实例

程序员文章站 2023-11-21 17:42:58

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=">这句的写法也有点不同。为防万一，我是引入的两个包。

使用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);
  }
}

效果图如下：

jsp利用echarts实现报表统计的实例

上一篇：简单实现python爬虫功能

下一篇： jsp页面验证码demo

jsp利用echarts实现报表统计的实例