本人 在 项目中自己 总结的 步骤
Jsp页面 代码
<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/webpage/include/taglib.jsp"%> <%@ include file="/webpage/include/echarts.jsp"%> <html> <head> <title>员工投入状况管理</title> <meta name="decorator" content="default"/> <script type="text/javascript"> $(document).ready(function() { laydate({ elem: '#month', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class' event: 'focus', //响应事件。如果没有传入event，则按照默认的click format:'YYYY-MM' }); }); </script> </head> <div class="tabs-container"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">折线统计图</a></li> <li class="active"><a data-toggle="tab" href="#tab-2" aria-expanded="true">柱状统计图</a></li> <li class="active"><a data-toggle="tab" href="#tab-3" aria-expanded="true">饼状统计图</a></li> <li class=""><a data-toggle="tab" href="#tab-4" aria-expanded="false">数据列表</a></li> </ul> <div class="tab-content"> <div id="tab-1" class="tab-pane active"> <div class="panel-body"> <div style="height:100px"></div> <div id="line_normal1" class="main000"></div> <echarts:line id="line_normal1" title="职员投入状况折线图" subtitle="各年度每月的职员投入" xAxisData="${xAxisData}" yAxisData="${yAxisData}" xAxisName="统计月份" yAxisName="当月职员人数投入(个)" /> </div> </div> <div id="tab-2" class="tab-pane active"> <div class="panel-body"> <div style="height:100px"></div> <div id="line_normal2" class="main000"></div> <echarts:bar id="line_normal2" title="职员投入状况柱状图" subtitle="职员投入状况柱状图" xAxisData="${xAxisData}" yAxisData="${yAxisData}" xAxisName="时间" yAxisName="投入人数（个）" /> </div> </div> <div id="tab-3" class="tab-pane active"> <div class="panel-body"> <div style="height:100px"></div> <div id="pie" class="main000"></div> <echarts:pie id="pie" title="职员归属类别" subtitle="当前年度投入人次" orientData="${orientData}"/> </div> </div> <div id="tab-4" class="tab-pane"> <div class="panel-body"> <div class="wrapper wrapper-content"> <div class="ibox"> <div class="ibox-title"> <h5>职员投入状况数据列表 </h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#">选项1</a> </li> <li><a href="#">选项2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content"> <sys:message content="${message}"/>JSP页面 引用的echarts.jsp
主要用来 引用 js文件 和定义样式
<%@ page contentType="text/html;charset=UTF-8" %> <script src="${ctxStatic}/echarts-2.2.7/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths : { echarts : '${ctxStatic}/echarts-2.2.7/build/dist' } }); </script> <style type="text/css"> .main000 { height: 360px; /*width: 778px !important;*/ overflow: hidden; padding : 10px; margin-bottom: 10px; border: 1px solid #e3e3e3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } </style>taglib.jsp用来 引用标签 <%@ taglib prefix="shiro" uri="/WEB-INF/tlds/shiros.tld" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> <%@ taglib prefix="echarts" uri="/WEB-INF/tlds/echarts.tld" %> <%@ taglib prefix="sys" tagdir="/WEB-INF/tags/sys" %> <%@ taglib prefix="table" tagdir="/WEB-INF/tags/table" %> <%@ taglib prefix="t" uri="/menu-tags"%> <c:set var="ctx" value="${pageContext.request.contextPath}${fns:getAdminPath()}"/> <c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/> echarts.tld标签如下: <?xml version="1.0" encoding="UTF-8" ?> <taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance http://www.springmodules.org/schema/cache/springmodules-cache.xsd " xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd http://www.springmodules.org/schema/cache/springmodules-ehcache.xsd " version="2.0"> <description>ECharts图表</description> <tlib-version>1.1</tlib-version> <short-name>echarts</short-name> <uri>/echarts</uri> <tag> <name>line</name> <tag-class>com.jeeplus.common.tag.echarts.EChartsLineTag</tag-class> <body-content>scriptless</body-content> <attribute> <name>id</name> <description>与div里面的id相同</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>title</name> <description>图表的标题</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>subtitle</name> <description>图表的副标题</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>xAxisName</name> <description>X轴的名称</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>yAxisName</name> <description>Y轴的名称</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>xAxisData</name> <description>X轴的数据</description> <required>true</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> <attribute> <name>yAxisData</name> <description>Y轴的数据</description> <required>true</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> <attribute> <name>yAxisIndex</name> <description>图表中的数据对应的Y轴</description> <required>false</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> </tag> <tag> <name>lineDoubleNum</name> <tag-class>com.jeeplus.common.tag.echarts.EChartsLineDoubleNumTag</tag-class> <body-content>scriptless</body-content> <attribute> <name>id</name> <description>与div里面的id相同</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>title</name> <description>图表的标题</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>subtitle</name> <description>图表的副标题</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>xAxisName</name> <description>X轴的名称</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>yAxisName</name> <description>Y轴的名称</description> <required>false</required> <rtexprvalue >true</rtexprvalue> </attribute> <attribute> <name>axisDataArr</name> <description>Y轴的数据</description> <required>true</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> <attribute> <name>yAxisIndex</name> <description>图表中的数据对应的Y轴</description> <required>false</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> </tag> <tag> <name>lineTimeLine</name> <tag-class>com.jeeplus.common.tag.echarts.EChartsLineTimeLineTag</tag-class> <body-content>scriptless</body-content> <attribute> <name>id</name> <description>与div里面的id相同</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>title</name> <description>图表的标题</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>subtitle</name> <description>图表的副标题</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>xAxisName</name> <description>X轴的名称</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>yAxisName</name> <description>Y轴的名称</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>xAxisData</name> <description>X轴的数据</description> <required>true</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> <attribute> <name>yAxisData</name> <description>Y轴的数据</description> <required>true</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> <attribute> <name>yAxisIndex</name> <description>图表中的数据对应的Y轴</description> <required>false</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> <attribute> <name>timelineData</name> <description>时间轴的名称</description> <required>true</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> <attribute> <name>timelineAxisData</name> <description>时间轴的数据</description> <required>true</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> </tag> <tag> <name>bar</name> <tag-class>com.jeeplus.common.tag.echarts.EChartsBarTag</tag-class> <body-content>scriptless</body-content> <attribute> <name>id</name> <description>与div里面的id相同</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>title</name> <description>图表的标题</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>subtitle</name> <description>图表的副标题</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>xAxisName</name> <description>X轴的名称</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>yAxisName</name> <description>Y轴的名称</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>xAxisData</name> <description>X轴的数据</description> <required>true</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> <attribute> <name>yAxisData</name> <description>Y轴的数据</description> <required>true</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> <attribute> <name>yAxisIndex</name> <description>图表中的数据对应的Y轴</description> <required>false</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> </tag> <tag> <name>pie</name> <tag-class>com.jeeplus.common.tag.echarts.EChartsPieTag</tag-class> <body-content>scriptless</body-content> <attribute> <name>id</name> <description>与div里面的id相同</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>title</name> <description>图表的标题</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>subtitle</name> <description>图表的副标题</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>orientData</name> <description>图表的数据</description> <required>true</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> </tag> <tag> <name>radar</name> <tag-class>com.jeeplus.common.tag.echarts.EChartsRadarTag</tag-class> <body-content>scriptless</body-content> <attribute> <name>id</name> <description>与div里面的id相同</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>title</name> <description>图表的标题</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>subtitle</name> <description>图表的副标题</description> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>polarType</name> <description>玫瑰图方位：8、16</description> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>orientData</name> <description>图表的数据</description> <required>true</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> </tag> </taglib>
自定义标签的实现类
用来解析 数据 生成 折线图 或者 饼图 柱状图
package com.jeeplus.common.tag.echarts; import java.io.IOException; import java.util.List; import java.util.Map; import javax.servlet.jsp.JspException; import javax.servlet.jsp.tagext.BodyTag; import javax.servlet.jsp.tagext.BodyTagSupport; import javax.servlet.jsp.tagext.Tag; import com.github.abel533.echarts.axis.CategoryAxis; import com.github.abel533.echarts.axis.ValueAxis; import com.github.abel533.echarts.code.AxisType; import com.github.abel533.echarts.code.SeriesType; import com.github.abel533.echarts.code.Symbol; import com.github.abel533.echarts.code.Tool; import com.github.abel533.echarts.code.Trigger; import com.github.abel533.echarts.json.GsonOption; import com.github.abel533.echarts.series.Line; public class EChartsBarTag extends BodyTagSupport { private static final long serialVersionUID = 1L; private String id; private String title; private String subtitle; private String xAxisName; private String yAxisName; private List<String> xAxisData; private Map<String, Integer> yAxisIndex; private Map<String, List<Double>> yAxisData; @Override public int doStartTag() throws JspException { return BodyTag.EVAL_BODY_BUFFERED; } @Override public int doEndTag() throws JspException { StringBuffer sb = new StringBuffer(); sb.append("<script type='text/javascript'>"); sb.append("require([ 'echarts', 'echarts/chart/bar'], function(ec) {"); sb.append("var myChart= ec.init(document.getElementById('" + id+ "'));"); // 创建GsonOption对象，即为json字符串 GsonOption option = new GsonOption(); option.tooltip().trigger(Trigger.axis); option.title(title, subtitle); // 工具栏 option.toolbox().show(true).feature( // Tool.mark, // Tool.dataView, Tool.saveAsImage, // new MagicType(Magic.line, Magic.bar,Magic.stack,Magic.tiled), Tool.dataZoom, Tool.restore); option.calculable(true); option.dataZoom().show(true).realtime(true).start(0).end(100); // X轴数据封装并解析 ValueAxis valueAxis = new ValueAxis(); for (String s : xAxisData) { valueAxis.type(AxisType.category).data(s); } // X轴单位 valueAxis.name(xAxisName); option.xAxis(valueAxis); for (String key : yAxisData.keySet()) { option.legend().data(key); } // Y轴数据封装并解析 String[] unitNameArray = yAxisName.split(","); for (String s : unitNameArray) { CategoryAxis categoryAxis = new CategoryAxis(); categoryAxis.type(AxisType.value); option.yAxis(categoryAxis.name(s)); } int i = 0; for (String key : yAxisData.keySet()) { // 遍历list得到数据 List<Double> list = yAxisData.get(key); Line line = new Line().name(key); for (Double d : list) { // KW与MW单位的转换 // if(settingGlobal!=null&&settingGlobal.getIskw()==0){ // d = d/1000; // } // 数据为空的话会报错，为空则为零 if (d != null) { line.type(SeriesType.bar).data(d); } else { line.type(SeriesType.bar).data(0); } if (yAxisIndex != null && yAxisIndex.get(key) != null) { line.type(SeriesType.bar).yAxisIndex(yAxisIndex.get(key)); line.symbol(Symbol.none); } else { line.type(SeriesType.bar).yAxisIndex(0); line.symbol(Symbol.none); } } option.series(line); i++; } sb.append("var option=" + option.toString() + ";"); sb.append("myChart.setOption(option);"); sb.append("});"); sb.append("</script>"); try { this.pageContext.getOut().write(sb.toString()); } catch (IOException e) { System.err.print(e); } return Tag.EVAL_PAGE;// 继续处理页面 } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getSubtitle() { return subtitle; } public void setSubtitle(String subtitle) { this.subtitle = subtitle; } public String getxAxisName() { return xAxisName; } public void setxAxisName(String xAxisName) { this.xAxisName = xAxisName; } public String getyAxisName() { return yAxisName; } public void setyAxisName(String yAxisName) { this.yAxisName = yAxisName; } public List<String> getxAxisData() { return xAxisData; } public void setxAxisData(List<String> xAxisData) { this.xAxisData = xAxisData; } public Map<String, Integer> getyAxisIndex() { return yAxisIndex; } public void setyAxisIndex(Map<String, Integer> yAxisIndex) { this.yAxisIndex = yAxisIndex; } public Map<String, List<Double>> getyAxisData() { return yAxisData; } public void setyAxisData(Map<String, List<Double>> yAxisData) { this.yAxisData = yAxisData; } } package com.jeeplus.common.tag.echarts; import java.io.IOException; import java.util.List; import java.util.Map; import javax.servlet.jsp.JspException; import javax.servlet.jsp.tagext.BodyTag; import javax.servlet.jsp.tagext.BodyTagSupport; import javax.servlet.jsp.tagext.Tag; import com.github.abel533.echarts.axis.CategoryAxis; import com.github.abel533.echarts.axis.ValueAxis; import com.github.abel533.echarts.code.AxisType; import com.github.abel533.echarts.code.SeriesType; import com.github.abel533.echarts.code.Symbol; import com.github.abel533.echarts.code.Tool; import com.github.abel533.echarts.code.Trigger; import com.github.abel533.echarts.json.GsonOption; import com.github.abel533.echarts.series.Line; public class EChartsLineTag extends BodyTagSupport { private static final long serialVersionUID = 1L; private String id ; private String title; private String subtitle; private String xAxisName; private String yAxisName; private List<String> xAxisData; private Map<String, Integer> yAxisIndex; private Map<String, List<Double>> yAxisData; @Override public int doStartTag() throws JspException { return BodyTag.EVAL_BODY_BUFFERED; } @Override public int doEndTag() throws JspException { StringBuffer sb = new StringBuffer(); sb.append("<script type='text/javascript'>"); sb.append("require([ 'echarts', 'echarts/chart/line'], function(ec) {"); sb.append("var myChart= ec.init(document.getElementById('"+id+"'));"); // 创建GsonOption对象，即为json字符串 GsonOption option = new GsonOption(); option.tooltip().trigger(Trigger.axis); option.title(title, subtitle); // 工具栏 option.toolbox().show(true).feature( // Tool.mark, // Tool.dataView, Tool.saveAsImage, // new MagicType(Magic.line, Magic.bar,Magic.stack,Magic.tiled), Tool.dataZoom, Tool.restore); option.calculable(true); option.dataZoom().show(true).realtime(true).start(0).end(100); // X轴数据封装并解析 ValueAxis valueAxis = new ValueAxis(); for (String s : xAxisData) { valueAxis.type(AxisType.category).data(s); } // X轴单位 valueAxis.name(xAxisName); option.xAxis(valueAxis); for (String key : yAxisData.keySet()) { option.legend().data(key); } // Y轴数据封装并解析 String[] unitNameArray = yAxisName.split(","); for (String s : unitNameArray) { CategoryAxis categoryAxis = new CategoryAxis(); categoryAxis.type(AxisType.value); option.yAxis(categoryAxis.name(s)); } int i = 0; for (String key : yAxisData.keySet()) { // 遍历list得到数据 List<Double> list = yAxisData.get(key); Line line = new Line().name(key); for (Double d : list) { // KW与MW单位的转换 // if(settingGlobal!=null&&settingGlobal.getIskw()==0){ // d = d/1000; // } // 数据为空的话会报错，为空则为零 if (d != null) { line.type(SeriesType.line).data(d); } else { line.type(SeriesType.line).data(0); } if (yAxisIndex != null && yAxisIndex.get(key) != null) { line.type(SeriesType.line).yAxisIndex(yAxisIndex.get(key)); line.symbol(Symbol.none); } else { line.type(SeriesType.line).yAxisIndex(0); //显示直线，而不是密密麻麻的点，一点都不好看 line.symbol(Symbol.none); } } option.series(line); i++; } sb.append("var option="+option.toString()+";"); sb.append("myChart.setOption(option);"); sb.append("});"); sb.append("</script>"); try { this.pageContext.getOut().write(sb.toString()); } catch (IOException e) { System.err.print(e); } return Tag.EVAL_PAGE;// 继续处理页面 } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getSubtitle() { return subtitle; } public void setSubtitle(String subtitle) { this.subtitle = subtitle; } public String getxAxisName() { return xAxisName; } public void setxAxisName(String xAxisName) { this.xAxisName = xAxisName; } public String getyAxisName() { return yAxisName; } public void setyAxisName(String yAxisName) { this.yAxisName = yAxisName; } public List<String> getxAxisData() { return xAxisData; } public void setxAxisData(List<String> xAxisData) { this.xAxisData = xAxisData; } public Map<String, Integer> getyAxisIndex() { return yAxisIndex; } public void setyAxisIndex(Map<String, Integer> yAxisIndex) { this.yAxisIndex = yAxisIndex; } public Map<String, List<Double>> getyAxisData() { return yAxisData; } public void setyAxisData(Map<String, List<Double>> yAxisData) { this.yAxisData = yAxisData; } } package com.jeeplus.common.tag.echarts; import java.io.IOException; import java.util.Map; import javax.servlet.jsp.JspException; import javax.servlet.jsp.tagext.BodyTag; import javax.servlet.jsp.tagext.BodyTagSupport; import javax.servlet.jsp.tagext.Tag; import com.github.abel533.echarts.code.Orient; import com.github.abel533.echarts.code.SeriesType; import com.github.abel533.echarts.code.Tool; import com.github.abel533.echarts.code.Trigger; import com.github.abel533.echarts.code.X; import com.github.abel533.echarts.code.Y; import com.github.abel533.echarts.data.Data; import com.github.abel533.echarts.json.GsonOption; import com.github.abel533.echarts.series.Line; public class EChartsPieTag extends BodyTagSupport { private static final long serialVersionUID = 1L; private String id; private String title; private String subtitle; private Map<String, Object> orientData; @Override public int doStartTag() throws JspException { return BodyTag.EVAL_BODY_BUFFERED; } @Override public int doEndTag() throws JspException { StringBuffer sb = new StringBuffer(); sb.append("<script type='text/javascript'>"); sb.append("require([ 'echarts', 'echarts/chart/pie'], function(ec) {"); sb.append("var myChart= ec.init(document.getElementById('" + id+ "'));"); // 创建GsonOption对象，即为json字符串 GsonOption option = new GsonOption(); option.tooltip().trigger(Trigger.item).formatter("{a} <br/>{b} : {c} ({d}%)"); option.title(title, subtitle); // 工具栏 option.toolbox().show(true).feature( // Tool.mark, // Tool.dataView, Tool.saveAsImage // new MagicType(Magic.line, Magic.bar,Magic.stack,Magic.tiled), // Tool.dataZoom, Tool.restore ); option.calculable(true); // 数据轴封装并解析 for(String xdata : orientData.keySet()) { option.legend().orient(Orient.horizontal).x(X.left).y(Y.bottom).data(xdata); } if (orientData != null) { Line line = new Line(); line.name(title).type(SeriesType.pie); for (String title : orientData.keySet()) { Object value = orientData.get(title); Data data = new Data().name(title); data.value(value); line.data(data); } option.series(line); } sb.append("var option=" + option.toString() + ";"); sb.append("myChart.setOption(option);"); sb.append("});"); sb.append("</script>"); try { this.pageContext.getOut().write(sb.toString()); } catch (IOException e) { System.err.print(e); } return Tag.EVAL_PAGE;// 继续处理页面 } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getSubtitle() { return subtitle; } public void setSubtitle(String subtitle) { this.subtitle = subtitle; } public Map<String, Object> getOrientData() { return orientData; } public void setOrientData(Map<String, Object> orientData) { this.orientData = orientData; } } 最后 还有 提供数据库数据 的controller @RequiresPermissions("echarts:memPutInto:list") @RequestMapping(value = {"list", ""}) public String list(MemPutInto memPutInto, HttpServletRequest request, HttpServletResponse response, Model model) { Page<MemPutInto> page = memPutIntoService.findPage(new Page<MemPutInto>(request, response), memPutInto); model.addAttribute("page", page); //折线图 柱状图列表数据 //X轴的数据 List<String> xAxisData= new ArrayList<String>(); //Y轴的数据 Map<String,List<Double>> yAxisData = new HashMap<String,List<Double>>(); List<MemPutInto> memPutIntolist= memPutIntoService.findList(memPutInto); List<Double> memberNum = new ArrayList<Double>(); List<Double> togetherMemberNum = new ArrayList<Double>(); List<Double> totalNum = new ArrayList<Double>(); for(MemPutInto memPutIntoDataBeanTemp:memPutIntolist){ //x轴数据 月份 xAxisData.add(memPutIntoDataBeanTemp.getMonth().toLocaleString()); //社员人数 memberNum.add(Double.parseDouble(memPutIntoDataBeanTemp.getMemberNum().toString())); //协力人数 togetherMemberNum.add(Double.parseDouble(memPutIntoDataBeanTemp.getTogetherMemberNum().toString())); //人数 总计 totalNum.add(Double.parseDouble(memPutIntoDataBeanTemp.getTotalNum().toString())); } //y轴数据 yAxisData.put("社员 人数", memberNum); yAxisData.put("协力 人数", togetherMemberNum); yAxisData.put("人数 总计 ", totalNum); //生成折线图 和 柱状图 都是 这两个 数据 request.setAttribute("xAxisData", xAxisData); request.setAttribute("yAxisData", yAxisData); //生成饼状图报表数据 //计算社员总人数 Double totalMem = 0D; for(Double member:memberNum){ totalMem=totalMem+member; } //计算协力总人数 Double totalTogether=0D; for(Double together:togetherMemberNum){ totalTogether=totalTogether+together; } //计算总人数 Double total=0D; for(Double totalAll:totalNum){ total=total+totalAll; } Map<String,Object> orientData = new HashMap<String,Object>(); orientData.put("社员总人数", totalMem); orientData.put("协力总人数", totalTogether); orientData.put("总计人数", total); request.setAttribute("orientData", orientData); // model.addAttribute("orientData", orientData);也可以 return "modules/echarts/memPutIntoList"; }
需要用到的jar包 可能有 ECharts-2.2.7.jar等等
需要的静态页面和 js文件 如下图
项目运行后 效果 如图:
欢迎大神指导！！！
