/*
* Echarts图表封装
* 横向柱状图：horizontalBarChart(res, ids)
* 折线图面积图：brokenLineAreaDiagram(res, ids)
* 立体柱状图：threeDimensionalCylindrical(res, ids)
* 多个折线面积图：multipleBrokenLineAreaDiagram(res, ids)
* 绿色多边形柱状图：greenPolygonalHistogram(res, ids)
* 蓝色多边形柱状图：bluePolygonHistogram(res, ids)T
* 多个立体柱状图：multipleThreeDimensionalCylindrical(res, ids)
* */

//横向柱状图
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: "15%",
            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: "25%",
            bottom: "25%",
        },
        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",
                    textStyle: {
                        color: "#02C3F1",
                    },
                },
                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);
}

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

    let option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                lineStyle: {
                    color: "#57617B",
                },
            },
        },
        legend: {
            icon: "rect",
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: ["1#ISO温度", "1#POL温度", "2#ISO温度", "2#POL温度"],
            left: "4%",
            textStyle: {
                fontSize: 12,
                color: "#F1F1F3",
            },
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        color: "#57617B",
                    },
                },
                data: [
                    "11:00",
                    "11:10",
                    "11:20",
                    "11:30",
                    "11:40",
                    "11:50",
                    "12:00",
                    "12:10",
                    "12:20",
                    "12:30",
                    "12:40",
                    "12:50",
                ],
            },
        ],
        yAxis: [
            {
                type: "value",
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: "#57617B",
                    },
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 14,
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "#57617B",
                    },
                },
            },
        ],
        series: [
            {
                name: "1#ISO温度",
                type: "line",
                smooth: false,
                lineStyle: {
                    normal: {
                        width: 1,
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(137, 189, 27, 0.3)",
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(137, 189, 27, 0)",
                                },
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)",
                        shadowBlur: 10,
                    },
                },
                itemStyle: {
                    normal: {
                        color: "rgb(137,189,27)",
                    },
                },
                data: [
                    96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7,
                ],
            },
            {
                name: "1#POL温度",
                type: "line",
                smooth: false,
                lineStyle: {
                    normal: {
                        width: 1,
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(0, 136, 212, 0.3)",
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0, 136, 212, 0)",
                                },
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)",
                        shadowBlur: 10,
                    },
                },
                itemStyle: {
                    normal: {
                        color: "rgb(0,136,212)",
                    },
                },
                data: [
                    97.3, 99.2, 99.3, 100.0, 99.6, 90.6, 80.0, 91.5, 69.8, 67.5, 90.4, 84.9,
                ],
            },
            {
                name: "2#ISO温度",
                type: "line",
                smooth: false,
                lineStyle: {
                    normal: {
                        width: 1,
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(219, 50, 51, 0.3)",
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(219, 50, 51, 0)",
                                },
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)",
                        shadowBlur: 10,
                    },
                },
                itemStyle: {
                    normal: {
                        color: "rgb(219,50,51)",
                    },
                },
                data: [
                    84.2, 81.0, 67.5, 72.1, 43.7, 88.5, 91.9, 101.8, 79.7, 87.6, 92.9, 0,
                ],
            },
            {
                name: "2#POL温度",
                type: "line",
                smooth: false,
                lineStyle: {
                    normal: {
                        width: 1,
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(31,97,244, 0.3)",
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(31,97,244, 0)",
                                },
                            ],
                            false
                        ),
                        shadowColor: "rgba(31,97,244, 0.1)",
                        shadowBlur: 10,
                    },
                },
                itemStyle: {
                    normal: {
                        color: "rgb(31,97,244)",
                    },
                },
                data: [
                    95.3, 26.4, 57.5, 75.6, 78.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7,
                ],
            },
        ],
    };


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

