echarts图表之在Layui列表下添加echarts图表

最新推荐文章于 2024-07-20 10:10:38 发布
最新推荐文章于 2024-07-20 10:10:38 发布
阅读量725 收藏 1
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AdolfQiu/article/details/109328734
版权 
<%@ 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>
AdolfQiu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue+layui+echarts】实现弹出层可编辑的表格和实时变化的图表
周周的奇妙代码之旅
05-24 1533
layui是基于原生js的，跟vue的编程思想不太搭，用这俩主要是因为只是一个作业的单页面应用而已……所以来了三个工具框架的大杂烩，用vue的话还是用基于vue组件化的ui框架比较好。vue在这个实现中……其实没有也行。 点击查看车流弹出弹出层，其中一部分为echart图表，一部分为layui的table组件。 在table中编辑完成后，echart图表便产生了相应的变化。 本来想做成拖拽折线图结点进行操作的，但是以Echart的api来看太麻烦了……就加了layui的table组件来操作了。 .
layui中引入echarts示例.rar
09-26
在本文中，我们将深入探讨如何在layui框架中集成并使用ECharts图表库。layui是一款轻量级的前端组件库，提供了丰富的UI元素和强大的模块化管理。而ECharts是百度开发的一款基于JavaScript的数据可视化库，它支持丰富...
Layui表格中嵌套echarts图表
webhhhhhh的博客
02-18 1102
【代码】【无标题】
Web Echarts+layui 统计图表demo实例 (统计深圳市旅游景点信息)
10-14
使用Echarts+layui+html 开发数据统计图表，demo中统计的数据是深圳市旅游景点分析统计，内有深圳地图统计，饼图统计，柱状图统计，漏斗图统计，玫瑰饼图统计等图形展示
C#+layui+echarts实现动态生成折线图
最新发布
路飞船长的博客
07-20 1244
C#+layui+echarts实现动态生成折线图。
layui框架实战案例(2)：LayUI表格与Echarts图表交互展示及PHP后台数据管理(搜索、翻页、动态显示)
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
08-02 3923
引入外部文件 <link rel="stylesheet" href="js/layui/css/layui.css" media="all"> <script src="js/jquery.js" charset="utf-8"></script> <script src="js/echarts.min.js" charset="utf-8"></script> <script src="js/visual.js.
Layui 中引入Echarts模块
Mihu_Tutu的博客
12-31 3131
echarts 下载 https://echarts.apache.org/zh/download.html 解压以后在 echarts-5.2.2\dist 文件下 2. 修改echarts.js 第一处修改： 添加内容： window.layui && layui.define ? layui.define(function(exports){exports('echarts',factory(exports))}) : echarts.js 开头部分添加以上内容： (funct.
Echarts.js 图表在layui中的引用
热门推荐
COCOLI_BK的博客
05-28 1万+
下载echarts.js源码 添加部分源码,可使layui使用第三方插件的方法引入,代码如下: //打开源码,将代码头部的代码 (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof d...
SSM 整合 Layui Echarts图表
06-26
SSM整合Layui Echarts图表是一个典型的Java Web开发中的实践，主要涉及到Spring、Spring MVC和MyBatis（SSM）三大框架与Layui前端框架以及Echarts数据可视化库的结合。这篇详解将深入讨论如何在实际项目中实现这样的...
SpringBoot+ layui +Echarts整合图表实例（统计港口收入预估数据走势）
12-07
4. **layui界面设计**：利用layui组件创建页面结构，添加Echarts图表的容器，并设置相应的样式。 5. **Echarts初始化**：在前端JavaScript代码中，根据获取的后端数据初始化Echarts实例，设置图表的配置项，如图表...
Layui整合Echarts5.zip
03-31
3. **Layui 与 ECharts 的集成教程**：可能会有一个文档或readme文件，详细解释了如何将 ECharts 图表与 Layui 组件结合，例如如何在 Layui 的表格中嵌入 ECharts 图表，或者如何利用 Layui 的按钮控制 ECharts 的...
layui框架table 数据表格的方法级渲染详解
10-18
今天小编就为大家分享一篇layui框架table 数据表格的方法级渲染详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在页面中引入echarts.js时不起作用
Wendz的博客
09-27 1万+
将echarts.js在&lt;body&gt;&lt;/body&gt;标签中引入，不要再&lt;head&gt;&lt;/head&gt;标签中引入
LayUI使用Echarts实现统计图
qq_43005276的博客
11-18 7394
引入 echarts.min.js包 <div id="main" style="width: 1000px;height:700px;"></div> <script> layui.use(['form', 'laydate', 'layer'], function () { var laydate = layui.table; var form = layui.form; var layer = layui.l
echart做表
weixin_37121451的博客
06-27 2141
var myChart_req = echarts.init(document .getElementById('requestData_chart_box')); myChart_req.setOption({ title : { text : data.title,
Layui中引入Echarts模块实现图表显示
yorkmass
04-18 7377
首先我们需要去Echarts官网下载Echarts图表源码，核心文件为这两个 接着我们修改echarts.js代码 开头的修改为 (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof...
echart实现排名列表
无极低码
04-19 548
【代码】echart实现排名列表。
怎么用 ECharts创建一个信息列表？
ScriptEcho的博客
06-26 451
开发这个通知页面组件的过程是一个很好的学习体验。我了解了如何使用 Vue.js 的响应式数据和模板系统来构建动态且可重用的组件。未来，该组件可以进一步扩展和优化，例如：添加对不同通知类型（例如错误或警告）的支持实施实时通知，以便当有新通知时自动更新列表允许用户过滤和搜索通知更多组件：获取更多Echos本文由ScriptEcho平台提供技术支持传送门。
layui 使用 echarts
SummerGao
06-24 4355
layui 项目，需要展现图表相关功能，官网默认使用的echarts图表库，但是免费下载的组件中，并不包含echarts组件，我们需要自己扩展组件。 ...
使用layui.define封装echarts的图表
03-30
1. 首先引入echarts库和layui库： ```html <!-- 引入echarts库 --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"> <!-- 引入layui库 --> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值