ZhiYeJianKang/职业健康平台后端/target/dzzyb/webpage/modules/zyb/cfqkXgqy.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<!DOCTYPE html>
<html>

<head>

    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <link rel="stylesheet" href="/dzzyb/static/js/layui-v2.5.6/layui/css/layui.css" media="all">
    <script src="/dzzyb/static/echarts/echarts.min.js" charset="utf-8"></script>
    <script src="/dzzyb/static/js/layui-v2.5.6/layui/layui.all.js"></script>
    <style type="text/css">
        .clear_box::after {
            content: "";
            display: block;
            clear: both;
        }

        .div_float {
            width: 50%;
            float: left;
        }

        .layui-btn-primary {
            border: 1px solid #C9C9C9;
            background-color: #01b9dd !important;
            color: white !important;
        }
        .gray-bg {
            background-color: #f3f3f4 !important;
        }
    </style>
</head>

<body class="gray-bg">
<div class="sjzs_top">

</div>
<div class="sjzs_cont clear_box">
    <div class="div_float">
        <div id="main" style="width: 800px;height:400px;margin: 0 auto;"></div>
    </div>
    <div class="div_float">
        <div id="main1" style="width: 800px;height:400px;margin: 0 auto;"></div>
    </div>
</div>

<table id="demo" class="layui-hide" lay-filter="xk"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
</script>

<script type="text/javascript">
    layui.use('table', function() {
        var table = layui.table;
        table.render({
            elem: '#demo',
            // url: 'files/jclb.json' //数据接口[123, 265, 372, 274][84, 182, 213, 56]
            //   ,
            "data": [{
                "a": "生产技术部",
                "b": "1697",
                "d": "273",
                "e": "531"
            },
                {
                    "a": "人力资源部",
                    "b": "1532",
                    "d": "236",
                    "e": "456"
                },
                {
                    "a": "财务部",
                    "b": "1445",
                    "d": "213",
                    "e": "403"
                },
                {
                    "a": "计划营销部",
                    "b": "1349",
                    "d": "207",
                    "e": "398"
                }
            ],
            cellMinWidth: 80 //全局定义常规单元格的最小宽度
            ,
            page: true //开启分页
            ,
            cols: [
                [ //表头
                    {
                        field: 'a',
                        title: 'TOP 5部门'
                    }, {
                    field: 'b',
                    title: '部门检测人数'
                }, {
                    field: 'd',
                    title: '尘肺确诊人数'
                }, {
                    field: 'e',
                    title: '尘肺疑似人数'
                }, {
                    fixed: 'right',
                    title: '查看',
                    width: 165,
                    align: 'center',
                    toolbar: '#barDemo'
                }
                ]
            ]
        });
        //监听行工具事件
        table.on('tool(xk)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,
                layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看详情');
            }
        });
    });



    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));



    option = {
        title: {
            text: '部门尘肺情况'
        },
        color: ['#003366', '#e5323e'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['确诊', '疑似']
        },
        toolbox: {
            show: false,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['line', 'bar', 'stack', 'tiled']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        xAxis: [{
            type: 'category',
            axisLabel: {
                interval: 0
            },
            axisTick: {
                show: false
            },
            data: ['生产技术部', '人力资源部', '财务部', '计划营销部']
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: '确诊',
            type: 'bar',
            barGap: 0,
            barWidth: 35,
            data: [273, 236, 213, 207]
        },
            {
                name: '疑似',
                type: 'bar',
                barWidth: 35,
                data: [531, 456, 403, 398]
            }
        ]
    };

    myChart.setOption(option);
    var myChart1 = echarts.init(document.getElementById('main1'));


    option1 = {
        title: {
            text: '部门尘肺确诊数统计',
            subtext: '统计数据',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['生产技术部', '人力资源部', '财务部', '计划营销部']
        },
        series: [{
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [{
                name: '生产技术部',
                value: 273
            },
                {
                    value: 236,
                    name: '人力资源部'
                },
                {
                    value: 57,
                    name: '财务部'
                },
                {
                    value: 213,
                    name: '计划营销部'
                }
            ]
        }]
    };

    myChart1.setOption(option1);
</script>
</body>

</html>