An example of using echarts to implement report statistics in jsp-PHP开发-php.cn

An example of using echarts to implement report statistics in jsp

高洛峰

Release： 2016-12-29 16:06:46

Original

1727 people have browsed it

echarts is used to create a display effect for data reports. Here we will introduce to you an example of java/jsp using echarts to implement report statistics. The example is very simple, just transfer the data to echarts.

Start coding.

First of all, tag, this thing is hardly used after college, but I didn’t expect to use it again now.

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

Copy after login

To write tags, you need to import the jstl package, which is available on Google. Before 1.2, two packages were required, one jstl and one standard. After 1.2, it seems to be merged into one. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>The writing of this sentence is also a little different. Just in case, I introduced two packages.

When using ajax request, you need to introduce the jquery package. When introducing echarts, introduce this at the same time.

In the above code, the most important thing is the section marked in red. series is an array. When adding multiple sets of data in the background, it needs to be traversed and taken out.

The jsp page introduces this tag:

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

Copy after login

The front-end part is now complete, and then comes the back-end part.

Use two java objects in the background to encapsulate the data to be transmitted

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

Copy after login

Put the specific data of the series here:

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

Copy after login

In the background business, put your own Put the data into the object, and then convert it into json format:

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

Copy after login

For more examples of jsp using echarts to implement report statistics and related articles, please pay attention to the PHP Chinese website!