@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<section class="content-header"></section>
<section class="content">
    <div class="container-fluid">
        <!-- SELECT2 EXAMPLE -->
        <div class="card card-default">
            <div class="card-header">
                <h3 class="card-title">概况</h3>

                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">

                <div class="row">
                    @*       <div id="main1" style="height:250px;" class="col-3"></div>
                    <div id="main2" style="height:250px;" class="col-3"></div>
                    <div id="main3" style="height:250px;" class="col-3"></div>
                    <div id="main4" style="height:250px;" class="col-3"></div>*@
                    <div id="main1" style="height:250px;" class="col-3"></div>
                    <div id="main2" style="height:250px;" class="col-3"></div>
                    <div id="main3" style="height:250px;" class="col-3"></div>
                </div>

            </div>
            <!-- /.card-body -->
            <div class="card-footer" id="pager">
            </div>
        </div>
        <!-- /.card -->



    </div>
    <!-- /.container-fluid -->
</section>
<script src="/AdminLTE/plugins/echarts/echarts.min.js"></script>
<script>


    var option = {
        series: [
            {
                type: 'gauge',
                center: ['50%', '60%'],
                startAngle: 200,
                endAngle: -20,
                height: 250,
                min: 0,
                max: 2018,
                progress: {
                    show: true,
                    width: 30
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 30
                    }
                },
                axisTick: {
                    distance: -45,
                    splitNumber: 2,
                    lineStyle: {
                        width: 2,
                    }
                },
                splitLine: {
                    distance: -52,
                    length: 14,
                    lineStyle: {
                        width: 2,
                    }
                },
                axisLabel: {
                    distance: -10,
                    fontSize: 10,
                    formatter: function (v) {
                        return v.toFixed(0);
                    },
                },
                anchor: {
                    show: true
                },
                title: {
                    show: true
                },
                detail: {
                    valueAnimation: true,
                    width: '60%',
                    lineHeight: 40,
                    borderRadius: 8,
                    offsetCenter: [0, '-15%'],
                    fontSize: 20,
                    fontWeight: 'bolder',
                    formatter: '{value}',
                    color: 'inherit',
                    show: true
                },
                data: [
                    {
                        name: 'SCORE',
                        value: 0
                    }
                ]
            }
        ]
    };

    var myChart1 = null;
    var myChart2 = null;
    var myChart3 = null;

    //window.onresize = function () {
    //    myChart1 = echarts.init(document.getElementById('main1'));
    //    myChart2 = echarts.init(document.getElementById('main2'));
    //    myChart3 = echarts.init(document.getElementById('main3'));
    //    GetOverview();
    //    setInterval(function () {

    //        GetOverview();
    //    }, 3000)
    //}

    $(function () {

        myChart1 = echarts.init(document.getElementById('main1'));
        myChart2 = echarts.init(document.getElementById('main2'));
        myChart3 = echarts.init(document.getElementById('main3'));
        // GetOverview();
        setInterval(function () {

            GetOverview();
        }, 1000)


    })
    //$(window).resize(function () {
    //    myChart1 = echarts.init(document.getElementById('main1'));
    //    myChart2 = echarts.init(document.getElementById('main2'));
    //    myChart3 = echarts.init(document.getElementById('main3'));
    //    GetOverview();
    //    setInterval(function () {

    //        GetOverview();
    //    }, 3000)
    //});


    function GetOverview() {
        $.ajax({
            url: "/Overview/GetOverview",
            type: 'get',
            dataType: "json",
            success: function (msg) {
                if (msg.Code == 1) {

                    option.series[0].detail.formatter = '{value} %';
                    option.series[0].max = msg.Obj.Cpu.Total;
                    option.series[0].data[0].name = 'CPU';
                    option.series[0].data[0].value = msg.Obj.Cpu.Used;
                    myChart1.setOption(option);
                    option.series[0].detail.formatter = '{value} MB';
                    option.series[0].max = msg.Obj.Ram.Total;
                    option.series[0].data[0].name = 'Ram';
                    option.series[0].data[0].value = msg.Obj.Ram.Used;
                    myChart2.setOption(option);
                    option.series[0].detail.formatter = '{value} G';
                    option.series[0].max = msg.Obj.Size.Total;
                    option.series[0].data[0].name = 'Size';
                    option.series[0].data[0].value = msg.Obj.Size.Used;
                    myChart3.setOption(option);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {

            },
            complete: function () {
            }
        });


    }


</script>

