<template>
    <div class="tyc">
        <div class="topnav">文化</div>
        <!-- 图形 -->
        <div class="tyclogo">
            <div class="tyname">文化</div>
            <div class="tydesc">图书馆|文化馆|博物馆</div>
        </div>
        <!-- 总计进馆人数 -->
        <div class="jgbox">
            <div class="jg_title">总计进馆人数</div>
            <div class="jgcon">

                <div class="jgitem">
                    <div class="jgimg"><img src="../assets/img/icon01.png" /></div>
                    <span class="jgival" id="wtdjg">{{ tdjg }}</span>
                    <span class="jgdesc">今日进馆人数</span>
                </div>
                <div class="jgitem">
                    <div class="jgimg"><img src="../assets/img/icon02.png" /></div>
                    <span class="jgival" id="wtmjg"> {{ tmjg }} </span>
                    <span class="jgdesc">本月进馆人数</span>
                </div>
                <div class="jgitem">
                    <div class="jgimg"><img src="../assets/img/icon03.png" /></div>
                    <span class="jgival" id="wtyjg"> {{ tyjg }} </span>
                    <span class="jgdesc">本年进馆人数</span>
                </div>
            </div>
        </div>
        <!-- 24小时进馆人数 -->
        <div class="dgins">
            <div class="dgins_title"><span>24小时进馆人数</span></div>
            <div class="dgins_con">
                <div class="dgitem">
                    <div class="dgimg"><img src="../assets/img/wh_icon_bwg.png" /></div>
                    <span class="dgival">{{ gkbwg }}</span>
                    <span class="dgdesc">博物馆</span>
                </div>
                <div class="dgitem">
                    <div class="dgimg"><img src="../assets/img/wh_icon_tsg.png" /></div>
                    <span class="dgival">{{ gktsg }}</span>
                    <span class="dgdesc">图书馆</span>
                </div>
                <div class="dgitem">
                    <div class="dgimg"><img src="../assets/img/wh_icon_whg.png" /></div>
                    <span class="dgival">{{ gkwhg }} </span>
                    <span class="dgdesc">文化馆</span>
                </div>
            </div>
        </div>


        <!-- 24小时总服务人次趋势 -->
        <div class="gcins">
            <div class="gcins_title">24小时总服务人次趋势</div>
            <div ref="wgcins_charts" id="wgcins_charts" style="height:16rem"></div>
        </div>

        <!-- 各场馆服务人次趋势 -->
        <div class="gcgrs">
            <div class="gcgrs_title">各场馆服务人次趋势</div>
            <div ref="wgc_charts" id="wgc_charts" class="gcgrs_charts"></div>
        </div>
        <!-- 各场馆人数趋势 -->
        <div class="tsgbox">
            <div class="tsg_title">图书馆数据统计</div>
            <div ref="tsgchart" id="tsgchart" class="tsgc_charts"></div>
        </div>
    </div>
</template>
<style scoped>
.tyc {
    position: relative;
}

.topnav {
    height: 46px;
    line-height: 46px;
    text-align: center;
    padding: 12rpx;
    width: 100%;
    position: fixed;
    z-index: 90;
    color: #fff;
    left: 0;
    top: 0;
    background-color: #080A25;
    margin-bottom: 30rpx;
}

