Un exemple d'utilisation d'echarts pour implémenter des statistiques de rapport dans jsp-PHP开发-php.cn

Un exemple d'utilisation d'echarts pour implémenter des statistiques de rapport dans jsp

高洛峰

Libérer： 2016-12-29 16:06:46

original

1716 Les gens l'ont consulté

echarts est utilisé pour créer un effet d'affichage des rapports de données. Ici, nous allons vous présenter un exemple d'utilisation d'echarts pour implémenter des statistiques de rapport en java/jsp. L'exemple est très simple, il suffit de transférer les données vers echarts.

Commencez à coder.

Tout d'abord, tag, cette chose a été rarement utilisée depuis l'université, mais je ne m'attendais pas à ce qu'elle soit à nouveau utilisée maintenant.

<%@ 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>

Copier après la connexion

Pour écrire des balises, vous devez importer le package jstl, disponible sur Google. Avant la version 1.2, deux packages étaient requis, un jstl et un standard. Après la version 1.2, il semble avoir été fusionné en un seul. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>L'écriture de cette phrase est également un peu différente. Juste au cas où, j'ai introduit deux packages.

Pour utiliser la requête ajax, vous devez introduire le package jquery Lors de l'introduction des echarts, introduisez-le en même temps.

Dans le code ci-dessus, la chose la plus importante est que la section marquée en rouge est un tableau. Lors de l'ajout de plusieurs ensembles de données en arrière-plan, elle doit être parcourue et supprimée.

La page JSP introduit cette balise :

<%--
 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>

Copier après la connexion

La partie front-end est maintenant terminée, et vient ensuite la partie back-end.

Utiliser deux objets java en arrière-plan pour encapsuler les données à transférer

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

Copier après la connexion

Les données spécifiques de la série sont placées ici :

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

Copier après la connexion

En arrière-plan, placez vos propres données dans l'objet, puis convertissez-les au format 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);
  }
}

Copier après la connexion

Pour plus d'exemples de jsp utilisant des echarts pour implémenter des statistiques de rapport et des articles associés, veuillez prêter attention au Site Web chinois PHP !