$(window).load(function () { $(".loading").fadeOut() })

$(function () {

    echarts_1();
    echarts_2();
    echarts_3();

    var total = 560;
    zb1(total, 240);
    zb2(total, 240);
    zb3(total, 40);
    zb4(total, 40);

    $('.marquee').liMarquee({
        direction: 'up',//身上滚动
        runshort: true,//内容不足时不滚动
        scrollamount: 20//速度
    });

    /*3D标签云*/
    tagcloud({
        selector: ".tagcloud",  //元素选择器
        fontsize: 6,       //基本字体大小, 单位px
        radius: 40,         //滚动半径, 单位px 页面宽度和高度的五分之一
        mspeed: "slow",   //滚动最大速度, 取值: slow, normal(默认), fast
        ispeed: "slow",   //滚动初速度, 取值: slow, normal(默认), fast
        direction: 0,     //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
        keep: false          //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
    });

})

function echarts_1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_1'));

    var data = [
        { value: 400, name: '空闲' },
        { value: 150, name: '占用' },
        { value: 10, name: '维修' },

    ];

    option = {
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {
            trigger: 'item',
            formatter: "{b}: <br/>{c} ({d}%)"
        },
        color: ['#20b9cf', '#2089cf', '#205bcf'],
        legend: { //图例组件，颜色和名字
            x: '70%',
            y: 'center',
            orient: 'vertical',
            itemGap: 12, //图例每项之间的间隔
            itemWidth: 10,
            itemHeight: 10,
            icon: 'rect',
            data: data,
            textStyle: {
                color: [],
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 20,
            }
        },
        series: [{
            name: '行业占比',
            type: 'pie',
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ['35%', '50%'], //饼图的中心（圆心）坐标
            radius: [40, 100], //饼图的半径
            //  avoidLabelOverlap: true, ////是否启用防止标签重叠
            itemStyle: { //图形样式
                normal: {
                    borderColor: 'transparent',
                    borderWidth: 2,
                },
            },
            label: { //标签的位置
                normal: {
                    show: true,
                    position: 'inside', //标签的位置
                    formatter: "{c} : {d}%",
                    textStyle: {
                        color: '#fff',
                    }
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontWeight: 'bold'
                    }
                }
            },
            data: data
        }, {
            name: '',
            type: 'pie',
            clockwise: false,
            silent: true,
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ['35%', '50%'], //饼图的中心（圆心）坐标
            radius: [0, 100], //饼图的半径
            itemStyle: { //图形样式
                normal: {
                    borderColor: '#1e2539',
                    borderWidth: 1.5,
                    opacity: 0.5,
                }
            },
            label: { //标签的位置
                normal: {
                    show: false,
                }
            },
            data: data
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function echarts_2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_2'));

    var xData = function () {
        var data = ['星期一', '星期二', '星期三', '星期四', '星期四五', '星期六',  '星期天'];

        return data;
    }();

    var data = [700, 650, 450, 750, 600, 800, 900]

    option = {
        // backgroundColor: "#141f56",

        tooltip: {
            show: "true",
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.4)', // 背景
            padding: [8, 10], //内边距
            // extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
            formatter: function (params) {
                if (params.seriesName != "") {
                    return params.name + ' ：  ' + params.value + ' kW·h ';
                }
            },
        },
        grid: {
            borderWidth: 0,
            top: 20,
            bottom: 35,
            left: 40,
            right: 10,
            textStyle: {
                color: "#fff"
            }
        },
        xAxis: [{
            type: 'category',

            axisTick: {
                show: false
            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.2)',
                }
            },
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#bac0c0',
                    fontWeight: 'normal',
                    fontSize: '12',
                },
            },
            data: xData,
        }],
        yAxis: {
            min: 10,
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.2)',
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)',
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#bac0c0',
                    fontWeight: 'normal',
                    fontSize: '12',
                },
                formatter: '{value}',
            },
        },
        series: [{
            type: 'bar',
            itemStyle: {
                normal: {
                    show: true,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#00c0e9'
                    }, {
                        offset: 1,
                        color: '#3b73cf'
                    }]),
                    barBorderRadius: 50,
                    borderWidth: 0,
                },
                emphasis: {
                    shadowBlur: 15,
                    shadowColor: 'rgba(105,123, 214, 0.7)'
                }
            },
            zlevel: 2,
            barWidth: '20%',
            data: data,
        }]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
