let layer,table;
let myChart = echarts.init(document.getElementById('tendency'));
layui.use(['layer','table'], function () {
    layer = layui.layer;
	table = layui.table;
	init();
	inits();
	initEchartsOne();
});


function init(){
	var data = [
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'}
	    ];
	    table.render({
	        elem: '#demo1',
	        data: data,
	        skin: 'line',
	        page: true,
	        cols: [[
	            {field: 'id', title: '排名',align:'center'},
	            {field: 'proName', title: '工程名称',align:'center'},
	            {field: 'teamName', title: '班组名称',align:'center'},
	            {field: 'teamLeader', title: '班组长',align:'center'},
	            {field: 'quality', title: '施工质量',align:'center'},
	        ]]
	    })
}

function inits(){
	var data = [
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
	        {id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'}
	    ];
	    table.render({
	        elem: '#demo2',
	        data: data,
	        skin: 'line',
	        page: true,
	        cols: [[
	            {field: 'id', title: '排名',align:'center'},
	            {field: 'proName', title: '工程名称',align:'center'},
	            {field: 'teamName', title: '班组名称',align:'center'},
	            {field: 'teamLeader', title: '班组长',align:'center'},
	            {field: 'quality', title: '施工质量',align:'center'},
	        ]]
	    })
}

/* 变化趋势 */
function initEchartsOne() {
    let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
    let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42];
    const tooltip = {
        show: true,
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
        textStyle: {
            color: fontColor,
            fontFamily: fontFamily
        },
        borderColor: "rgba(255,255,255, .5)",
    };
    let option = {
        backgroundColor: 'transparent',
        tooltip,
        legend: {
            show: false,
        },
        grid: {
            top: '25%',
            left: '5%',
            right: '5%',
            bottom: '15%',
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#5A6E71',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: false,
                },
                data: xLabel,
            },
        ],
        yAxis: [
            {
                name: "",
                nameTextStyle: {
                    color: fontColor,
                    fontSize: fontSize,
                    padding: [0, 60, 0, 0],
                    fontFamily: fontFamily
                },
                // minInterval: 1,
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#25393B',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#008de7',
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    }
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '周计划数',
                type: 'line',
                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                smooth: true,
                lineStyle: {
                    normal: {
                        width: 3,
                        // color: '#1ED6FF', // 线条颜色
						color: new echarts.graphic.LinearGradient(
						    0,
						    0,
						    0,
						    1,
						    [
						        {
						            offset: 0,
						            color: '#0DF0FD',
						        },
						        {
						            offset: 0.6,
						            color: '#00F1D4',
						        },
						        {
						            offset: 1,
						            color: '#0EEEFC',
						        },
						    ],
						    false
						),
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#1ED6FF',//拐点颜色
                        // borderColor: '#fff600',//拐点边框颜色
                        // borderWidth: 13//拐点边框大小
                        label: {
                            show: true, //开启显示
                            color: fontColor,
                            fontFamily: fontFamily,
                            position: 'top', //在上方显示
                            formatter: function (res) {
                                if (res.value) {
                                    return res.value
                                } else {
                                    return 0
                                }
                            },
                        },
                    },

                },
                symbolSize: 8,   //设定实心点的大小
                areaStyle: {
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: '#01DDE9',
                                },
                                {
                                    offset: 0.6,
                                    color: '#086A79',
                                },
                                {
                                    offset: 1,
                                    color: '#0D3134',
                                },
                            ],
                            false
                        ),
                    },
                },
                data: dataValue,
            }
        ]
    }
    myChart.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}