<!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/macarons.js"></script>


<script>

    var headData = ["周一","周二","周三","周四","周五","周六","周日"];
    var bodyData = [];
    $.ajax({
        url: "/bjtj/bjtj/selWeek",
        type: "post",
        dataType: 'json',
        data: {},
        success: function (data) {
            console.log("week"+data);
            bodyData = [data.周一,data.周二,data.周三,data.周四,data.周五,data.周六,data.周日];
            echarts1();
        }
    });


    /*echarts1();*/
    function echarts1() {
        var myChart = echarts.init(document.querySelector("#line"),'macarons');

        var option = {
            grid: {
                left: '1%',
                top:'30px',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,

                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    show: true,
                    margin: 20,
                    textStyle: {
                        color: '#81b7db',
                        fontSize: '14',

                    },
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    margin: 20,
                    textStyle: {
                        color: '#81b7db',
                        fontSize: '14',

                    },
                },
            },
            series: [{
                name:'123',
                data: bodyData,
               // data: [119, 142, 89, 116, 121, 43, 0],
                type: 'line',
                // symbolSize: 8,
                areaStyle: {},
                lineStyle: {
                    normal: {
                        color: "#81b7db",
                        shadowBlur: 0,
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#81b7db',
                    }
                },
                itemStyle: {
                    color: "#81b7db",
                    borderColor: "#fff",
                    borderWidth: 2,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                // areaStyle: {
                //     normal: {
                //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //             offset: 0,
                //             color: 'rgba(129,183,219,0.8)'
                //         },
                //             {
                //                 offset: 1,
                //                 color: 'rgba(129,183,219,0)'
                //             }
                //         ], false),
                //         shadowColor: 'rgba(129,183,219, 1)',
                //         shadowBlur: 20
                //     }
                // },
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });


    }
</script>

</body>
</html>