<template>
    <div :id="idstr" style="width: 100%;height: 100%;">

    </div>
</template>

<script>
    // 引入基本模板
    let echarts = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/bar')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')

    export default {
        data(){
            return{
                dataObj:{},
                lazy:false,
                flow:true,
                sllflow:"上行流量(M)",
                supflow:"下行流量(M)",
                dbandwidth:"带宽",
                kuserdelay:"客户端延时(ms)",
                fserverdelay:"服务器延时(ms)",
                yagedelay:"应用平均响应延时(ms)",
            }
        },
        props:['message','idstr'],
        mounted() {
        },
        methods: {
            drawLine() {
                let vm =this;
                vm.lazy = vm.message.lazyTime
                if(vm.message.lazyTime == undefined){
                    vm.lazy=false
                    vm.flow = true
                    vm.sllflow = '上行流量(M)',
                    vm.supflow = '下行流量(M)'
                    vm.dbandwidth = '带宽(M)'
                    vm.kuserdelay = ''
                    vm.fserverdelay = ''
                    vm.yagedelay = ''
                }else{
                    vm.flow = false
                    vm.lazy=true
                    vm.sllflow = ''
                    vm.supflow = ''
                    vm.dbandwidth = ''
                    vm.kuserdelay = '客户端延时(ms)'
                    vm.fserverdelay = '服务器延时(ms)'
                    vm.yagedelay = '应用平均响应延时(ms)'
                }

                // 基于准备好的dom，初始化echarts实例
                let chart = echarts.init(document.getElementById(vm.idstr))
                //清空图表
                chart.clear();
                // 绘制图表
                chart.setOption({
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {show: true}
                    //     }
                    // },
                    color: ['#2b90e9','#e9c049'],
                    legend: {
                        x:'right',
                        data:[vm.sllflow,vm.supflow,vm.dbandwidth,vm.kuserdelay,vm.fserverdelay,vm.yagedelay],
                        selected: {
                            '上行流量(M)': false,
                            '下行流量(M)': vm.flow,
                            '带宽(M)': vm.flow,
                            '客户端延时(ms)': vm.lazy,
                            '服务器延时(ms)': vm.lazy,
                            '应用平均响应延时(ms)': vm.lazy,
                        },
                        icon: 'circle',
                        textStyle: {
                            color: '#080408'
                        }
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '2%',
                        bottom: '20%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : vm.message.time,
                            axisLabel: {
                                show: true,
                              /*  interval: 0,*/
                                textStyle: {
                                    color: '#080408'
                                },
                                formatter : function(params){
                                    return params.substr(11)
                                }
                            },
                            axisTick: {
                                alignWithLabel: true
                            },

                        }
                    ],
                    yAxis : [
                        {
                          //   name:'单位：M/MS',
                            nameTextStyle:{
                                color: '#080408'
                            },
                            type : 'value',
                            // splitLine:{
                            //   show:true,
                            //   lineStyle:{
                            //     color:'#00234b',
                            //     width: 1
                            //   }
                            // },
                            axisLabel: {
                                show: true,
                                interval: 1,
                                textStyle: {
                                    color: '#080408'
                                },

                            },
                        }


                    ],
                    //滚动条
                    dataZoom: [{
                        type: 'slider',
                        show: true, //flase直接隐藏图形
                        xAxisIndex: [0],
                        left: '2%', //滚动条靠左侧的百分比
                        bottom: '2%',
                        start: 79,//滚动条的起始位置
                        end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                    }],
                    series : [
                        {
                            name:'上行流量(M)',
                            type:'line',
                            symbol:'circle',
                            symbolSize:8,   //拐点圆的大小
                            color:['#e9ad78'],
                            barWidth: '30%',
                            data:vm.message.upflow
                        },
                        {
                            name:'下行流量(M)',
                            type:'line',
                            symbol:'circle',
                            symbolSize:8,   //拐点圆的大小
                            color:['#26e9ca'],
                            barWidth: '30%',
                            data:vm.message.flow
                        },
                        {
                            name:'带宽(M)',
                            type:'line',
                            symbol:'circle',
                            symbolSize:8,   //拐点圆的大小
                            color:['#F8E71C'],
                            barWidth: '30%',
                            data:vm.message.bandwidth
                        },
                        {
                            name:'客户端延时(ms)',
                            type:'line',
                            symbol:'circle',
                            symbolSize:8,   //拐点圆的大小
                            color:['#9021e9'],
                            barWidth: '30%',
                            data:vm.message.userdelay
                        },
                        {
                            name:'服务器延时(ms)',
                            type:'line',
                            symbol:'circle',
                            symbolSize:8,   //拐点圆的大小
                            color:['#e92e38'],
                            barWidth: '30%',
                            data:vm.message.serverdelay
                        },
                        {
                            name:'应用平均响应延时(ms)',
                            type:'line',
                            symbol:'circle',
                            symbolSize:8,   //拐点圆的大小
                            color:['#1ee911'],
                            barWidth: '30%',
                            data:vm.message.agedelay
                        },
                    ]
                });
                window.addEventListener("resize",()=>{
                    chart.resize();

                });
            }
        },
        watch:{
            message: function(){
                this.drawLine();
            }
        }
    }
</script>

<style lang="less">

</style>
