<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style>
        a{
            color: #005980;
        }
        .widget-small{
            background-color: #FFFFFF;
            overflow: hidden;
            text-align: center;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .widget-small .fa{
            float: left;
            width: 40%;
            line-height: 80px;
            color: #FFFFFF;
        }
        .widget-user .fa{
            background-color: #029789;
        }
        .widget-visit .fa{
            background-color: #17a2b8;
        }
        .widget-message .fa{
            background-color: #fbad4c;
        }
        .widget-like .fa{
            background-color: #ff646d;
        }
        .widget-small-info{
            float: left;
            text-align: left;
            width: 40%;
            margin-left: 20px;
            margin-top: 18px;
            line-height: 24px;
        }
        .widget-small-info h4{
            font-size: 18px;
        }
        .widget-small-info span{
            font-size: 16px;
        }
        .project-introduce{
            min-height: 466px;
        }
        .project-introduce h4{
            font-weight: bold;
            margin-top: 12px;
            margin-bottom: 8px;
        }
        .project-introduce li{
            list-style: decimal;
            margin-left: 28px;
        }
        .alert {
            padding: 15px;
            margin-bottom: 10px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }
    </style>
</head>

<body class="timo-layout-page">
<div class="layui-row layui-col-space15">
    <div class="layui-col-md8">
        <div class="layui-card">
            <div class="layui-card-header">爬取统计</div>
            <div id="chart1" class="layui-card-body" style="width: 800px;height:400px;"></div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">解析统计</div>
            <div id="chart2" class="layui-card-body" style="width: 800px;height:400px;"></div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">爬虫</div>
            <div class="layui-card-body">
                <div id="chart4" class="layui-card-body" style="width: 400px;height:400px;"></div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/plugins/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/echarts-4.7.0/echarts.js}" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
    function chart1() {
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            legend: {
                data: ['npm', 'dotnetCore']
            },
            series: []
        };

        $.get('/api/spider/chart', function(result){
            if (result.code === 0) {
                option.xAxis.data = result.data.xAxisNames
                option.legend.data = result.data.names
                option.series = result.data.list

                var chart1 = echarts.init(document.getElementById('chart1'));
                chart1.setOption(option, true);
            }
        });
    }
    chart1()

    function chart2() {
        var chartZhu = echarts.init(document.getElementById('chart2'));
        //指定图表配置项和数据
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };
        chartZhu.setOption(option, true);
    }
    chart2()

    function chart4() {
        var option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'App Type',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 18,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 7, name: 'BiliVideoDataParser' },
                        { value: 3, name: 'BiliCommentDataParser' }
                    ]
                }
            ]
        };

        var chart4 = echarts.init(document.getElementById('chart4'));
        chart4.setOption(option, true);
    }
    chart4()
</script>
</body>
</html>