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

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

开始上代码。

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

"%@"标记页面编码=" UTF-8 " isialignode=" false "正文-内容="空"%% -自定义差异容器id-% % @属性名='容器'必需='true' %% -自定义标题-% % @属性名='标题'必需='true' %% -自定义子标题-% % @属性名='副标题'必需='false' %% -自定义数据请求网址-% % @属性名=“URL”必需=' true ' % % @ taglib前缀=' c ' uri=' http://Java。星期日com/JSP/JSTL/core ' % script src=' http :/echart-2。1 .8/build/dist/jquery。量滴js '/script script src=' http :/echart-2。1 .8/build/dist/echart-all。js '/script脚本类型=' text/JavaScript基于准备好的多姆，初始化echarts图表var myChart=echart。init(文档。getelementbyid(' $ { container } ')；var option={ title : { text : ' $ { title } '，subtext: ' $ { subtitle } ' }，tooltip : { trigger : ' axis ' }，legend: { data:[] }，toolbox: { show : true，feature 3: { mark 333: { show 33333: true }，dataView 33333333366采用创建交互式、快速动态网页应用的网页开发技术异步请求数据$.ajax({ type:'post '，url:'${urls} '，dataType:'json '，success :函数(result){ if(result){//将返回的种类和系列对象赋值给选择对象内的种类和series option.xAxis[0].数据=结果。轴；选项。传奇。数据=结果。传说；var series _ arr=result . series for(var I=0；iseries _ arr.lengthI){ option。数列[I]=结果。系列[I]；}我的图表。hide loading()；myChart.setOption(选项);} }，错误：函数(errMsg){ console。错误(“”加载数据失败') } });//为echarts对象加载数据//myChart.setOption(选项);/script写标签需要引入jstl包，谷歌下就有了。1.2之前需要两个包，一个jstl，一个标准.1.2之后貌似合并为一个了%@ taglib前缀=' c ' uri=' http://Java。星期日com/JSP/jstl/core ' %这句的写法也有点不同。为防万一，我是引入的两个包。

使用创建交互式、快速动态网页应用的网页开发技术请求，需要引入jquery的包，引入echarts的时候，同时引入这个。

在上面代码中，最主要的还是标红的那段，系列是一个数组，后台加入多组数据的时候，这里需要遍历取出。

jsp页面引入该标签:

% -由IntelliJ IDEA创建。用户：管理员日期： 2014/11/24时间： 12:02要更改此模板，请使用文件|设置|文件模板-% % @ page ContentType=' text/html；charset=UTF-8”语言=“Java”% @ taglib前缀=' c ' tagdir='/WEB-INF/tags ' % html head title/title/head body div id=' main ' style=' height : 400 px '/div c :折线图容器='main' title='测试标签副标题='测试子标签URL='/tags '/c :折线图/正文/html前端的部分到此算是完成，然后就是后台部分了。

后台用两个爪哇岛对象，封装一下要传递的数据

包装豆.新闻系列导入Java。乌提尔。ArrayList导入Java。乌提尔。列表；/** *创建者于2014年11月25日*/public class echart { public ListString legend=new ArrayListString()；//数据分组公共列表字符串坐标轴=new ArraylistString()；//横坐标公共列表系列系列=新的ArrayList系列()；//纵坐标public echart(ListString legendList、ListString categoryList、listsseries series list){ super()；这个。legendListthis . axis=categorylistthis . series=series list } }这里放系列的具体数据：

包装豆.新闻系列导入Java。乌提尔。列表；/** *创建者于2014年11月25日*/public class Series { public String name；公共字符串类型；公共列表整数数据；公共序列（字符串名称、字符串类型、列表整数数据){ this . name=name this . type=type this . data=数据；}}后台业务中，将自己的数据，放到对象中，然后转换成json格式：

打包tagservletimport bean。新闻系列。echart导入比恩。新闻系列。系列；导入com。fasterxml。杰克逊。数据绑定。对象映射器；导入javax。servlet。servletexception导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse导入Java。io。ioexception导入Java。io。版画作家；导入Java。乌提尔。ArrayList导入Java。乌提尔。数组；导入Java。乌提尔。列表；/** *创建者于2014年11月24日*/public class NewTagServlet扩展HttpServlet {受保护的void doPost(HttpServletrequest请求，HttpServletResponse响应)引发ServletException，IOException { ListString legend=new ArrayListString(数组。aslist(新字符串[]{ '最高值','最低值'}));列表字符串轴=新数组列表字符串(Arrays.asList(新字符串[]{ '周一','周二','周三','周四','周五','周六','周日'}));list系列系列=新的ArrayList系列()；系列。添加（新系列('最高值，'行'，新的arraylistegeer(数组。aslist(21，23，28，26，21，33，44)))；系列。添加（新系列('最低值，' line '，新的arraylistegeer(数组。aslist(-2，-12，10，0，20，11，-6))；Echarts echarts=new Echarts(图例、轴、系列);对象映射器对象映射器=新对象映射器()；系统。出去。println(objectmapper。writevalueasstring(echart))；回应。setcontenttype(' text/html；charset=utf-8 ')；PrintWriter out=响应。getwriter()；出去。println(objectmapper。writevalueasstring(echart))；出去。flush()；出去。close()；}受保护的void doGet(HttpServletRequest请求，HttpServletResponse响应)引发ServletException，IOException { this.doPost(请求，响应);}}效果图如下：