//绿色多边形柱状图
const greenPolygonalHistogram = (res, ids) => {
    let mycharts = echarts.init(ids);

    let option = {
        color: [
            "#68E683",
            "#58E28A",
            "#042A4F",
            "#042A4F",
            "#042A4F",
            "#6c93ee",
            "#a9abff",
            "#f7a23f",
            "#27bae7",
            "#ff6d9d",
            "#cb79ff",
            "#f95b5a",
            "#ccaf27",
            "#38b99c",
            "#93d0ff",
            "#bd74e0",
            "#fd77da",
            "#dea700",
        ],
        grid: {
            containLabel: true,
            left: 20,
            right: 20,
            bottom: 10,
            top: 20,
        },
        xAxis: {
            axisLabel: {
                color: "#c0c3cd",
                fontSize: 14,
                interval: 0,
            },
            axisTick: {
                lineStyle: {
                    color: "#384267",
                },
                show: true,
            },
            splitLine: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: "#384267",
                    width: 1,
                    type: "dashed",
                },
                show: true,
            },
            data: [
                "7点",
                "8点",
                "9点",
                "10点",
                "11点",
                "12点",
                "13点",
                "14点",
            ],
            type: "category",
        },
        yAxis: {
            show: false,
            axisLabel: {
                color: "#c0c3cd",
                fontSize: 14,
            },
            axisTick: {
                lineStyle: {
                    color: "#384267",
                    width: 1,
                },
                show: false,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#384267",
                    type: "dashed",
                },
            },
            axisLine: {
                lineStyle: {
                    color: "#384267",
                    width: 1,
                    type: "dashed",
                },
                show: false,
            },
            name: "",
        },
        series: [
            {
                data: [200, 85, 112, 275, 305, 415, 741, 405],
                type: "bar",
                barMaxWidth: "auto",
                barWidth: 30,
                itemStyle: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: "linear",
                        global: false,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#1FB55E",
                            },
                            {
                                offset: 1,
                                color: "#68E683",
                            },
                        ],
                    },
                },
                label: {
                    show: true,
                    position: "top",
                    distance: 10,
                    color: "#fff",
                },
            },
            {
                data: [1, 1, 1, 1, 1, 1, 1, 1],
                type: "pictorialBar",
                barMaxWidth: "20",
                symbol: "diamond",
                symbolOffset: [0, "50%"],
                symbolSize: [30, 15],
            },
            {
                data: [200, 85, 112, 275, 305, 415, 741, 405],
                type: "pictorialBar",
                barMaxWidth: "20",
                symbolPosition: "end",
                symbol: "diamond",
                symbolOffset: [0, "-50%"],
                symbolSize: [30, 12],
                zlevel: 2,
            },
            {
                data: [741, 741, 741, 741, 741, 741, 741, 741],
                type: "bar",
                barMaxWidth: "auto",
                barWidth: 30,
                barGap: "-100%",
                zlevel: -1,
            },
            {
                data: [1, 1, 1, 1, 1, 1, 1, 1],
                type: "pictorialBar",
                barMaxWidth: "20",
                symbol: "diamond",
                symbolOffset: [0, "50%"],
                symbolSize: [30, 15],
                zlevel: -2,
            },
            {
                data: [741, 741, 741, 741, 741, 741, 741, 741],
                type: "pictorialBar",
                barMaxWidth: "20",
                symbolPosition: "end",
                symbol: "diamond",
                symbolOffset: [0, "-50%"],
                symbolSize: [30, 12],
                zlevel: -1,
            },
        ],
        tooltip: {
            trigger: "axis",
            show: false,
        },
    };

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

