/*Echarts图表封装*/

//横向柱状图
const horizontalBarChart = (res, ids) => {

    let mycharts = echarts.init(ids);

    //参考：https://www.makeapie.com/editor.html?c=xqjNqqjc_U
    let datas = [
        {ranking: 1, station: "SC227", value: 199999},
        {ranking: 2, station: "SC228", value: 104970},
        {ranking: 3, station: "SC229", value: 29034},
        {ranking: 4, station: "SC223", value: 23489},
        {ranking: 5, station: "SC224", value: 18203},
    ];
    let seriesName = "产量";

    function contains(arr, dst) {
        var i = arr.length;
        while ((i -= 1)) {
            if (arr[i] == dst) {
                return i;
            }
        }
        return false;
    }

    let attackSourcesColor = [
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            {offset: 0, color: "#EB3B5A"},
            {offset: 1, color: "#FE9C5A"},
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            {offset: 0, color: "#FA8231"},
            {offset: 1, color: "#FFD14C"},
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            {offset: 0, color: "#F7B731"},
            {offset: 1, color: "#FFEE96"},
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            {offset: 0, color: "#395CFE"},
            {offset: 1, color: "#2EC7CF"},
        ]),
    ];
    let attackSourcesColor1 = [
        "#EB3B5A",
        "#FA8231",
        "#F7B731",
        "#3860FC",
        "#1089E7",
        "#F57474",
        "#56D0E3",
        "#1089E7",
        "#F57474",
        "#1089E7",
        "#F57474",
        "#F57474",
    ];
    let stationData = [];
    let values = [];

    res.datas.forEach(function (it, index) {
        stationData.push(it.station);
        values.push(it.value);
    });

    function dataFormat(data) {
        let arr = [];
        data.forEach(function (item, i) {
            let itemStyle = {
                color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
            };
            arr.push({
                value: item,
                itemStyle: itemStyle,
            });
        });
        return arr;
    }

    let option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        grid: {
            top: "9%",
            left: "-9%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        xAxis: {
            type: "value",
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
        },
        yAxis: [
            {
                type: "category",
                inverse: true,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                data: stationData,
                axisLabel: {
                    margin: 30,
                    fontSize: 10,
                    align: "left",
                    padding: [2, 0, 0, 0],
                    color: "#000",

                    formatter: function (value, index) {

                    },
                },
            },
            {
                type: "category",
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                    textStyle: {
                        color: "#A8A6AB",
                        fontSize: "12",
                    },
                },
                data: dataFormat(values),
            },

            {
                type: "category",
                inverse: true,
                offset: -10,
                position: "left",
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                    interval: 0,
                    color: ["#A8A6AB"],
                    align: "left",
                    verticalAlign: "bottom",
                    lineHeight: 32,
                    fontSize: 12,
                },
                data: dataFormat(stationData),
            },
        ],
        series: [
            {
                zlevel: 1,
                name: seriesName,
                type: "bar",
                barWidth: 15,
                data: dataFormat(values),
                align: "center",
                itemStyle: {
                    normal: {
                        barBorderRadius: 10,
                    },
                },
                label: {
                    show: false,
                    fontSize: 12,
                    color: "#A8A6AB",
                    textBorderWidth: 2,
                    padding: [2, 0, 0, 0],
                },
            },
            {
                name: seriesName,
                type: "bar",
                barWidth: 15,
                barGap: "-100%",
                data: res.plan,
                itemStyle: {
                    normal: {
                        color: "#05325F",
                        //width:"100%",
                        fontSize: 12,
                        barBorderRadius: 30,
                    },
                },
            },
        ],
    };

    mycharts.setOption(option);
    $(window).resize(mycharts.resize);
}

//折线面积图
const brokenLineAreaDiagram = (res, ids) => {
    let mycharts = echarts.init(ids);

    let option = {
        tooltip: {},
        grid: {
            top: "8%",
            left: "1%",
            right: "1%",
            bottom: "8%",
            containLabel: true,
        },
        legend: {
            itemGap: 50,
            data: ["人员出入总数"],
            textStyle: {
                color: "#f9f9f9",
                borderColor: "#fff",
            },
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: "#2A3852",
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: "#A8A6AB",
                        margin: 15,
                    },
                },
                axisTick: {
                    show: false,
                },
                data: [
                    "07",
                    "08",
                    "09",
                    "10",
                    "11",
                    "12",
                    "13",
                ],
            },
        ],
        yAxis: [
            {
                type: "value",
                min: 0,
                // max: 140,
                splitNumber: 7,
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "#0a3256",
                    },
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                    margin: 20,
                    textStyle: {
                        color: "#A8A6AB",
                    },
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "小时产量",
                type: "line",
                smooth: false, //是否平滑曲线显示
                showAllSymbol: true,
                symbol: "emptyCircle",
                symbolSize: 6,
                lineStyle: {
                    normal: {
                        color: "#13D064", // 线条颜色
                    },
                    borderColor: "#f0f",
                },
                label: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "#28ffb3",
                    },
                },
                itemStyle: {
                    normal: {
                        color: "#28ffb3",
                    },
                },
                tooltip: {
                    show: false,
                },
                areaStyle: {
                    //区域填充样式
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(19,208,100,1)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(0,0,0, 0)",
                                },
                            ],
                            false
                        ),
                        shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                        shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    },
                },
                data: [100, 120, 110, 60, 70, 130, 150],
            }
        ],
    };

    mycharts.setOption(option);
    $(window).resize(mycharts.resize);
}

