本人 在 项目中自己 总结的 步骤
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 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文件 如下图
项目运行后 效果 如图:
欢迎大神指导！！！
1959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