//蓝色多边形柱状图
const bluePolygonHistogram = (res, ids) => {
    let mycharts = echarts.init(ids);

    let option = {
        color: [
            "#63caff",
            "#49beff",
            "#03387a",
            "#03387a",
            "#03387a",
            "#6c93ee",
            "#a9abff",
            "#f7a23f",
            "#27bae7",
            "#ff6d9d",
            "#cb79ff",
            "#f95b5a",
            "#ccaf27",
            "#38b99c",
            "#93d0ff",
            "#bd74e0",
            "#fd77da",
            "#dea700",
        ],
        grid: {
            containLabel: true,
            left: 20,
            right: 20,
            bottom: 10,
            top: 20,
        },
        xAxis: {
            axisLabel: {
                color: "#c0c3cd",
                fontSize: 14,
                interval: 0,
            },
            axisTick: {
                lineStyle: {
                    color: "#384267",
                },
                show: true,
            },
            splitLine: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: "#384267",
                    width: 1,
                    type: "dashed",
                },
                show: true,
            },
            data: [
                "7点",
                "8点",
                "9点",
                "10点",
                "11点",
                "12点",
                "13点",
                "14点",
            ],
            type: "category",
        },
        yAxis: {
            show: false,
            axisLabel: {
                color: "#c0c3cd",
                fontSize: 14,
            },
            axisTick: {
                lineStyle: {
                    color: "#384267",
                    width: 1,
                },
                show: false,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#384267",
                    type: "dashed",
                },
            },
            axisLine: {
                lineStyle: {
                    color: "#384267",
                    width: 1,
                    type: "dashed",
                },
                show: false,
            },
            name: "",
        },
        series: [
            {
                data: [200, 85, 112, 275, 305, 415, 741, 405],
                type: "bar",
                barMaxWidth: "auto",
                barWidth: 30,
                itemStyle: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: "linear",
                        global: false,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#0b9eff",
                            },
                            {
                                offset: 1,
                                color: "#63caff",
                            },
                        ],
                    },
                },
                label: {
                    show: true,
                    position: "top",
                    distance: 10,
                    color: "#fff",
                },
            },
            {
                data: [1, 1, 1, 1, 1, 1, 1, 1],
                type: "pictorialBar",
                barMaxWidth: "20",
                symbol: "diamond",
                symbolOffset: [0, "50%"],
                symbolSize: [30, 15],
            },
            {
                data: [200, 85, 112, 275, 305, 415, 741, 405],
                type: "pictorialBar",
                barMaxWidth: "20",
                symbolPosition: "end",
                symbol: "diamond",
                symbolOffset: [0, "-50%"],
                symbolSize: [30, 12],
                zlevel: 2,
            },
            {
                data: [741, 741, 741, 741, 741, 741, 741, 741],
                type: "bar",
                barMaxWidth: "auto",
                barWidth: 30,
                barGap: "-100%",
                zlevel: -1,
            },
            {
                data: [1, 1, 1, 1, 1, 1, 1, 1],
                type: "pictorialBar",
                barMaxWidth: "20",
                symbol: "diamond",
                symbolOffset: [0, "50%"],
                symbolSize: [30, 15],
                zlevel: -2,
            },
            {
                data: [741, 741, 741, 741, 741, 741, 741, 741],
                type: "pictorialBar",
                barMaxWidth: "20",
                symbolPosition: "end",
                symbol: "diamond",
                symbolOffset: [0, "-50%"],
                symbolSize: [30, 12],
                zlevel: -1,
            },
        ],
        tooltip: {
            trigger: "axis",
            show: false,
        },
    };


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

