master

分支 (1)

管理

管理

master

nls-web-fe
/
echarts.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="src/css/StatisticalGraph.css">
    <script src="src/static/jquery.js"></script>
    <script src="src/static/echarts.js"></script>
</head>
<body>

<div class="layui-inline down"> <!-- 注意：这一层元素并不是必须的 -->
    <input type="text" value="" class="layui-input yuefen" id="test1">
</div>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="fk_zong">
                <div class="fk_one">本月付款人数</div>
                <div class="fk_two"><label id="pc"></label></div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="fk_zong">
                <div class="fk_one">本月未付款人数</div>
                <div class="fk_two"><label id="wc"></label></div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="fk_zong">
                <div class="fk_one">本月检测总人数</div>
                <div class="fk_two"><label id="sc"></label></div>
            </div>
        </div>
    </div>
</div>


<!--</div>-->
<div id="container" class="tongjitu"></div>
<!--<div class="zongbaogao">-->
    <!--<ul>-->
        <!--<li>本月付款查看检测报告：<label id="pc"></label>人</li>-->
        <!--<li>本月未付款闹着玩的：<label id="wc"></label>人</li>-->
        <!--<li>本月机器总检测次数：<label id="sc"></label>人</li>-->

    <!--</ul>-->
<!--</div>-->

<script type="text/javascript">
    //    获取设备编号
    //var sbid =  window.location.search;
    var str = location.href;
    var num = str.indexOf("=");
    str = str.substring(num + 1, str.length);

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //获取当前的时间
        var current = new Date();
        //获取当前的年
        var year = current.getFullYear();
        //获取当前的月份
        var month = current.getMonth() + 1;
        if (month < 10) {
            //当前月小于10月份，手动加上一个0 //这个理应是服务端支持
            month = '0' + month;
        }
        //拼接格式 2018-05
        var today = year + '-' + month;


//        $(document).ready(function () {
//            var inp = $('#test1');
//            inp.focus(function () {
//                $(this).attr('placeholder', today)
//            })
//        })
        //发起ajax请求
        $.ajax(
            {
                //这边是填写服务端的地址   如果是同一个域名，可以省略域名，不同域名，则要加
                // 上域名exp：http://www.baidu.com/api/getEcharts 如果不同域名，服务端需要支持跨域，或者前端使用jsonp或者使用node代理
                url: '/api/getEcharts',
                //传给后端的参数 传输的是一个对象  以key:value的形式
                data: {sbno: str, mounthDate: today},
                //传输的方式  exp:get post put delete
                type: 'GET',
                //传输的格式:可以是json，也可以是formData 也可以是text
                dataType: 'json',
                success: function (data) {
                    //请求成功之后获取的值
                    //这个是获取整个返回值 //exp:{date: Array(0), sumCount: 0, listPay: Array(0), listPaid: Array(0), payCount: 0, …}
                    console.log(data);
                    //获取返回值中date的值
                    console.log(data.date);
                    $("#sc").html(data.sumCount);
                    $("#pc").html(data.payCount);
                    $("#wc").html(data.paidCount);
                    myChart.setOption({
                        xAxis: {data: data.date},
                        series: [
                            {name: '付款查看体检报告', data: data.listPay},
                            {name: '未付款闹着玩的', data: data.listPaid}
                        ]
                    });
                },
                error: function (error) {
                    //请求失败  获取的报错信息
                    console.log(error);
                }
            }
        );
        //执行一个laydate实例
        laydate.render({
            elem: '#test1',
            type: 'month',
            value: today,
            isInitValue: true,
//            ready: function(date){
//                console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
//            },


//            点击改变之后的值
            done: function (value) {
                console.log(value);
                $.ajax(
                    {
                        url: '/api/getEcharts',
                        data: {sbno: str, mounthDate: value},
                        type: 'GET',
                        dataType: 'json',
                        success: function (data) {
                            //请求成功之后获取的值

                            //这个是获取整个返回值 //exp:{date: Array(0), sumCount: 0, listPay: Array(0), listPaid: Array(0), payCount: 0, …}
                            console.log(data);
                            //获取返回值中date的值
                            console.log(data.date);
                            $("#sc").html(data.sumCount);
                            $("#pc").html(data.payCount);
                            $("#wc").html(data.paidCount);
                            myChart.setOption({
                                xAxis: {data: data.date},
                                series: [
                                    {name: '付款查看体检报告', data: data.listPay},
                                    {name: '未付款闹着玩的', data: data.listPaid}
                                ]
                            });
                        },
                        error: function (error) {
                            //请求失败  获取的报错信息
                            console.log(error);
                        }
                    }
                );
            }

        });
    });
    //    var time = value;
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '堆叠柱状图';
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['付款查看体检报告', '未付款闹着玩的',]
        },
        grid: {
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '付款查看体检报告',
                type: 'bar',
                data: [],
                stack: '一致',
                barWidth: 30,
            },
            {
                name: '未付款闹着玩的',
                type: 'bar',
                barWidth: 30,
                stack: '一致',
                data: []
            },
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>