<template>
    <div class="wifiSign">
        <div class="">
            <div class="sum-title">
                WiFi信号
            </div>
            <div class="histogram">
                <ve-histogram :data="chartData" width="100%" height="230px" :loading="loading" :legend-visible="false"
                              :extend="chartExtend"></ve-histogram>
            </div>
        </div>
    </div>
</template>

<script>
    let qs = require('qs');
    export default {
        data() {
            return {
                days: 13,
                loading: false,
                chartData: {
                    columns: ['X', 'Y'],
                    rows: [

                    ]
                },
                chartExtend: {
                    color: ['#72FF99'],
                    series: {
                        barMaxWidth: 10,
                        // 区域填充样式
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(0,255,212,0.15)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0,255,212,0.15)' // 100% 处的颜色
                                    },
                                ],
                                global: false // 缺省为 false
                            }
                        },
                    },
                    axisLine: {
                        color: "#04E3FD",
                    },
                    yAxis: {
                        // name : '单位: dB',
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#08255B']
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#04E3FD',
                                width: 1,//这里是为了突出显示加上的
                            }
                        }
                    },
                    xAxis: {
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#04E3FD']
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#04E3FD',
                                width: 1,//这里是为了突出显示加上的
                            }
                        }
                    }
                }
            }
        },
        props: ['WifiRs'],
        watch: {
            WifiRs: function (val) {
                let that = this;
                that.chartData.rows =  val.Rs;
                console.log(val.Rs);
            },
        },
    }
</script>

<style scoped>
    .wifiSign {
        width: 100%;
        height: 170px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 0px;
    }

    .sum-title {
        width: 150px;
        height: 36px;
        font-size: 16px;
        line-height: 36px;
        color: #6DC1FF;
        margin: 0 auto;
        text-align: center;
        background: url("../assets/img/main/tit.png") top center no-repeat;
        background-size: 100%;
    }
    .histogram {
        position: relative;
        top: -40px;
    }
</style>