//多个立体柱状图
const multipleThreeDimensionalCylindrical = (res, ids) => {
    let mycharts = echarts.init(ids);
    let lineColor = "#406A92";
    let labelColor = "#fff";
    let fontSize = "12";
    let lineWidth = 1;
    let option = {
        grid: {
            left: "0%",
            right: "0%",
            top: "25%",
            bottom: "2%",
            containLabel: true,
        },
        tooltip: {
            show: true,
            trigger: "axis",
            textStyle: {
                fontSize: fontSize,
            },
        },
        legend: {
            show: true,
            x: "center",
            y: "1%",
            itemWidth: 10,
            itemHeight: 2,
            textStyle: {
                color: "#fff",
                fontSize: fontSize,
            },
            data: ["内胆库", "箱壳库"],
        },
        xAxis: [
            {
                type: "category",
                name: "",
                nameTextStyle: {
                    fontSize: fontSize,
                    color: labelColor,
                    lineHeight: 20,
                },
                axisLabel: {
                    color: labelColor,
                    fontSize: fontSize,
                    margin: 20,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: lineColor,
                        width: lineWidth,
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "#197584",
                    },
                },
                data: ["SC329", "SC528"],
            },
        ],
        yAxis: [
            {
                type: "value",
                name: "",
                nameTextStyle: {
                    fontSize: fontSize,
                    color: labelColor,
                },
                nameGap: 10,
                axisLabel: {
                    show: false,
                    formatter: "{value}",
                    margin: 10,
                    textStyle: {
                        color: labelColor,
                        fontSize: fontSize,
                    },
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: lineColor,
                        width: lineWidth,
                    },
                },
                splitArea: {
                    show: false,
                    areaStyle: {
                        color: ["rgba(128,160,176,.1)", "rgba(250,250,250,0)"],
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: lineColor,
                    },
                },
            },
        ],
        series: [
            {
                name: "",
                type: "pictorialBar",
                symbolSize: [26, 12],
                symbolOffset: [-39, -5],
                symbolPosition: "end",
                z: 12,
                tooltip: {
                    show: false,
                },
                label: {
                    normal: {
                        show: false,
                        position: "top",
                        fontSize: fontSize,
                        color: "#fff",
                    },
                },
                color: "#26B2E8",
                data: [99.9, 99.9],
            },
            {
                name: "",
                type: "pictorialBar",
                tooltip: {
                    show: false,
                },
                //外圈
                symbolSize: [37, 20],
                symbolOffset: [-39, 20],
                z: 10,
                itemStyle: {
                    normal: {
                        color: "transparent",
                        borderColor: "#2EA9E5",
                        borderType: "solid",
                        borderWidth: 20,
                    },
                },
                data: [99.9, 99.9],
            },
            {
                name: "",
                type: "pictorialBar",
                tooltip: {
                    show: false,
                },
                symbolSize: [50, 25],
                symbolOffset: [-39, 25],
                z: 10,
                itemStyle: {
                    normal: {
                        color: "transparent",
                        borderColor: "#26B2E8",
                        borderType: "solid",
                        borderWidth: 20,
                    },
                },
                data: [99.9, 99.9],
            },
            {
                name: "",
                type: "pictorialBar",
                symbolSize: [26, 12],
                tooltip: {
                    show: false,
                },
                symbolOffset: [-39, 5],
                z: 12,
                color: "#26B2E8",
                data: [99.9, 99.9],
            },
            {
                type: "bar",
                name: "箱壳库",
                barWidth: "26",
                barGap: "200%",
                barCateGoryGap: "10%",
                label: {
                    normal: {
                        show: true,
                        position: "top",
                        fontSize: fontSize,
                        color: "#fff",
                        opacity: 1,
                        formatter: "{c}%",
                        offset: [0, -20],
                    },
                },
                itemStyle: {
                    normal: {
                        color: "#1E93C6",
                        opacity: 1,
                    },
                },
                data: [99.9, 99.9],
            },
            {
                name: "",
                type: "pictorialBar",
                symbolSize: [26, 12],
                symbolOffset: [39, -5],
                symbolPosition: "end",
                z: 12,
                tooltip: {
                    show: false,
                },
                label: {
                    normal: {
                        show: false,
                        position: "top",
                        fontSize: fontSize,
                        color: "#fff",
                    },
                },
                color: "#20D3AB",
                data: [99.9, 99.9],
            },
            {
                name: "",
                type: "pictorialBar",
                tooltip: {
                    show: false,
                },
                symbolSize: [37, 20],
                symbolOffset: [39, 20],
                z: 10,
                itemStyle: {
                    normal: {
                        color: "transparent",
                        borderColor: "#20D3AB",
                        borderType: "solid",
                        borderWidth: 20,
                    },
                },
                data: [99.9, 99.9],
            },
            {
                name: "",
                type: "pictorialBar",
                tooltip: {
                    show: false,
                },
                symbolSize: [50, 25],
                symbolOffset: [39, 25],
                z: 10,
                itemStyle: {
                    normal: {
                        color: "transparent",
                        borderColor: "#20D3AB",
                        borderType: "solid",
                        borderWidth: 20,
                    },
                },
                data: [99.9, 99.9],
            },
            {
                name: "",
                type: "pictorialBar",
                symbolSize: [26, 12],
                tooltip: {
                    show: false,
                },
                symbolOffset: [39, 5],
                z: 12,
                color: "#20D3AB",
                data: [99.9, 99.9],
            },
            {
                type: "bar",
                name: "内胆库",
                barWidth: "26",
                barGap: "200%",
                barCateGoryGap: "10%",
                label: {
                    normal: {
                        show: true,
                        position: "top",
                        fontSize: fontSize,
                        color: "#fff",
                        formatter: "{c}%",
                        offset: [0, -20],
                    },
                },
                itemStyle: {
                    normal: {
                        color: "#1AAE96",
                        opacity: 1,
                    },
                },
                data: [99.9, 99.9],
            },
        ],
    };

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


