shuochen
/
LargeScreenVisualization


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
							
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title>全局分析</title>
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="css/table1.css" rel="stylesheet" type="text/css">
    <style>
        .news_check{background-color:#171e2b ;border: none;color:#c5d0da;font-weight: normal;font-size: 14px }
        .news_check input,.news_check select,.news_check select option{border: 1px #9ca9b6  solid !important;background-color: transparent !important;color: #9ca9b6}
        .charts{border: 1px #3e5665  solid}
        .charts p{background-color: #495365;border-bottom:#495365;color: #d7d9dc }
        .btn-default {  color: #cfd8e8;  background-color: #5f6167;  border-color: #7b8188;  }
        .btn-default:hover{ color: #f1f5fb;  background-color: #74767b;  border-color: #8e9398;}
        .check_right span {color: #d1d5de !important;}
    </style>
</head>
<body style="background-color: #171e2b;font-family: 微软雅黑;width:900px;color: #475059;overflow: auto">
<div class="from_main" style="background-color: #171e2b">
    <div class="news_check">
        <div class="check_left l_left">

            <label>年分：</label>
            <input type="date" class="find_input"/>


            <button>查询</button>
        </div>
        <div class="check_right r_right">
            <a class="btn btn-default"><span class=" glyphicon glyphicon-circle-arrow-down l_left"></span>打印</a>
            <a class="btn btn-default"><span class=" glyphicon glyphicon-download-alt l_left"></span>导出</a>
        </div>
        <div class="clear"></div>
    </div>

    <div style="padding: 0 10px 0 10px ;background-color: #171e2b ;">

        <!--<div class="e_chart">-->
            <!--<div class="charts l_left">-->
                <!--<p class="charts_p">事故原因分析<span class="r_right">更多></span></p>-->
                <!--<div id="container01" style="height:200px;width: 100%;"></div>-->

            <!--</div>-->
            <!--<div class="charts l_left last_charts">-->
                <!--<p class="charts_p">事故级别分析<span class="r_right">更多></span></p>-->
                <!--<div id="container02" style="height:200px;width: 100%;"></div>-->

            <!--</div>-->
            <!--<div class="clear"></div>-->
        <!--</div>-->
        <div class="e_chart">
            <div class="charts last_charts" style="width: 100%">
                <p class="charts_p">历史数据分析<span class="r_right">更多></span></p>
                <div id="container03" style="height:300px;"></div>
            </div>
        </div>
    </div>

</div>


</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>

<script>
    $(function () {

//        chart02();
//        chart03();
        chart04()

    });

//    function chart02() {
//        var myChart = echarts.init($("#container01")[0]);
//        var option = {
//
//            tooltip : {
//                trigger: 'item',
//                formatter: "{a} <br/>{b} : {c} ({d}%)"
//            },
//            legend: {
//                orient : 'vertical',
//                x : 'left',
//                data:['设备原因','违规操作','操作失误','腐蚀','维护不周',"自然因素","社会因素","其它"],
//                textStyle:{    //图例文字的样式
//                    color:'#c4c6ca',
//                    fontSize:12
//                }
//            },
//
//            calculable : false,
//            series : [
//                {
//                    name:'访问来源',
//                    type:'pie',
//                    radius : '55%',
//                    center: ['50%', '60%'],
//                    data:[
//                        {value:35, name:'设备原因' },
//                        {value:110, name:'违规操作'},
//                        {value:34, name:'操作失误'},
//                        {value:35, name:'腐蚀'},
//                        {value:48, name:'维护不周'},
//                        {value:2, name:'自然因素'},
//                        {value:5, name:'社会因素'},
//                        {value:15, name:'其它'}
//                    ]
//                }
//            ]
//        };
//        myChart.setOption(option);
//
//    }
//    function chart03() {
//        var myChart = echarts.init($("#container02")[0]);
//       var option = {
//
//            tooltip : {
//                trigger: 'item',
//                formatter: "{a} <br/>{b} : {c} ({d}%)"
//            },
//            legend: {
//                orient : 'vertical',
//                x : 'left',
//                data:['特大','极大','重大','一般','微小'],
//                textStyle:{    //图例文字的样式
//                    color:'#c4c6ca',
//                    fontSize:12
//                }
//            },
//
//            calculable : false,
//            series : [
//                {
//                    name:'访问来源',
//                    type:'pie',
//                    radius : '55%',
//                    center: ['50%', '60%'],
//                    data:[
//                        {value:3, name:'特大'},
//                        {value:11, name:'极大'},
//                        {value:34, name:'重大'},
//                        {value:35, name:'一般'},
//                        {value:48, name:'微小'}
//
//                    ]
//                }
//            ]
//        };
//        myChart.setOption(option);
//
//    }
    function chart04() {
        var myChart = echarts.init($("#container03")[0]);
        var option = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['高猛酸盐','总磷','氨氮'],
                textStyle: {
                    color: '#fff'
                }
            },

            calculable : false,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ['周一','周二','周三','周四','周五','周六','周日'],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            ],
            series : [
                {
                    name:'高猛酸盐',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'总磷',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'氨氮',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410]
                }

            ]
        };
        myChart.setOption(option);

    }
</script>
</html>