echarts图表之在Layui列表下添加echarts图表
东方吕恭
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<title>活动统计</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="${contextPath}/p2029/resource/images/favicon.ico">
<link rel="stylesheet" href="${contextPath}/external/layui/css/layui.css" media="all">
<link rel="stylesheet" href="${contextPath}/resource/css/layui-dreamweb.css">
<link rel="stylesheet" href="${contextPath}/resource/css/layui-list.css" media="all">
<link rel="stylesheet" href="${contextPath}/resource/css/layui-list-${portal_skin}.css" media="all">
<link rel="stylesheet" href="${contextPath}/external/menu-font/iconfont.css">
<link rel="stylesheet" href="${contextPath}/resource/css/layui-card.css" media="all">
<link rel="stylesheet" href="${contextPath}/resource/css/layui-card-blue.css" media="all">
<script type="text/javascript" src="${contextPath}/external/jquery-1.12.4.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${contextPath}/external/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${contextPath}/external/underscore/underscore-min.js" charset="utf-8"></script>
<script type="text/javascript" src="${contextPath}/ctrl/xform/xform-init-script"></script>
<script type="text/javascript" src="${contextPath}/resource/js/dreamweb-core.js" charset="utf-8"></script>
<script type="text/javascript" src="${contextPath}/resource/js/validators.js"></script>
<script type="text/javascript" src="${contextPath}/resource/js/public.js"></script>
<script type="text/javascript" src="${contextPath}/external/jquery-slimScroll/jquery.slimscroll.js"
charset="utf-8"></script>
<script type="text/javascript" src="${contextPath}/external/tablednd/jquery.tablednd.js"></script>
<script type="text/javascript" src="${contextPath}/resource/js/module/datagrid-base.js" charset="utf-8"></script>
<script type="text/javascript" src="${contextPath}/resource/js/business-common.js" charset="utf-8"></script>
<script type="text/javascript" src="${contextPath}/p2047/200703094408ImByb7RQyTbqUXQQ9g9/js/echarts/echarts.min.js"
charset="utf-8"></script>
<script type="text/javascript">
var year = ${year};
</script>
</head>
<body>
<script type="text/html" id="bt_Tponed">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-01','10','{{d["userName"]}}(一月调研活动)') href='javascript:void(0);'>{{d["oned"]}}</a>
</script>
<script type="text/html" id="bt_Tptwod">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-02','10','{{d["userName"]}}(二月调研活动)') href='javascript:void(0);'>{{d["twod"]}}</a>
</script>
<script type="text/html" id="bt_Tpthreed">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-03','10','{{d["userName"]}}(三月调研活动)') href='javascript:void(0);'>{{d["threed"]}}</a>
</script>
<script type="text/html" id="bt_Tpfourd">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-04','10','{{d["userName"]}}(四月调研活动)') href='javascript:void(0);'>{{d["fourd"]}}</a>
</script>
<script type="text/html" id="bt_Tpfived">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-05','10','{{d["userName"]}}(五月调研活动)') href='javascript:void(0);'>{{d["fived"]}}</a>
</script>
<script type="text/html" id="bt_Tpsixd">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-06','10','{{d["userName"]}}(六月调研活动)') href='javascript:void(0);'>{{d["sixd"]}}</a>
</script>
<script type="text/html" id="bt_Tpsevend">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-07','10','{{d["userName"]}}(七月调研活动)') href='javascript:void(0);'>{{d["sevend"]}}</a>
</script>
<script type="text/html" id="bt_Tpeightd">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-08','10','{{d["userName"]}}(八月调研活动)') href='javascript:void(0);'>{{d["eightd"]}}</a>
</script>
<script type="text/html" id="bt_Tpnined">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-09','10','{{d["userName"]}}(九月调研活动)') href='javascript:void(0);'>{{d["nined"]}}</a>
</script>
<script type="text/html" id="bt_Tptend">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-10','10','{{d["userName"]}}(十月调研活动)') href='javascript:void(0);'>{{d["tend"]}}</a>
</script>
<script type="text/html" id="bt_Tpelevend">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-11','10','{{d["userName"]}}(十-月调研活动)') href='javascript:void(0);'>{{d["elevend"]}}</a>
</script>
<script type="text/html" id="bt_Tptwelved">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-12','10','{{d["userName"]}}(十二月调研活动)') href='javascript:void(0);'>{{d["twelved"]}}</a>
</script>
<script type="text/html" id="bt_Tponej">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-01','20','{{d["userName"]}}(一月接待活动)') href='javascript:void(0);'>{{d["onej"]}}</a>
</script>
<script type="text/html" id="bt_Tptwoj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-02','20','{{d["userName"]}}(二月接待活动)') href='javascript:void(0);'>{{d["twoj"]}}</a>
</script>
<script type="text/html" id="bt_Tpthreej">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-03','20','{{d["userName"]}}(三月接待活动)') href='javascript:void(0);'>{{d["threej"]}}</a>
</script>
<script type="text/html" id="bt_Tpfourj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-04','20','{{d["userName"]}}(四月接待活动)') href='javascript:void(0);'>{{d["fourj"]}}</a>
</script>
<script type="text/html" id="bt_Tpfivej">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-05','20','{{d["userName"]}}(五月接待活动)') href='javascript:void(0);'>{{d["fivej"]}}</a>
</script>
<script type="text/html" id="bt_Tpsixj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-06','20','{{d["userName"]}}(六月接待活动)') href='javascript:void(0);'>{{d["sixj"]}}</a>
</script>
<script type="text/html" id="bt_Tpsevenj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-07','20','{{d["userName"]}}(七月接待活动)') href='javascript:void(0);'>{{d["sevenj"]}}</a>
</script>
<script type="text/html" id="bt_Tpeightj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-08','20','{{d["userName"]}}(八月接待活动)') href='javascript:void(0);'>{{d["eightj"]}}</a>
</script>
<script type="text/html" id="bt_Tpninej">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-09','20','{{d["userName"]}}(九月接待活动)') href='javascript:void(0);'>{{d["ninej"]}}</a>
</script>
<script type="text/html" id="bt_Tptenj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-10','20','{{d["userName"]}}(十月接待活动)') href='javascript:void(0);'>{{d["tenj"]}}</a>
</script>
<script type="text/html" id="bt_Tpelevenj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-11','20','{{d["userName"]}}(十-月接待活动)') href='javascript:void(0);'>{{d["elevenj"]}}</a>
</script>
<script type="text/html" id="bt_Tptwelvej">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-12','20','{{d["userName"]}}(十二月接待活动)') href='javascript:void(0);'>{{d["twelvej"]}}</a>
</script>
<script type="text/html" id="bt_Tponeh">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-01','30','{{d["userName"]}}(一月会见活动)') href='javascript:void(0);'>{{d["oneh"]}}</a>
</script>
<script type="text/html" id="bt_Tptwoh">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-02','30','{{d["userName"]}}(二月会见活动)') href='javascript:void(0);'>{{d["twoh"]}}</a>
</script>
<script type="text/html" id="bt_Tpthreeh">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-03','30','{{d["userName"]}}(三月会见活动)') href='javascript:void(0);'>{{d["threeh"]}}</a>
</script>
<script type="text/html" id="bt_Tpfourh">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-04','30','{{d["userName"]}}(四月会见活动)') href='javascript:void(0);'>{{d["fourh"]}}</a>
</script>
<script type="text/html" id="bt_Tpfiveh">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-05','30','{{d["userName"]}}(五月会见活动)') href='javascript:void(0);'>{{d["fiveh"]}}</a>
</script>
<script type="text/html" id="bt_Tpsixh">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-06','30','{{d["userName"]}}(六月会见活动)') href='javascript:void(0);'>{{d["sixh"]}}</a>
</script>
<script type="text/html" id="bt_Tpsevenh">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-07','30','{{d["userName"]}}(七月会见活动)') href='javascript:void(0);'>{{d["sevenh"]}}</a>
</script>
<script type="text/html" id="bt_Tpeighth">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-08','30','{{d["userName"]}}(八月会见活动)') href='javascript:void(0);'>{{d["eighth"]}}</a>
</script>
<script type="text/html" id="bt_Tpnineh">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-09','30','{{d["userName"]}}(九月会见活动)') href='javascript:void(0);'>{{d["nineh"]}}</a>
</script>
<script type="text/html" id="bt_Tptenh">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-10','30','{{d["userName"]}}(十月会见活动)') href='javascript:void(0);'>{{d["tenh"]}}</a>
</script>
<script type="text/html" id="bt_Tpelevenh">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-11','30','{{d["userName"]}}(十-月会见活动)') href='javascript:void(0);'>{{d["elevenh"]}}</a>
</script>
<script type="text/html" id="bt_Tptwelveh">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-12','30','{{d["userName"]}}(十二月会见活动)') href='javascript:void(0);'>{{d["twelveh"]}}</a>
</script>
<script type="text/html" id="bt_Tponexj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-01','','{{d["userName"]}}(一月活动)') href='javascript:void(0);'>{{d["onexj"]}}</a>
</script>
<script type="text/html" id="bt_Tptwoxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-02','','{{d["userName"]}}(二月活动)') href='javascript:void(0);'>{{d["twoxj"]}}</a>
</script>
<script type="text/html" id="bt_Tpthreexj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-03','','{{d["userName"]}}(三月活动)') href='javascript:void(0);'>{{d["threexj"]}}</a>
</script>
<script type="text/html" id="bt_Tpfourxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-04','','{{d["userName"]}}(四月活动)') href='javascript:void(0);'>{{d["fourxj"]}}</a>
</script>
<script type="text/html" id="bt_Tpfivexj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-05','','{{d["userName"]}}(五月活动)') href='javascript:void(0);'>{{d["fivexj"]}}</a>
</script>
<script type="text/html" id="bt_Tpsixxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-06','','{{d["userName"]}}(六月活动)') href='javascript:void(0);'>{{d["sixxj"]}}</a>
</script>
<script type="text/html" id="bt_Tpsevenxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-07','','{{d["userName"]}}(七月活动)') href='javascript:void(0);'>{{d["sevenxj"]}}</a>
</script>
<script type="text/html" id="bt_Tpeightxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-08','','{{d["userName"]}}(八月活动)') href='javascript:void(0);'>{{d["eightxj"]}}</a>
</script>
<script type="text/html" id="bt_Tpninexj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-09','','{{d["userName"]}}(九月活动)') href='javascript:void(0);'>{{d["ninexj"]}}</a>
</script>
<script type="text/html" id="bt_Tptenxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-10','','{{d["userName"]}}(十月活动)') href='javascript:void(0);'>{{d["tenxj"]}}</a>
</script>
<script type="text/html" id="bt_Tpelevenxj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-11','','{{d["userName"]}}(十-月活动)') href='javascript:void(0);'>{{d["elevenxj"]}}</a>
</script>
<script type="text/html" id="bt_Tptwelvexj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}-12','','{{d["userName"]}}(十二月活动)') href='javascript:void(0);'>{{d["twelvexj"]}}</a>
</script>
<script type="text/html" id="bt_Tphj">
<a onclick=toList('{{d["userId"]}}','{{d["startTime"]}}','','{{d["userName"]}}(会议活动)') href='javascript:void(0);'>{{d["hj"]}}</a>
</script>
<div class="list" id="datagrid" lay-filter="lay-datagrid"></div>
<script type="text/javascript">
$(function () {
var cols = [
[{"type": "numbers", "title": "序号", "rowspan": "2"},
{
"filter": false,
"title": "人员",
"align": "center",
"rowspan": "2",
"width": "10%",
"hint": false,
"field": "userName"
},
{"filter": false, "title": "1月", "align": "center", "ellipsis": false, "colspan": "4"},
{"filter": false, "title": "2月", "align": "center", "ellipsis": false, "colspan": "4"},
{"filter": false, "title": "3月", "align": "center", "ellipsis": false, "colspan": "4"},
{"filter": false, "title": "4月", "align": "center", "ellipsis": false, "colspan": "4"},
{"filter": false, "title": "5月", "align": "center", "ellipsis": false, "colspan": "4"},
{"filter": false, "title": "6月", "align": "center", "ellipsis": false, "colspan": "4"},
{"filter": false, "title": "7月", "align": "center", "ellipsis": false, "colspan": "4"},
{"filter": false, "title": "8月", "align": "center", "ellipsis": false, "colspan": "4"},
{"filter": false, "title": "9月", "align": "center", "ellipsis": false, "colspan": "4"},
{"filter": false, "title": "10月", "align": "center", "ellipsis": false, "colspan": "4"},
{"filter": false, "title": "11月", "align": "center", "ellipsis": false, "colspan": "4"},
{"filter": false, "title": "12月", "align": "center", "ellipsis": false, "colspan": "4"},
{"filter": false, "title": "合计", "align": "center", "ellipsis": false, "rowspan": "2", "templet": "#bt_Tphj"}
], [
{"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tponed"},
{"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tponej"},
{"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tponeh"},
{"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tponexj"},
{"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tptwod"},
{"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tptwoj"},
{"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tptwoh"},
{"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tptwoxj"},
{"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpthreed"},
{"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpthreej"},
{"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpthreeh"},
{"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpthreexj"},
{"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpfourd"},
{"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpfourj"},
{"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpfourh"},
{"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpfourxj"},
{"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpfived"},
{"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpfivej"},
{"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpfiveh"},
{"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpfivexj"},
{"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpsixd"},
{"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpsixj"},
{"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpsixh"},
{"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpsixxj"},
{"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpsevend"},
{"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpsevenj"},
{"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpsevenh"},
{"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpsevenxj"},
{"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpeightd"},
{"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpeightj"},
{"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpeighth"},
{"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpeightxj"},
{"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpnined"},
{"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpninej"},
{"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpnineh"},
{"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpninexj"},
{"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tptend"},
{"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tptenj"},
{"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tptenh"},
{"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tptenxj"},
{"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tpelevend"},
{"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tpelevenj"},
{"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tpelevenh"},
{"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tpelevenxj"},
{"filter": false, "title": "调研", "align": "center", "ellipsis": false, "templet": "#bt_Tptwelved"},
{"filter": false, "title": "接待", "align": "center", "ellipsis": false, "templet": "#bt_Tptwelvej"},
{"filter": false, "title": "会见", "align": "center", "ellipsis": false, "templet": "#bt_Tptwelveh"},
{"filter": false, "title": "小计", "align": "center", "ellipsis": false, "templet": "#bt_Tptwelvexj"}
]
] || [[]];
var filters = [{"defaultFilter": 1, "text": "人员", "placeholder": "", "cols": 4, "key": "userName"},
{"defaultFilter": 1, "text": "年份", "placeholder": "", "cols": 4, "key": "year"}] || [];
var metas = {
"userName": {
"paramCount": 1,
"field": {"value": {"dataType": "TEXT", "key": "value"}},
"control": "controlTextarea",
"text": "人员",
"validate": {}
},
"year": {
"paramCount": 1,
"field": {"value": {"dataType": "TEXT", "key": "value"}},
"dataList": year,
"control": "controlComboBox",
"text": "年份",
"validate": {},
"defaultValue": "${defYear}",
"radio": true
}
} || {};
var gridId = "datagrid";
var tableElemKey = gridId + 'Table';
var url = '${contextPath}/ctrl/oaOutManage/getActivityAtatisticData';
var urlParams = DSF.Utils.getQueryObject(DSF.Utils.getQueryString()) ;
var urlParam = DSF.Utils.getJSONString(urlParams);
if(urlParam){
url +="?" + urlParam ;
}
layui.use('datagrid', function(){
var datagrid = layui.datagrid ;
var datagrids= {};
var isPage = true
function getDataGrid(dataGridKey){
if(_.isEmpty(dataGridKey)){
dataGridKey = "datagrid";
}
if(_.isEmpty(datagrids)){
console.log("未配置datagrid！");
return;
}
return datagrids[dataGridKey];
};
var pageSize = '30',autoPage = false;
if(_.isEmpty(pageSize) || pageSize == '0'){
if(pageSize == '0'){
autoPage = true ;
}
pageSize = 30 ;
}else{
pageSize = parseInt(pageSize,10);
if(pageSize == -1){
isPage = false ;
pageSize= 100;
}
}
var needCheckBox = true ;
if('true'){
needCheckBox = true ;
}
var rowClick = '',windowModel = null ;
if('0' == '0' && !rowClick ){
rowClick = 'listRow' ;
windowModel = '3';
}
var _where = layui.dataGridUtil.getDefaultValue(metas) || {} ;
开始
var opts = {
elemKey: gridId,
tableKey: tableElemKey,
title: '活动统计' || "",
allFilters: filters,
filterMode: 'table' || 'table', //过滤模式
metas: metas,
primaryKey: 'A0001' || "",
buttons: [{"method": "exportXls", "btnStyle": "3", "tip": "导出", "text": "导出", "params": {}}] || [],
showButtonCount: '3' || '0',
showTitle: true,
showToolbar: true,
needCheckBox: needCheckBox,
showCustomField: true,
needSearch: true,
editFormKey: '' || "",
windowModel: windowModel,
selectType: 'checkbox' || '',
needFlowInfo: false,
initPage: true,
table: {
cols: cols,
url: url,
elem: '#' + tableElemKey,
id: tableElemKey,
datagridKey: gridId,
page: true,
autoPage: autoPage || false, //是不是自动分页
limits: [pageSize, pageSize * 2, pageSize * 3],
limit: pageSize,
height: '' || 'full-datagrid',
primaryKey: 'A0001' || "",
method: 'post',
where: _where,
resize: true,
subTable: {} || {},
done: function (res, curr, count) {
//设置单元格宽度
$("div [class='layui-table-header']").find("tr").eq(1).children().each(function (index, element) {
var fieldValue = $(this).attr("data-field");
$(".laytable-cell-1-" + fieldValue + "").css("width", "80px");
})
$(".laytable-cell-1-hj").css("width", "80px");
//构建echarts图表
drawEchart();
},
}, getDataGrid: getDataGrid //绑定列表对象信息
};
var tableWidth = '';
if (!_.isEmpty(tableWidth)) {
opts.table["width"] = parseInt(tableWidth);
}
//
var hideHeader = DSF.getURLParam("hideHeader");
if (hideHeader && "1" == hideHeader) {
opts.table["hideHeader"] = true;
}
var tableSort = '';
if (!_.isEmpty(tableSort)) {
var sortJson = JSON.parse(tableSort);
opts.table.initSort = {
field: sortJson.sort,
type: sortJson.order
};
opts.table.sortType = "remote"; //远程排序
}
opts.table.viewMode = {"cardViewTpl": "", "summaryViewTpl": "", "type": "table"} || {};
var datagridObj = datagrid.render(opts);
//绑定其对象
datagrids[gridId] = datagridObj;
结束
//把对象提供出去
window.DataGrids = window.DataGrids || datagrids;
});
//
});
</script>
<script>
/**
* 打开活动详情
* @param outUserId
* @param startTime
* @param outType
* @param name
*/
function toList(outUserId, startTime, outType, name) {
var url ='';
if (startTime.indexOf("-") == -1 && outType == ''){
//总计
url = DSF.getURLRoot() + "ctrl/list/201020160230VD5AR3P39g3ECGBwxbX?moduleId=200703094408ImByb7RQyTbqUXQQ9g9&outUserId=" + outUserId + "&startTime=" + startTime;
}else if (outType == ''){
//小计
url = DSF.getURLRoot() + "ctrl/list/2010201602099k96b8FPPhhpkyKbsUQ?moduleId=200703094408ImByb7RQyTbqUXQQ9g9&outUserId=" + outUserId + "&startTime=" + startTime;
}else {
//每个月月份分类
url = DSF.getURLRoot() + "ctrl/list/201016145510bQuKleZSTZey9qwO9vI?moduleId=200703094408ImByb7RQyTbqUXQQ9g9&startTime=" + startTime + "&outUserId=" + outUserId + "&outType=" + outType;
}
simpleWin(this, {"url": url, "name": name});
}
/**
* 导出活动统计表
* @param count
* @param dataList
* @param queryList
* @param widths
*/
function exportDataGrid(count, dataList, queryList, widths) {
var url = "${contextPath}/ctrl/oaOutManage/exportXls?page=1";
var data = {
"query_year": $("select[name='query_year']").val(),
"query_userName": $("input[name='query_userName']").val()
} || {};
$.each(data, function (k, v) {
url += "&" + k + "=" + encodeURI(v)
});
window.open(url)
}
//构建echarts图
function drawEchart() {
$(".layui-table").eq(1).after("<div id='mainEchart' style='width: 100%;height:60%;text-align:center;position:relative;'></div>");
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('mainEchart'));
//查询人员和对应的数据
var condition = {
"query_year": $("select[name='query_year']").val(),
"query_userName": $("input[name='query_userName']").val()
} || {};
DSF.Utils.ajaxRequest("ctrl/oaOutManage/getNameAndData", condition, function (result) {
option = {
title: {
text: '折线图统计',
left: '28%',
textStyle: {
fontStyle: 'normal'
}
},
tooltip: {
trigger: 'axis'
},
color: ['red', 'purple', 'green'],
legend: {
data: ['调研', '接待', '会见'],
left: '76%'
},
grid: {
left: '30%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
title: '保存为图片',
type: 'jpeg'
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: result.data[0]
},
yAxis: {
type: 'value'
},
series: [
{
name: '调研',
type: 'line',
stack: '调研总量',
data: result.data[1]
},
{
name: '接待',
type: 'line',
stack: '接待总量',
data: result.data[2]
}, {
name: '会见',
type: 'line',
stack: '会见总量',
data: result.data[3]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
$("canvas").css("position", "fixed");
$("canvas").css("top", "50%");
$("canvas").css("left", "10%")
});
}
</script>
<style>
</style>
</body>
</html>
类似资料：