<template>
    <div class="vpnPanelTableList">
        <div class="height100-95">
            <div id="myChart" :style="{width: '400px', height: '400px'}"></div>
            <div class="vpnStatus">
                <a class="gradual"></a>
                <span class="text">0%</span>
                <span class="text">50%</span>
                <span class="text">100%</span>
            </div>
        </div>
    </div>

</template>

<script>
import echarts from 'echarts'
import facilityService from '../../services/facility.service'

let facilityHttps = new facilityService()
export default {

    name: "facilitychart",
    data(){
        return{
            myChart:null,
            ipResPoolUsage:'',
        }
    },
    filters:{
        statusFilter:function(val){
            let text="";
            switch (val) {
                case "1":
                    text='完成'
                    break;
                case "2":
                    text='执行中'
                    break
                default:
                    text=""
            }
            return text
        },
    },
    components:{},
    mounted(){
    },
    methods:{
        initChart() {
            this.myChart = echarts.init(document.getElementById('myChart'))
            var myChart = document.getElementById('myChart');
            myChart.style.height='400px'
            myChart.style.width='400px'
            
            // 绘制图表
            this.myChart.setOption({
                tooltip : {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        detail: {formatter:'{value}%'},
                        axisLine: {            // 坐标轴线  
                            lineStyle: {       // 属性lineStyle控制线条样式  
                                color: [[0.3, '#2baf2b'], [0.7, '#ffd600'], [1, '#e51c23']]
                                }  
                        },   
                        data: [{value:this.ipResPoolUsage, name: '使用率'}]
                    }
                ]
            })
                // this.myChart.setOption(option, true);
            this.echartsResize(this.myChart)
        },
        echartsResize(obj) {
            window.addEventListener("resize", function () {
                var time = null;
                clearTimeout(time);
                time = setTimeout(function () {
                    obj.resize();
                }, 100);
            });
        },
        init(requestObj){
            this.ipResPoolUsage = parseFloat(requestObj.ipResPoolUsage);
            this.initChart();
        }


    }
}
</script>

<style lang="scss" scoped>
    .vpnStatus{
        margin: 0px;
        margin-bottom: 10px;
        text-align: center;
        .text{
            width: 24.3%;
            display: inline-block;
        }
        .gradual{
            display: block;
            width: 250px;
            height: 7px;
            margin: 0 auto;
            background: linear-gradient(90deg, #2baf2b, #ffd600, #e51c23) !important;
            background: -webkit-linear-gradient(90deg, #2baf2b, #ffd600, #e51c23) !important;
            background: -moz-linear-gradient(90deg, #2baf2b, #ffd600, #e51c23) !important;
            background: -o-linear-gradient(90deg, #2baf2b, #ffd600, #e51c23) !important;
        }
    }
    #myChart{
        margin:auto;
    }


</style>