//设备OEE统计
const OEEStatistics = (res, ids) => {
    let mycharts = echarts.init(ids);

    let option = {
        tooltip: {},
        grid: {
            top: "15%",
            left: "5%",
            right: "5%",
            bottom: "8%",
            containLabel: true,
        },
        legend: {
            itemGap: 50,
            data: ["人员出入总数"],
            textStyle: {
                color: "#f9f9f9",
                borderColor: "#fff",
            },
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                data: [
                    "11.01",
                    "11.02",
                    "11.03",
                    "11.04",
                    "11.05",
                    "11.06",
                ],
                min: 0,
                splitNumber: 4,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#0a3256",
                    },
                },
                axisLine: {
                    show: true,
                },
                axisLabel: {
                    show: true,
                    margin: 10,
                    textStyle: {
                        color: "#A8A6AB",
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgb(217,217,217,0.5)",
                        type: "dashed" //虚线
                        // width: 2
                    }
                }
            },
        ],
        yAxis: [
            {
                type: "value",
                min: 0,
                max: 60,
                interval: 20,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#0a3256",
                    },
                },
                axisLine: {
                    show: true,
                },
                axisLabel: {
                    show: true,
                    margin: 20,
                    textStyle: {
                        color: "#A8A6AB",
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgb(217,217,217,0.5)",
                        type: "dashed" //虚线
                        // width: 2
                    }
                }
            },
        ],
        series: [
            {
                name: "小时产量",
                type: "line",
                smooth: false, //是否平滑曲线显示
                showAllSymbol: true,
                symbol: "circle",
                symbolSize: 6,
                lineStyle: {
                    normal: {
                        color: "rgb(165,122,75)", // 线条颜色
                    },
                    borderColor: "#f0f",
                },
                label: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "#28ffb3",
                    },
                },
                itemStyle: {
                    normal: {
                        color: "rgb(9,24,51)",
                        borderColor: "rgb(165,122,75)",
                        borderWidth: 2,
                    },
                },
                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(102,64,38,1)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(0,0,0, 0)",
                                },
                            ],

                        ),
                        shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                        shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    },
                },
                data: [28, 39, 24, 45, 39, 42],
            }
        ],
    };

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


//库存情况
const inventory = (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)",
    ];
    let Res =
    {
        datas: [
            {
                name: 'SC-279',
                value: 2
            },
            {
                name: 'SC-606',
                value: 6
            },
            {
                name: 'SC-387NE',
                value: 31
            },
            {
                name: 'SC-329',
                value: 2
            },
            {
                name: 'SC-279',
                value: 9
            },
        ]
    }

    Res.datas.forEach((item) => {
        xAxisData.push(item.name);
        seriesData1.push(item.value);
        sum += item.value;
    });
    let option = {

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

            {
                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: 14,
                barGap: "-100%", // Make series be overlap
                data: seriesData1,
            },
        ],
    };


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


//loss
const loss = (res, ids) => {
    let mycharts = echarts.init(ids);

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

    let barTopColor = [
        "rgba(10,50,220)",
    ];
    let barBottomColor = [
        "rgba(40,140,210)",
    ];
    let Res =
    {
        datas:res.length > 0 ? res : [
            {
                name: '>30分钟',
                value: 2
            },
            {
                name: '3-10分钟',
                value: 6
            },
            {
                name: '0-3分钟',
                value: 9
            },
        ],
    }

    Res.datas.forEach((item) => {
        xAxisData.push(item.name);
        seriesData1.push(item.value);
        sum += item.value;
    });
    let option = {

        grid: {
            top: "25%",
            bottom: "25%",
        },
        xAxis: {
            axisTick: {
                show: false,
            },
            data: xAxisData,
            axisLine: {
                show: true,
            },
            axisLabel: {
                interval: 0,
                show: true,
                margin: 10,
                align: "center",
                textStyle: {
                    fontSize: 12,
                    color: "#A8A6AB",
                    rich: {
                        a: {
                            fontSize: 12,
                            color: "#ffffff",
                        },
                        b: {
                            height: 20,
                            fontSize: 14,
                            color: "#ffffff",
                        },
                    },
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgb(217,217,217,0.5)",
                    type: "dashed" //虚线
                    // width: 2
                }
            }
        },
        yAxis: {
            splitLine: {
                show: true,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
            },
            axisLabel: {
                show: true,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgb(217,217,217,0.5)",
                    type: "dashed" //虚线
                    // width: 2
                }
            }
        },
        series: [
            {
                name: "柱顶部",
                type: "pictorialBar",
                symbolSize: [35, 6],
                symbolOffset: [0, -3],
                z: 12,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return barTopColor[0];
                        },
                    },
                },
                label: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "#02C3F1",
                    },
                },
                symbolPosition: "end",
                data: seriesData1,
            },

            {
                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: 35,
                barGap: "-100%", // Make series be overlap
                data: seriesData1,
            },
        ],
    };


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


