<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--    <script type="text/javascript" src="/css/_file/js/echarts.common.min.js" ></script>-->
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #line{
            width:550px;
            height: 140px;
        }
    </style>
</head>
<body>

<div class="box">
    <div id="line"></div>
</div>
<script src="/css/_files/js/jquery.js"></script>
<script src="/css/_files/js/echarts.min.js"></script>
<script src="/css/_files/js/jquery.liMarquee.js"></script>
<script src="/css/_files/js/macarons.js"></script>
<script>

    // dataMonth = [date.getMonth()-1,date.getMonth(),date.getMonth()+1];
    // $.ajax({
    //     url: "/bjtj/bjtj/selMonth",
    //     type: "post",
    //     dataType: 'json',
    //     data: {},
    //     success: function (data) {
    //         var myDate = new Date();
    //         var year = myDate.getFullYear();
    //         var month3 = myDate.getMonth()+1;
    //         var month1 = 0;
    //         var month2 = 0;
    //         if(month3 - 2 <= 0){
    //             month1 = month3+12-2;
    //         }else{
    //             month1 = month3-2;
    //         }
    //         if(month3 - 1 <= 0){
    //             month2 = month3+12-1;
    //         }else{
    //             month2 = month3-1;
    //         }
    //         headData = [month1+"月",month2+"月",month3+"月"];
    //         bodyData = [data.twoMonthBeforeCount,data.oneMonthBeforeCount,data.currentMonthCount];
    //         echarts1();
    //     }
    // });
    var headData = [];
    var bodyData = [];
    //月
    var dataMonth = [];
    let date=new Date();
    for(var mon=1;mon<=date.getMonth();mon++){
        dataMonth+=mon;
    }
    $.ajax({
        url: "/bjtj/bjtj/selMonthes",
        type: "post",
        dataType: 'json',
        data: {},
        success: function (data) {
            console.log(data);
            var monthDate=[];
            var numDate=[];
            var twe =0
            for (var i = 0; i <data.length ; i++) {
                console.log(data[i]);
                monthDate.push(data[i].month_num+"月");
                numDate.push(data[i].num)
                twe +=data[i].num;
            }
            headData = monthDate;
            bodyData = numDate;
            echarts1();
        }
    });
  /*  echarts1();*/
    function echarts1() {
        var myChart = echarts.init(document.querySelector("#line"),'macarons');
        var option = {
    color: ['#7dffff'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
    },

    grid: {
        left: '1%',
		top:'30px',
        right: '5%',
        bottom: '1%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            // data: ['1', '2', '3'],
            data: headData,
            axisTick: {
                alignWithLabel: true
            },
			axisLabel: {
                    show: true,
                    margin: 10,
                    textStyle: {
                        color: '#81b7db',
                        fontSize: '14',
                    },
                },
        }
    ],
    yAxis: [
        {
            type: 'value',
			axisLabel: {
                    show: true,
                    margin:20,
                    textStyle: {
                        color: '#81b7db',
                        fontSize: '14',
                    },
                },
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: bodyData
           // data: [1080, 99, 1170]
        }
    ]
};
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
</script>

</body>
</html>