echart를 사용하여 jsp에서 보고서 통계를 구현하는 예-PHP开发-php.cn

echart를 사용하여 jsp에서 보고서 통계를 구현하는 예

高洛峰

풀어 주다： 2016-12-29 16:06:46

원래의

1705명이 탐색했습니다.

echarts는 데이터 보고서의 표시 효과를 만드는 데 사용됩니다. 여기서는 echarts를 사용하여 java/jsp에서 보고서 통계를 구현하는 예를 소개합니다. 예는 매우 간단합니다. 데이터를 echarts로 전송하기만 하면 됩니다.

코딩을 시작해 보세요.

우선 태그, 이런게 대학때부터 거의 안 쓰였는데, 지금 다시 쓰게 될 줄은 몰랐네요.

<%@ 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(&#39;${container}&#39;));
  var option={
    title : {
      text: &#39;${title}&#39;,
      subtext: &#39;${subtitle}&#39;
    },
    tooltip : {
      trigger: &#39;axis&#39;
    },
    legend: {
      data:[]
    },
    toolbox: {
      show : true,
      feature : {
        mark : {show: true},
        dataView : {show: true, readOnly: false},
        magicType : {show: true, type: [&#39;line&#39;, &#39;bar&#39;]},
        restore : {show: true},
        saveAsImage : {show: true}
      }
    },
    calculable : true,
    xAxis : [
      {
        type : &#39;category&#39;,
        boundaryGap : false,
        data : []
      }
    ],
    yAxis : [
      {
        type : &#39;value&#39;,
        axisLabel : {
          formatter: &#39;{value} &#39;
        }
      }
    ],
    series : []
  };
  //采用ajax异步请求数据
  $.ajax({
    type:&#39;post&#39;,
    url:&#39;${urls}&#39;,
      dataType:&#39;json&#39;,
      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>

로그인 후 복사

태그를 작성하려면 Google에서 제공되는 jstl 패키지를 가져와야 합니다. 1.2 이전에는 jstl 하나와 표준 하나, 두 개의 패키지가 필요했습니다. 1.2 이후에는 하나로 합쳐진 것 같습니다. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>이 문장의 쓰기도 조금 다릅니다. 만일을 대비해 두 가지 패키지를 소개했습니다.

ajax 요청을 사용하려면 echarts 도입 시 jquery 패키지도 함께 도입해야 합니다.

위 코드에서 가장 중요한 것은 빨간색으로 표시된 부분이 배열이라는 점입니다. 백그라운드에서 여러 세트의 데이터를 추가할 때 이를 순회하여 제거해야 합니다.

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

로그인 후 복사

시리즈의 특정 데이터는 여기에 배치됩니다:

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

로그인 후 복사

보고서 통계 및 관련 기사를 구현하기 위해 echart를 사용하는 jsp의 더 많은 예를 보려면 다음을 참고하세요. PHP 중국어 웹사이트!