//柱状图
const threeDimensionalCylindrical = (res, ids) => {
    let mycharts = echarts.init(ids);


    let xAxisData = [];
    let seriesData1 = [];
    let sum = 0;

    let barTopColor = ["#02c3f1"];
    let barBottomColor = [
        "rgba(2,195,241,0.1)",
    ];
    res.datas.forEach((item) => {
        xAxisData.push(item.name);
        seriesData1.push(item.value);
        sum += item.value;
    });
    let option = {

        grid: {
            top: "15%",
            bottom: "20%",
        },
        xAxis: {
            data: xAxisData,
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                margin: 25,
                align: "center",
                textStyle: {
                    fontSize: 14,
                    color: "#A8A6AB",
                    rich: {
                        a: {
                            fontSize: 12,
                            color: "#ffffff",
                        },
                        b: {
                            height: 20,
                            fontSize: 14,
                            color: "#ffffff",
                        },
                    },
                },
            },
            interval: 0,
        },
        yAxis: {
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
        },
        series: [
            {
                name: "柱顶部",
                type: "pictorialBar",
                symbolSize: [26, 10],
                symbolOffset: [0, -5],
                z: 12,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return barTopColor[0];
                        },
                    },
                },
                label: {
                    show: true,
                    position: "top",
                    fontSize: 16,
                },
                symbolPosition: "end",
                data: seriesData1,
            },
            {
                name: "柱底部",
                type: "pictorialBar",
                symbolSize: [26, 10],
                symbolOffset: [0, 5],
                z: 12,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return barTopColor[0];
                        },
                    },
                },
                data: seriesData1,
            },
            {
                name: "第一圈",
                type: "pictorialBar",
                symbolSize: [47, 16],
                symbolOffset: [0, 11],
                z: 11,
                itemStyle: {
                    normal: {
                        color: "transparent",
                        borderColor: barTopColor[0],
                        borderWidth: 4,
                    },
                },
                data: [seriesData1[0], "", ""],
            },
            {
                name: "第一圈",
                type: "pictorialBar",
                symbolSize: [47, 16],
                symbolOffset: [0, 11],
                z: 11,
                itemStyle: {
                    normal: {
                        color: "transparent",
                        borderColor: barTopColor[0],
                        borderWidth: 4,
                    },
                },
                data: ["", seriesData1[1], ""],
            },
            {
                name: "第一圈",
                type: "pictorialBar",
                symbolSize: [47, 16],
                symbolOffset: [0, 11],
                z: 11,
                itemStyle: {
                    normal: {
                        color: "transparent",
                        borderColor: barTopColor[0],
                        borderWidth: 4,
                    },
                },
                data: ["", "", seriesData1[2]],
            },
            {
                name: "第二圈",
                type: "pictorialBar",
                symbolSize: [62, 22],
                symbolOffset: [0, 17],
                z: 10,
                itemStyle: {
                    normal: {
                        color: "transparent",
                        borderColor: barTopColor[0],
                        borderWidth: 4,
                    },
                },
                data: [seriesData1[0], "", ""],
            },
            {
                name: "第二圈",
                type: "pictorialBar",
                symbolSize: [62, 22],
                symbolOffset: [0, 17],
                z: 10,
                itemStyle: {
                    normal: {
                        color: "transparent",
                        borderColor: barTopColor[0],
                        borderWidth: 4,
                    },
                },
                data: ["", seriesData1[1], ""],
            },
            {
                name: "第二圈",
                type: "pictorialBar",
                symbolSize: [62, 22],
                symbolOffset: [0, 17],
                z: 10,
                itemStyle: {
                    normal: {
                        color: "transparent",
                        borderColor: barTopColor[0],
                        borderWidth: 4,
                    },
                },
                data: ["", "", seriesData1[2]],
            },

            {
                type: "bar",
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 1,
                                    color: barTopColor[0],
                                },
                                {
                                    offset: 0,
                                    color: barBottomColor[0],
                                },
                            ]);
                        },
                        opacity: 0.8,
                    },
                },
                z: 16,
                silent: true,
                barWidth: 26,
                barGap: "-100%", // Make series be overlap
                data: seriesData1,
            },
        ],
    };


    mycharts.setOption(option);
    $(window).resize(mycharts.resize);
}