$(function () {

    const axiosConf = { url: config_serverIp + "/dataex/report/QuerySimpleGP", method: 'post' };




    // 标题增加年份
    l1();
    l2();
    c1();
    c2();
    c3();
    r1();
    r2();


    function l1() {


        axios({
            ...axiosConf,
            data: {
                "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                "query": {
                    "query_id": "stage_login_num_all",
                    "query_param": [
                        "1"
                    ]
                },
                "query_cache": 0,
                "query_count": [
                    "total"
                ],
                "query_format": "echarts",
                "query_group": [
                    "org_name",
                    "social_name"
                ]
            }
        })
            .then((response) => {
                const resData = JSON.parse(response.data.result)

                const xAxisName = resData.groups[0].map((e, i) => {
                    return e.replace("唐山市", "")
                })
                const legendData = resData.groups[1]

                let series = []
                resData.groups[1].map((e, i) => {

                    series.push({
                        name: e,
                        type: 'bar',
                        data: resData.datas[i],
                        barMaxWidth: 20,
                    })

                })

                // ===========================================

                var myChart = echarts.init(document.getElementById('l1'));  // 各阶段学校数量
                option = {
                    // height: "100px",
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },

                    textStyle: {
                        color: '#01DFF4'
                    },
                    grid: {
                        top: 50,
                        right: 10,
                        bottom: 80,
                    },
                    color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
                    legend: {
                        data: legendData,
                        itemWidth: 8,
                        itemHeight: 8,
                        right: 10,
                        top: 10,
                        textStyle: {
                            color: '#01DFF4'
                        },
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xAxisName,
                            axisLine: {
                                lineStyle: {
                                    color: '#01DFF4' //更改坐标轴颜色
                                }
                            },
                            axisLabel: {
                                rotate: 30,
                                fontSize: 10
                            }

                        },

                    ],
                    yAxis: [

                        {
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: '#01DFF4' //更改坐标轴颜色
                                }
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            type: "slider",   //slider:滑块  inside:内置，依靠鼠标滚轮或者双击缩放
                            xAxisIndex: 0,   //显示x轴滑块
                            height: "15px",
                            end: 80,
                            top: "95%"
                        }
                    ],
                    series: series
                };


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

            })

    }
    function l2() {


        axios({
            ...axiosConf,
            data: {
                "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                "query": {
                    "query_id": "post_total_all",
                    "query_param": [
                    ]
                },
                "query_cache": 0,
                "query_count": [
                    "total"
                ],
                "query_format": "json",
                "query_group": [
                    "social_typename",
                    "social_name"
                ]
            }
        })
            .then((response) => {
                const resData = JSON.parse(response.data.result)
                console.log(resData, 'resData');
                // 获取学科
                const xueke = [];

                resData.map((item) => {
                    xueke.push({ id: item.social_type, name: item.social_typename, total: item.total });
                })

                // 去重
                xuekeFil = xueke.filter((item, index) => {
                    return xueke.findIndex(_item => _item.id == item.id) == index;
                })
                xuekeFil.map((e, index) => {
                    console.log(e, 'e');
                    let num = 0
                    resData.map((item, i) => {

                        if (item.social_typename == e.name) {
                            num += Number(item.total)
                        }

                    })
                    $("#num" + i).html(fwSum)
                    console.log(num, 'num');
                })


            })

    }


    function c1() {

        axios({
            ...axiosConf,
            data: {
                "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                "query": {
                    "query_id": "stage_org_social_all",
                    "query_param": [
                        "1"
                    ]
                },
                "query_cache": 0,
                "query_count": [
                    "total"
                ],
                "query_format": "echarts",
                "query_group": [
                    "org_name",
                    "topic_name"
                ]
            }
        })
            .then((response) => {
                const resData = JSON.parse(response.data.result)
                console.log(resData)
                const xAxisName = resData.groups[0].map((e, i) => {
                    return e.replace("唐山市", "")
                })
                const legendData = resData.groups[1]

                let series = []
                resData.groups[1].map((e, i) => {
                    series.push({
                        name: e,
                        type: 'bar',
                        stack: "all",
                        data: resData.datas[i],
                        barMaxWidth: 40,
                    })

                })

                console.log("xAxisName", xAxisName);
                console.log("legendData", legendData);
                console.log("series", series);


                var myChart = echarts.init(document.getElementById('c1'));  // 各阶段学校数量
                option = {
                    // height: "100px",
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    textStyle: {
                        color: '#01DFF4'
                    },
                    grid: {
                        top: 55,
                        bottom: 80,
                        right: 10
                    },
                    color: ["#0BCAEA", "#FE8E3A", "#3FDB94", "#4992FF", "#FF6E76"],
                    legend: {
                        data: legendData,
                        top: 15,
                        right: 10,
                        itemWidth: 8,
                        itemHeight: 8,
                        textStyle: {
                            color: '#01DFF4'
                        },
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xAxisName,
                            axisLine: {
                                lineStyle: {
                                    color: '#01DFF4' //更改坐标轴颜色
                                }
                            },
                            axisLabel: {
                                interval: 0,
                                fontSize: 10,
                                rotate: "35"
                            }
                        },

                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: '#01DFF4' //更改坐标轴颜色
                                }
                            }
                        },
                        {
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: '#01DFF4' //更改坐标轴颜色
                                }
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            type: "slider",   //slider:滑块  inside:内置，依靠鼠标滚轮或者双击缩放
                            xAxisIndex: 0,   //显示x轴滑块
                            height: "15px",
                            end: 80,
                            top: "95%"
                        }
                    ],
                    series: series
                };


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



    }
    function c2() {

        axios.all([
            axios({
                ...axiosConf,
                data: {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "login_num_all",
                        "query_param": []
                    },
                    "query_cache": 0,
                    "query_count": [
                        "total"
                    ],
                    "query_format": "echarts",
                    "query_group": [
                        "year_name"
                    ]
                }
            }),
            axios({
                ...axiosConf,
                data: {
                    "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                    "query": {
                        "query_id": "login_times_all",
                        "query_param": [
                        ]
                    },
                    "query_cache": 0,
                    "query_count": [
                        "total"
                    ],
                    "query_format": "echarts",
                    "query_group": [
                        "year_name",
                        "social_name"
                    ]
                }

            })
        ]).then(axios.spread(function (loginNumLineData, loginNumBarData) {

            const loginNumLine = JSON.parse(loginNumLineData.data.result)
            const loginNumBar = JSON.parse(loginNumBarData.data.result)
            const xAxisName = loginNumLine.groups[0]
            const legendData = ['登录人数', ...loginNumBar.groups[1]]
            // 循环显示柱形图。
            let loginNum = []
            loginNumBar.groups[1].map((e, i) => {
                loginNum.push({
                    name: e,
                    type: 'bar',
                    data: loginNumBar.datas[i],
                    barMaxWidth: 20,
                })

            })

            const lineData = loginNumLine.datas[0]

            var myChart = echarts.init(document.getElementById('c2'));  // 各阶段学校数量
            option = {
                // height: "100px",
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                textStyle: {
                    color: '#01DFF4'
                },
                grid: {
                    top: 35,
                    bottom: 30
                },
                color: ["#FFFF80", "#FF6E76", "#4992FF", "#3FDB94", "#FF6E76"],
                legend: {
                    data: legendData,
                    top: 10,
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        color: '#01DFF4'
                    },
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxisName,
                        axisLine: {
                            lineStyle: {
                                color: '#01DFF4' //更改坐标轴颜色
                            }
                        }
                    },

                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#01DFF4' //更改坐标轴颜色
                            }
                        }
                    },
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#01DFF4' //更改坐标轴颜色
                            }
                        },
                        splitLine: {//分割线配置
                            lineStyle: {
                                show: false,
                                color: "#010d5f",
                            }
                        },
                    }
                ],
                // dataZoom: [
                //     {
                //         type: "slider",   //slider:滑块  inside:内置，依靠鼠标滚轮或者双击缩放
                //         xAxisIndex: 0,   //显示x轴滑块
                //         height: "15px",
                //         end: 30,
                //     }
                // ],
                series: [
                    {
                        name: '登录人数',
                        type: 'line',
                        yAxisIndex: 1,
                        data: lineData,
                        symbolSize: 2,
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 1// 0.1的线条是非常细的了
                                }
                            }
                        },
                    },
                    ...loginNum
                ]
            };


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


        }));

    }




    function c3() {

        axios({
            ...axiosConf,
            data: {
                "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                "query": {
                    "query_id": "social_topic_chart_all",
                    "query_param": [
                    ]
                },
                "query_cache": 0,
                "query_count": [
                    "total"
                ],
                "query_format": "echarts",
                "query_group": [
                    "topic_name"
                ]
            }
        }).then((response) => {
            const resData = JSON.parse(response.data.result)
            const pieData = []
            resData.groups[0].map((e, i) => {
                pieData.push({
                    name: e,
                    value: resData.datas[0][i]
                })
            })

            var myChart = echarts.init(document.getElementById('c3'));  // 各阶段学校数量
            option = {
                // height: "100px",

                grid: {
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 0
                },
                color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],

                series: [
                    {
                        name: '主题活动',
                        type: 'pie',
                        radius: '50%',
                        data: pieData
                    },

                ]
            };

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

        })

    }

    function r1() {


        axios({
            ...axiosConf,
            data: {
                "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                "query": {
                    "query_id": "login_support_total_all",
                    "query_param": [
                    ]
                },
                "query_cache": 0,
                "query_count": [
                    "total",
                    "total2"
                ],
                "query_format": "echarts",
                "query_group": [
                    "org_name"
                ]
            }
        }).then((response) => {
            const resData = JSON.parse(response.data.result)
            const xAxisName = resData.groups[0].map((e, i) => {
                return e.replace("唐山市", "")
            })
            let fwSum = 0
            let gzSum = 0
            resData.datas[0].map((e) => {
                fwSum += Number(e)
            })
            resData.datas2[0].map((e) => {
                gzSum += Number(e)
            })

            $("#fwSum").html(fwSum)
            $("#gzSum").html(gzSum)
            var myChart = echarts.init(document.getElementById('r1'));  // 各阶段学校数量
            option = {
                // height: "100px",
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },

                textStyle: {
                    color: '#01DFF4'
                },
                grid: {
                    right: 10,
                    top: 50,
                    bottom: 80,
                },
                color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
                legend: {
                    data: ['访客数量', '关注情况'],
                    itemWidth: 8,
                    itemHeight: 8,
                    right: 10,
                    top: 15,
                    textStyle: {
                        color: '#01DFF4'
                    },

                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxisName,
                        axisLine: {
                            lineStyle: {
                                color: '#01DFF4' //更改坐标轴颜色
                            }
                        },
                        axisLabel: {
                            rotate: 30,
                            fontSize: 10
                        }
                    },
                ],
                yAxis: [

                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#01DFF4' //更改坐标轴颜色
                            }
                        }
                    }
                ],
                dataZoom: [
                    {
                        type: "slider",   //slider:滑块  inside:内置，依靠鼠标滚轮或者双击缩放
                        xAxisIndex: 0,   //显示x轴滑块
                        height: "15px",
                        end: 80,
                        top: "90%"
                    }
                ],
                series: [
                    {
                        name: '访客数量',
                        type: 'line',
                        data: resData.datas[0]
                    },
                    {
                        name: '关注情况',
                        type: 'line',
                        data: resData.datas2[0]
                    }

                ]
            };


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




    }
    function r2() {


        axios({
            ...axiosConf,
            data: {
                "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
                "query": {
                    "query_id": "stage_liveness_month",
                    "query_param": [
                        "1",
                        "2021",
                        "1",
                        "2021"
                    ]
                },
                "query_cache": 0,
                "query_count": [
                    "sub_total",
                    "total"
                ],
                "query_format": "echarts",
                "query_group": [
                    "org_name",
                    "social_typename"
                ]
            }
        }).then((response) => {
            const resData = JSON.parse(response.data.result)
            console.log("resData112", resData);
            const xAxisName = resData.groups[0].map((e, i) => {
                return e.replace("唐山市", "")
            })
            const legendData = resData.groups[1]

            let series = []
            resData.groups[1].map((e, i) => {
                series.push({
                    name: e,
                    type: 'bar',
                    data: resData.datas[i],
                    barMaxWidth: 20,
                })

            })
            // console.log("xAxisName", xAxisName);
            // console.log("legendData", legendData);
            // console.log("series", series);

            var myChart = echarts.init(document.getElementById('r2'));  // 各阶段学校数量
            option = {
                // height: "100px",
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },

                textStyle: {
                    color: '#01DFF4'
                },
                grid: {
                    top: 50,
                    bottom: 50,
                    left: 100
                },
                color: ["#0BCAEA", "#FE8E3A", "#3FDB94"],
                legend: {
                    top: 20,
                    data: legendData,
                    itemWidth: 8,
                    itemHeight: 8,
                    right: 20,
                    textStyle: {
                        color: '#01DFF4'
                    },
                },
                yAxis: [
                    {
                        type: 'category',
                        data: xAxisName,
                        axisLine: {
                            lineStyle: {
                                color: '#01DFF4' //更改坐标轴颜色
                            }
                        },
                        axisLabel: {
                            fontSize: 10
                        }

                    },

                ],
                xAxis: [

                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#01DFF4' //更改坐标轴颜色
                            }
                        },
                        axisLabel: {
                            fontSize: 14
                        }
                    }
                ],
                series: series
            };


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


        })

    }
})