function echarts_3() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_3'));

    var xData = function () {
        var data = ['星期一', '星期二', '星期三', '星期四', '星期四五', '星期六',  '星期天'];

        return data;
    }();

    var data = [120, 200, 150, 180, 140, 220, 250]

    option = {
        // backgroundColor: "#141f56",

        tooltip: {
            show: "true",
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.4)', // 背景
            padding: [8, 10], //内边距
            // extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
            formatter: function (params) {
                if (params.seriesName != "") {
                    return params.name + ' ：  ' + params.value + ' kW·h ';
                }
            },
        },
        grid: {
            borderWidth: 0,
            top: 20,
            bottom: 35,
            left: 40,
            right: 10,
            textStyle: {
                color: "#fff"
            }
        },
        xAxis: [{
            type: 'category',

            axisTick: {
                show: false
            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,.1)',
                }
            },
            axisLabel: {
                inside: false,
                textStyle: {
                    color: 'rgba(255,255,255,.7)',
                    fontWeight: 'normal',
                    fontSize: '12',
                },
            },
            data: xData,
        }],
        yAxis: {
            min: 10,
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,.1)',
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)',
                }
            },
            axisLabel: {
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                    fontWeight: 'normal',
                    fontSize: '12',
                },
                formatter: '{value}',
            },
        },
        series: [{
            type: 'bar',
            itemStyle: {
                normal: {
                    show: true,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#fccb05'
                    }, {
                        offset: 1,
                        color: '#f5804d'
                    }]),
                    barBorderRadius: 50,
                    borderWidth: 0,
                },
                emphasis: {
                    shadowBlur: 15,
                    shadowColor: 'rgba(105,123, 214, 0.7)'
                }
            },
            zlevel: 2,
            barWidth: '20%',
            data: data,
        }]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function zb1(total, val) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('zb1'));
    option = {
        series: [{
            type: 'pie',
            radius: ['60%', '70%'],
            color: '#49bcf7',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: val,
                name: '男厕比例',
                label: {
                    normal: {
                        formatter: Math.round(val / total * 100) + '%',
                        textStyle: {
                            fontSize: 30,
                            color: '#fff',
                        }
                    }
                }
            },
            {
                value: total,
                label: {
                    normal: {
                        formatter: function (params) {
                            return '男厕比例'
                        },
                        textStyle: {
                            color: '#aaa',
                            fontSize: 16
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,.2)'
                    },
                    emphasis: {
                        color: '#fff'
                    }
                },
            }]
        }]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
function zb2(total, val) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('zb2'));
    option = {
        //animation: false,
        series: [{
            type: 'pie',
            radius: ['60%', '70%'],
            color: '#49bcf7',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: val,
                name: '女厕比例',
                label: {
                    normal: {
                        formatter: Math.round(val / total * 100) + '%',
                        textStyle: {
                            fontSize: 24,
                            color: '#fff',
                        }
                    }
                }
            }, {
                value: total,
                label: {
                    normal: {
                        formatter: function (params) {
                            return '女厕比例'
                        },
                        textStyle: {
                            color: '#aaa',
                            fontSize: 16
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,.2)'
                    },
                    emphasis: {
                        color: '#fff'
                    }
                },
            }]
        }]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
function zb3(total, val) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('zb3'));
    option = {
        series: [{

            type: 'pie',
            radius: ['60%', '70%'],
            color: '#62c98d',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: val,
                name: '童厕比例',
                label: {
                    normal: {
                        formatter: Math.round(val / total * 100) + '%',
                        textStyle: {
                            fontSize: 24,
                            color: '#fff',
                        }
                    }
                }
            }, {
                value: total,
                label: {
                    normal: {
                        formatter: function (params) {
                            return '童厕比例'
                        },
                        textStyle: {
                            color: '#aaa',
                            fontSize: 16
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,.2)'
                    },
                    emphasis: {
                        color: '#fff'
                    }
                },
            }]
        }]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
function zb4(total, val) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('zb4'));
    option = {
        series: [{

            type: 'pie',
            radius: ['60%', '70%'],
            color: '#29d08a',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: val,
                name: '残疾厕比例',
                label: {
                    normal: {
                        formatter: Math.round(val / total * 100) + '%',
                        textStyle: {
                            fontSize: 24,
                            color: '#fff',
                        }
                    }
                }
            }, {
                value: total,
                label: {
                    normal: {
                        formatter: function (params) {
                            return '残疾厕所比例'
                        },
                        textStyle: {
                            color: '#aaa',
                            fontSize: 16
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,.2)'
                    },
                    emphasis: {
                        color: '#fff'
                    }
                },
            }]
        }]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}