safesite/groups/templates/groups/risk.html

{% extends "./base.html" %}

{% block title %}风险管控{% endblock %}
{% block pagehead %}

<ol class="breadcrumb">
    <li><a href="{% url 'groups_index' %}"><i class="fa fa-dashboard"></i> 主页</a></li>
    <li class="active">风险统计</li>
</ol>
{% endblock %}
{% block content %}
{% load static %}
<div class="callout callout-warning" style="margin-top: 20px;">
    <h3>风险统计</h3>
</div>
<div style="height:600px;width:100%;background-color:#dac2a3">
    <div style="width:100%;height:100px;">
        开始日期：<input type="text" id="test">
        结束日期：<input type="text" id="test2">

        <button class="btn btn-info" onclick="funTypeChange()">&nbsp;查询</button>
    </div>

    <div id="riskchart" style="width:60%;height:400px;margin:auto"></div>
</div>
<!-- jQuery 3 -->
<script src="{% static 'groups/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'groups/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>

<script src="{% static 'groups/time/laydate/laydate.js' %}"></script>
<link rel="stylesheet" href="{% static 'groups/time/laydate/theme/default/laydate.css' %}">
<!-- iCheck -->
<script src="{% static 'groups/plugins/iCheck/icheck.min.js' %}"></script>
<script src="{% static 'groups/bower_components/echarts.min.js' %}"></script>
<script type="text/javascript">
    //隐患数量趋势图


    $(function () {

        laydate.render({
            elem: '#test'
            , format: 'yyyy-MM-dd' //可任意组合
        });
        laydate.render({
            elem: '#test2'
            , format: 'yyyy-MM-dd' //可任意组合
        });
        risk();

    });
    function funTypeChange() {
        risk();
    }




    function risk() {

        var start = $("#test").val();
        var end = $("#test2").val();

        var myChart = echarts.init(document.getElementById("riskchart"));
        myChart.setOption(option = {
            title: {
                text: '集团公司风险点统计图',
            },
            legend: {
                data: ['风险点', '低风险点', '一般风险点', '较大风险点', '重大风险点']
            },
            

            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: [],
            },
            yAxis: {
                type: 'value',
            },
            series: [],
           
        });
        myChart.showLoading();
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/groups/api/riskChart?code=risk&start=" + start + "&end=" + end,   //请求发送
            dataType: "json",        //返回数据形式为json
            success: function (data) {
                console.log(data);
                //请求成功时执行该函数内容，data即为服务器返回的json对象
                var datariskact = [];
                var datariskact1 = [];
                var datariskact2 = [];
                var datariskact3 = [];
                var datariskact4 = [];
                var companyName = [];
                if (data!= null) {
                    $.each(data.risks, function (i, item) {


                        datariskact.push(item.datariskact);
                        datariskact1.push(item.datariskact1);
                        datariskact2.push(item.datariskact2);
                        datariskact3.push(item.datariskact3);
                        datariskact4.push(item.datariskact4);
                        companyName.push(item.companyName);

                    })
                    if (data) {
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({
                            xAxis: {
                                data: companyName,
                                boundaryGap: [0, 0.01],
                                axisLabel: {
                                    interval: 0,//横轴信息全部显示
                                    rotate: -10,//-30度角倾斜显示
                                }
                            },
                            series: [{
                                name: '风险点',
                                type: 'bar',

                                data: datariskact
                            }, {
                                name: '低风险点',
                                type: 'bar',
                                stack: '风险点',
                                color: 'blue',
                                data: datariskact1
                            },
                            {
                                name: '一般风险点',
                                type: 'bar',
                                stack: '风险点',
                                color: 'yellow',
                                data: datariskact2
                            }, {
                                name: '较大风险点',
                                type: 'bar',
                                stack: '风险点',
                                color: 'orange',
                                data: datariskact3
                            }, {
                                name: '重大风险点',
                                type: 'bar',
                                stack: '风险点',
                                color: 'red',
                                data:datariskact4
                            }]
                        });

                    }
                }
            },
            error: function (errorMsg) {
                
                myChart.hideLoading();
            }
        });

    }


</script>
    {% endblock %}