.tyclogo {
    margin-top: 1.6rem;
    background-image: url("../assets/img/wh_00.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: -1.8rem 0;
    height: 14rem;
}

.tyclogo .tyname {
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: right;
    padding-right: 6.8rem;
    font-size: 1.7rem;
    padding-top: 7.8rem;
}

.tyclogo .tydesc {
    height: 2rem;
    line-height: 2rem;
    font-size: 1.03rem;
    text-align: right;
    padding-right: 0.3rem;
    color: #fff;
}

/* 总计进馆 */
.jgbox {
    margin-top: 1.02rem;
    width: 100%;
    height: 12rem;
}

.jgbox .jg_title {
    background-image: url('../assets/img/ty_jg_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
    padding-left: 4.6rem;
    height: 2.06rem;
    line-height: 2.06rem;
}

.jgbox .jgcon {
    width: 100%;
    height: 7rem;
    padding-top: 2rem;
}

.jgbox .jgcon .jgitem {
    width: 30%;
    margin-left: 3%;
    float: left;
}

.jgbox .jgcon .jgitem .jgimg {
    height: 5rem;
    text-align: center;
    float: left;
    overflow: hidden;
    /* 动画效果 */
    -webkit-animation: ani_sc 8s infinite forwards;
    animation: ani_sc 8s infinite forwards;
}

.jgbox .jgcon .jgitem .jgimg img {
    width: 100%;
    height: 100%;
}

/**  呼吸效果  */
@keyframes ani_sc {
    0% {
        transform: scale(0.8);
        transition: all;
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.8);
    }
}

.jgbox .jgcon .jgitem span {
    display: block;
    text-align: center;
    height: 1.6rem;
    line-height: 1.6rem;
}

.jgbox .jgcon .jgitem .jgival {
    font-size: 1.06rem;
    font-weight: bold;
    /* 动画效果 */
    -webkit-animation: ani_sc 6s infinite;
    animation: ani_sc 6s infinite;
}

.jgbox .jgcon .jgitem .jgival::after {
    content: "";

}

.jgbox .jgcon .jgitem .jgdesc {
    margin-top: 75%;
    color: #666;
    font-size: 0.8rem;
}

/* 24小时进馆人数 */
.dgins {
    margin-top: 1.2rem;
}

.dgins .dgins_title {
    background-image: url("../assets/img/wh_24ins_bg.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 3rem;
}

.dgins .dgins_title span {
    display: block;
    line-height: 2rem;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
}

.dgins .dgins_con {
    height: 6rem;
    padding-top: 1rem;
}

.dgins .dgins_con .dgitem {
    width: 30%;
    margin-left: 3%;
    float: left;
}

.dgins .dgins_con .dgitem .dgimg {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    /* 动画效果 */
    -webkit-animation: ani_sc 5s infinite forwards;
    animation: ani_sc 5s infinite forwards;
}

.dgins .dgins_con .dgitem span {
    display: block;
    text-align: center;
    height: 1.8rem;
    line-height: 1.8rem;
}

.dgins .dgins_con .dgitem .dgival {
    font-size: 1.06rem;
    /* 动画效果 */
    -webkit-animation: ani_sc 5s infinite forwards;
    animation: ani_sc 5s infinite forwards;
}

.dgins .dgins_con .dgitem .dgdesc {
    font-size: 0.6rem;
    background-image: url('../assets/img/wh_icon_bg.png');
    background-position: center center;
    background-repeat: no-repeat;
}

/* 24小时总进馆人数趋势 */
.gcins {
    margin-top: 2.6rem;
}

.gcins .gcins_title {
    background-image: url("../assets/img/tyc_tbg.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 2.2rem;
    line-height: 2.2rem;
    padding-left: 2.02rem;
}

/* 各场馆人数趋势 */
.gcgrs {
    margin-top: 2.6rem;
}

.gcgrs .gcgrs_title {
    background-image: url("../assets/img/wh_tbg.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 2.4rem;
    line-height: 2.4rem;
    padding-left: 2.42rem;
}

.gcgrs .gcgrs_charts {
    margin-top: 1rem;
    width: 100%;
    height: 18rem;
}

/* 图书馆趋势 */
.tsgbox {
    margin-top: 1.2rem;
}

.tsgbox .tsg_title {
    background-image: url("../assets/img/wh_tsg_tbg.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 2.4rem;
    line-height: 2.4rem;
    padding-left: 2.42rem;
}

.tsgbox .tsgc_charts {
    /* margin-top: 2rem; */
    width: 100%;
    height: 10rem;
}
</style>
<script>
import * as echarts from 'echarts';

// 引入api
import * as homeApi from '@/api/home'
import { ecMaxVal, numGrow } from '@/utils/comm';

let hws = null;
export default {
    name: 'TycView',
    data() {
        return {
            //三馆人数概况 
            tdjg: 0,
            tmjg: 0,
            tyjg: 0,
            //
            gkbwg: 0,
            gktsg: 0,
            gkwhg: 0,

            //  柱子图
            ecbardata: [],

            // 24小时总服务人次趋势
            wh24xdata: [],
            wh24ydata: [],
            //折线区域的数据
            zxliddata: [],
            // 折线名称
            zxlindata: [],
            // 图书馆借阅
            libleaData: [],
        }
    },
    mounted() {
        //  三馆人数
        this.sgrsStat()

        // 24小时总服务人次趋势
        this.getWh24hdata()
        //
        this.whtdrs()

        // 图书借阅信息
        this.libinfoData()

        // websocket 
        this.getsckdata()

    },
    methods: {
        // 三馆人数概况
        sgrsStat() {
            homeApi.allGroupNum({ type: 2 }).then(res => {
                const tdata = res.data.returnData;
                this.tdjg = tdata.day.noRepeatInNum
                this.tmjg = tdata.month.noRepeatInNum
                this.tyjg = tdata.year.noRepeatInNum
            });
            homeApi.tsgTrends().then(res => {
                const tdata = res.data.data;

                //     //24小时的情况
                const sgdata = tdata.hour24
                this.gktsg = sgdata[0].incount
                this.gkbwg = sgdata[1].incount
                this.gkwhg = sgdata[2].incount
            });
        },
        
        //  24 小时总服务人次趋势
        getWh24hdata() {
            homeApi.wh24ServiceTrends().then(res => {
                const temcgData = res.data.data   
                
                const vkdata = new Array;
                vkdata.push({
                    xname: temcgData.dkeys.slice(-8, temcgData.dkeys.length),
                    xval:  temcgData.dvalue.slice(-8, temcgData.dvalue.length),
                    mxarr: ecMaxVal(temcgData.dvalue.slice(-8, temcgData.dvalue.length))
                })
                this.ecbardata = vkdata
                // do line
                this.cgsf_line()
            })
        },
        // 山峰图---24小时总服务人次趋势
        // 24H 服务人次绘制柱形图
        cgsf_line() {
            //var chartDom = document.getElementById('wgcins_charts');
            var chartDom = this.$refs.wgcins_charts
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        return params[0].name + "</br>" + params[0].value
                    }
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '3%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: [{
                    data: this.ecbardata[0].xname,
                    axisLine: {
                        lineStyle: {
                            color: '#0095FF',
                            width: 1,
                            type: 'solid',
                        },
                        show: true
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: '#027eff'
                        }
                    },
                    axisLabel: {
                        color: '#0095FF',
                    }
                }],
                series: [{
                    type: 'bar',
                    barGap: '5%',
                    barWidth: '10%',
                    barCategoryGap: '60%',
                    stack: 1,
                    // animation 
                    animationDurationUpdate: 3000,
                    animationEasingUpdate: 'quintcInOut',

                    itemStyle: {
                        normal: {
                            barBorderRadius: [30, 30, 0, 0],
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00feff'
                                },
                                {
                                    offset: 1,
                                    color: '#0286ff'
                                }
                            ]
                            )
                        }
                    },
                    data: this.ecbardata[0].xval,
                    zlevel: 11
                },
                {
                    type: 'scatter',
                    stack: 1,
                    xAxisIndex: 0,
                    symbolOffset: [0, 0], //相对于原本位置的偏移量
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
                    itemStyle: {
                        normal: {
                            color: '#fff'
                        }
                    },
                    symbolSize: 13,
                    zlevel: 10,
                    z: 2,
                },
                {
                    name: '背景',
                    type: 'bar',
                    barWidth: '10%',
                    barGap: '-100%',
                    //data: ecMaxVal(Object.values(this.ecbardata[0].xval)),
                    data: this.ecbardata[0].mxarr,
                    //data: ecMaxVal(this.ecbardata[0].xval),
                    //data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
                    itemStyle: {
                        normal: {
                            color: '#004298',
                            barBorderRadius: 30,
                        }
                    },
                    z: 1,
                },
                ]
            }

            // option && myChart.setOption(option);
            //消停几秒后开始，动画

            //  setInterval(()=>{
            myChart.clear()
            option && myChart.setOption(option);
            //  },4000);
        },

        // 今日人流
        whtdrs() {
            homeApi.whtdrs().then(res => {
                // get allTimeData
                const tmpdata = res.data.data
                // X 轴的名称字段
                const xarr = tmpdata[0].list.dkeys
                const darr = new Array;
                tmpdata.forEach(function (item, idx) {
                    // 读取list
                    const list = item.list
                    darr.push(list.dvalue)
                })

                this.zxlindata = xarr
                this.zxliddata = darr
                // 
                this.cg_line()
            });
        },

        // 图书馆借阅查询
        libinfoData() {
            homeApi.libLeaseData().then(res => {
                this.libleaData = res.data.data
                //
                this.tsg_line()
            });
        },
        // 图书馆
        tsg_line() {
            var chartDom = this.$refs.tsgchart;
            // var chartDom = document.getElementById("tsgchart");
            var myChart = echarts.init(chartDom);
            var option;

            var data = [{
                name: '今日办证人数',
                value: this.libleaData.newreader,
            },
            {
                name: '今日还书册数',
                value: this.libleaData.returncount,
            },
            {
                name: '今日借书册数',
                value: this.libleaData.servcount,
            },
            ];
            // 值颜色
            let valueColor = [
                { color1: '#15224C', color2: '#FF0042', unit: ' 人 ' },
                { color1: '#15224C', color2: '#FED700', unit: ' 册 ' },
                { color1: '#15224C', color2: '#00FEC5', unit: ' 册 ' }
            ]
            // 前缀图标
            var libraryIcons = {
                'Lend': '/img/wh_right1.png',
                'Still': '/img/wh_right2.png',
                'Accreditation': '/img/wh_right3.png'
            };
            var getArrByKey = (data, k) => {
                let key = k || "value";
                let res = [];
                if (data) {
                    data.forEach(function (t) {
                        res.push(t[key]);
                    });
                }
                return res;
            };
            var getSymbolData = (data) => {
                let arr = [];
                for (var i = 0; i < data.length; i++) {
                    arr.push({
                        value: data[i].value,
                        symbolPosition: 'end'
                    })
                }
                return arr;
            }

            option = {
                grid: {
                    show: false,
                    left: 35,
                    right: -45,
                    top: 25,//拉伸距离顶部高度
                    bottom: -30,//拉伸距离底部高度
                    containLabel: true,
                },
                xAxis: {
                    show: false
                },
                yAxis: [
                    {
                        triggerEvent: true,
                        show: true,
                        data: [
                            'Lend', 'Still', 'Accreditation'
                        ],
                        // max:80,
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            type: 'category',
                            inverse: true, //true正序false倒序

                            fontSize: 12,
                            verticalAlign: 'bottom',
                            formatter: function (value) {
                                return '{' + value + '|}'; //只显示图片icon
                            },

                            rich: {
                                value: {
                                    lineHeight: 30,
                                    align: 'center'
                                },
                                Lend: {
                                    height: 35,
                                    align: 'center',
                                    backgroundColor: {
                                        image: libraryIcons.Accreditation
                                    }
                                },
                                Still: {
                                    height: 35,
                                    align: 'center',
                                    backgroundColor: {
                                        image: libraryIcons.Still
                                    }
                                },
                                Accreditation: {
                                    height: 35,
                                    align: 'center',
                                    backgroundColor: {
                                        image: libraryIcons.Lend
                                    }
                                }
                            }
                        }
                    },
                    {
                        triggerEvent: true,
                        show: true,
                        // inverse: true,
                        data: getArrByKey(data, 'name'),
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            interval: 0,
                            color: '#fff',
                            align: 'left',
                            // margin: 80,
                            fontSize: 12,
                            formatter: function (value) {
                                return '{title|' + value + '}'
                            },
                        },
                    }, {
                        triggerEvent: true,
                        show: true,
                        // inverse: true,
                        data: getArrByKey(data, 'name'),
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            shadowOffsetX: '-20px',
                            color: '#fff',
                            align: 'right',
                            verticalAlign: 'bottom',
                            lineHeight: 42,
                            fontSize: 14,
                            formatter: function (value, index) {
                                return data[index].value + valueColor[index].unit
                            },
                        }
                    }],
                series: [
                    // 光圈
                    {
                        type: 'pictorialBar',
                        symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                        symbolSize: [50, 50],
                        symbolOffset: [20, 0],
                        z: 12,
                        itemStyle: {
                            normal: {
                                color: '#14b1eb'
                            }
                        },
                        animationDelay: function (idx) {
                            return idx * 10
                        },
                        data: getSymbolData(data)
                    },
                    {
                        type: 'bar',
                        showBackground: true,
                        barBorderRadius: 30,
                        yAxisIndex: 0,
                        data: data,
                        barWidth: 10,
                        barGap: 20,
                        itemStyle: {
                            normal: {
                                color: (params) => {
                                    var index = params.dataIndex;
                                    if (params.dataIndex >= valueColor.length) {
                                        index = params.dataIndex - valueColor.length;
                                    }
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        color: valueColor[index].color1
                                    },
                                    {
                                        offset: 0.8,
                                        color: valueColor[index].color2
                                    }, {
                                        offset: 1,
                                        color: valueColor[index].color2
                                    }]);
                                },
                                barBorderRadius: 0
                            },
                            // color: '#A71A2B',
                            barBorderRadius: 4,
                        },
                        // 标签
                        label: {
                            normal: {
                                color: '#fff',
                                show: true,
                                position: [0, '-20px'],
                                textStyle: {
                                    fontSize: 16
                                },
                                formatter: function (a) {
                                    return a.name
                                }
                            }
                        }
                    }],
                animationEasing: 'elasticOut',
                animationDelayUpdate: function (idx) {
                    return idx * 5
                }
            };

            option && myChart.setOption(option);
        },
        // 场馆人流趋势绘制线图
        // 场馆人流趋势绘制线图
        cg_line() {

            let that = this;
            var chartDom = this.$refs.wgc_charts;
            // var chartDom = document.getElementById("wgc_charts");
            var myChart = echarts.init(chartDom);

            var option
            var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
            var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
            var name = that.zxlindata.slice(-10, that.zxlindata.length)
            var data = that.zxliddata.slice(-10, that.zxliddata.length)

            var series = [];
            for (var i = 0; i < data.length; i++) {
                series.push({
                    name: name[i],
                    type: "line",
                    symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
                    symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    smooth: true, //是否平滑曲线显示
                    showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: color[i]
                            }, {
                                offset: 0.8,
                                color: 'rgba(255,255,255,0)'
                            }], false),
                            // shadowColor: 'rgba(255,255,255, 0.1)',
                            shadowBlur: 10,
                            opacity: 0.3,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: color[i],
                            lineStyle: {
                                width: 1,
                                type: 'solid' //'dotted'虚线 'solid'实线
                            },
                            borderColor: color[i], //图形的描边颜色。支持的格式同 color
                            borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
                            barBorderRadius: 0,
                            label: {
                                show: false,
                            },
                            opacity: 0.5,
                        }
                    },
                    data: data[i],

                })
            }
            option = {
                // backgroundColor: "#141f56",
                title: {
                    // text: "负面言论分领域趋势",
                    textStyle: {
                        color: '#fff',
                        fontSize: '22',
                        fontWeight: 'normal',
                    },
                    subtextStyle: {
                        color: '#90979c',
                        fontSize: '16',

                    },
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'line', // 默认为直线，可选为：'line' | 'shadow'
                        lineStyle: {
                            color: '#57617B'
                        }
                    },
                    formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
                    backgroundColor: 'rgba(0,0,0,0.7)', // 背景
                    padding: [8, 10], //内边距
                    extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
                },
                grid: {
                    borderWidth: 0,
                    top: 240,
                    bottom: 240,
                    right: 20,
                    textStyle: {
                        color: "#fff"
                    }
                },
                xAxis: [{
                    type: "category",
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    axisLabel: {
                        inside: false,
                        interval: 0,
                        textStyle: {
                            color: '#FFFFFF',
                            fontWeight: 'normal',
                            fontSize: '12',
                        },
                    },
                    data: name,
                }],
                yAxis: {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#32346c ',
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#0095FF',
                            fontWeight: 'normal',
                            fontSize: '12',
                        },
                        formatter: '{value}',
                    },
                },
                series: series,
            }

            myChart.clear()
            option && myChart.setOption(option);
        },

        // 从ws 中实时获取数据
        getsckdata() {
            let that = this;
            hws = new WebSocket(publicConfig.WS_URL_WH);
            hws.onopen = function () {
                // console.log("ws connected success!")
            };
            hws.onclose = function (event) {
                // console.log('WebSocket连接已关闭');
            };
            hws.onmessage = (e) => {
                var jstr = JSON.parse(e.data);
                if (!jstr) {
                    return;
                }

                // 总计进馆人数
                const allFlowTrends = jstr.allFlowTrends.data
                that.tdjg = allFlowTrends.today.incount
                that.tmjg = allFlowTrends.month.incount
                that.tyjg = allFlowTrends.year.incount
                // 今日进馆
                const hour24 = allFlowTrends.hour24
                that.gktsg = hour24[0].incount
                that.gkbwg = hour24[1].incount
                that.gkwhg = hour24[2].incount

                // 图书借阅信息
                const libleas = jstr.getLibraryLeaseData.data
                that.libleaData = libleas

                // 24 小时柱形图数据
                const vkdata = new Array;
                vkdata.push({
                    xname: jstr.getLibraryHours24List.data.dkeys.slice(-8, jstr.getLibraryHours24List.data.dkeys.length),
                    xval: jstr.getLibraryHours24List.data.dvalue.slice(-8, jstr.getLibraryHours24List.data.dvalue.length)
                })
                that.ecbardata = vkdata;
                that.cgsf_line();

                // 线图数据
                function linedata() {
                    that.zxliddata = [];
                    that.rsqsDataName = [], that.rsqsDatas = [];
                    const tmpdata = jstr.getLibraryGroupHoursList.data;
                    tmpdata.forEach((item) => {
                        that.rsqsDataName.push(item.groupName);
                        that.rsqsDatas.push(item.list)
                    })

                    that.zxlindata = jstr.getLibraryGroupHoursList.data[0].list.dkeys;
                    that.rsqsDatas.forEach((item) => {
                        let rsqsData = []
                        Object.getOwnPropertyNames(item).forEach((value) => {
                            if (value == 'dvalue') {
                                rsqsData = item[value];
                            }
                        });
                        that.zxliddata.push(rsqsData)
                    })
                    that.cg_line()
                }
                linedata();

            }
        },

    },
    beforeUnmount() {
        hws.close();
    }
}
</script>