//设备故障排名
const equipmentFailure = (res, ids) => {
    let mycharts = echarts.init(ids);


    let stationData = [];
    let values = [];

    res.datas.forEach(function (it, index) {
        stationData.push(it.station);
        values.push(it.value);
    });
    let option = {
        grid: {
            top: '1%',
            left: '6%',
            right: '6%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            // type: "category",
            boundaryGap: false,
            min: 0,
            splitNumber: 4,
            splitLine: {
                show: true,
                lineStyle: {
                    color: "#0a3256",
                },
            },
            axisLine: {
                show: true,
            },
            axisLabel: {
                show: true,
                margin: 10,
                textStyle: {
                    color: "#A8A6AB",
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgb(217,217,217,0.5)",
                    type: "dashed" //虚线
                    // width: 2
                }
            },
            type: 'value',
        },
        yAxis: {
            axisTick: {
                show: false,
            },
            interval: 0,
            type: 'category',
            data: stationData,
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgb(217,217,217,0.5)",
                    type: "dashed" //虚线
                    // width: 2
                }
            },
            axisLabel: {
                interval: 0,
                show: true,
                margin: 25,
                align: "center",
                textStyle: {
                    fontSize: 12,
                    rich: {
                        a: {
                            fontSize: 12,
                            color: "#ffffff",
                        },
                        b: {
                            height: 20,
                            fontSize: 14,
                            color: "#ffffff",
                        },
                    },
                },
            },
        },
        series: [
            {
                name: "柱顶部",
                type: "pictorialBar",
                symbolSize: [6, 13],
                symbolOffset: [3, 0],
                z: 12,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return "rgba(10,50,220)";
                        },
                    },
                },
                symbolPosition: "end",
                data: values,
            },
            {
                name: '2011',
                type: 'bar',
                data: values,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                {
                                    offset: 1,
                                    color: "rgba(10,50,220)",
                                },
                                {
                                    offset: 0,
                                    color: "rgba(40,140,210)",
                                },
                            ]);
                        },
                        opacity: 0.8,
                    },
                },
            },
        ]
    };

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

// 设备产量能耗对比

const energyConsumption = (res, ids) => {
    let mycharts = echarts.init(ids);


    let stationData = [];
    let values = [];

    res.datas.forEach(function (it, index) {
        stationData.push(it.station);
        values.push(it.value);
    });
    let option = {
        grid: {
            top: '25%',
            left: '6%',
            right: '6%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
          {
            interval: 0,
            type: 'category',
            data: ['6-13', '6-14', '6-15', '6-16', '6-17'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '产量(t)',
            min: 0,
            max: 40,
            interval: 10,
            axisLabel: {
              formatter: '{value} ml'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgb(217,217,217,0.5)",
                    type: "dashed" //虚线
                    // width: 2
                }
            },
            axisLine: {
                show: true,
            },
          },
          {
            type: 'value',
            name: '能耗(kw·h)',
            min: 0,
            max: 20,
            interval: 5,
            axisLabel: {
              formatter: '{value} °C'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "rgb(217,217,217,0.5)",
                    type: "dashed" //虚线
                    // width: 2
                }
            },
            axisLine: {
                show: true,
            },
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: function (params) {
                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 1,
                                color:  "rgba(10,50,220)",
                            },
                            {
                                offset: 0,
                                color: "rgba(40,140,210)",
                            },
                        ]);
                    },
                },
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            barWidth: 20,
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6
            ]
          },
          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C';
              }
            },
            data: [2.0, 12.2, 3.3, 14.5, 6.3]
          },
          {
              name: "柱顶部",
              type: "pictorialBar",
              symbolSize: [20, 6],
              symbolOffset: [0, -3],
              z: 12,
              itemStyle: {
                  normal: {
                      color: function (params) {
                          return 'rgb(217,217,217)';
                      },
                  },
              },
              label: {
                  show: true,
                  position: "top",
                  textStyle: {
                      color: "#02C3F1",
                  },
              },
              symbolPosition: "end",
              data: [2.0, 4.9, 7.0, 23.2, 25.6],
          },
        ]
      };

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