php报表页面示例,jsp利用echarts实现报表统计的实例

echarts用来做数据报表的一个展示效果了，这里我们来给各位介绍一个java/jsp利用echarts实现报表统计的例子，例子非常的简单只是把数据调出来给echarts即可了。

开始上代码。

首先是tag，这个东西，大学之后，几乎不怎么用了，没想到现在又用到了。

// 基于准备好的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

option.series[i] = result.series[i];

}

myChart.hideLoading();

myChart.setOption(option);

}

},

error:function(errMsg){

console.error("加载数据失败")

}

});

// 为echarts对象加载数据

// myChart.setOption(option);

写tag需要引入jstl包，谷歌下就有了。1.2之前需要两个包，一个jstl，一个standard。1.2之后貌似合并为一个了。这句的写法也有点不同。为防万一，我是引入的两个包。

使用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.

--%>

前端的部分到此算是完成，然后就是后台部分了。

后台用两个java对象，封装一下要传递的数据package bean.newseries;

import java.util.ArrayList;

import java.util.List;

/**

* Created by on 2014/11/25.

*/

public class Echarts {

public List legend = new ArrayList();//数据分组

public List axis = new ArrayList();//横坐标

public List series = new ArrayList();//纵坐标

public Echarts(List legendList, List categoryList, List 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 data;

public Series(String name, String type, List 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 legend=new ArrayList(Arrays.asList(new String[]{"最高值","最低值"}));

List axis=new ArrayList(Arrays.asList(new String[]{"周一","周二","周三","周四","周五","周六","周日"}));

List series=new ArrayList();

series.add(new Series("最高值","line",new ArrayList(Arrays.asList(21,23,28,26,21,33,44))));

series.add(new Series("最低值","line",new ArrayList(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实现报表统计的实例相关文章请关注PHP中文网！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！