Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-V32-XuHaoJie

+<LineChart :optionData="optionData"  v-if="optionData"></LineChart>

+export default {
+    name: 'availabilityLine',
+    template: '',
+    props:['busId','kpiIds'],
+    components: {
+        'LineChart': Vue.defineAsyncComponent(
+            () => myImport('views/zjdaping/components/lineChart/index')
+        )
+    },
+    data(){
+        return {
+            domainName:sessionStorage.getItem('domainName'),
+            apiUrl:'/api-web/sxview/getBusinessAvailability',
+            // kpiIds:'KPIFE85BE59,KPI7A29BAC3,KPI5F8CCDA0,KPIE7A7E3E4,KPI97B835A4',//成功率，响应率，业务量，业务告警量，可用性
+            // busId:'7a9d2360e09f4ed8aaa8011ceb4178fd',
+            // busId:'',
+            performanceData:'',
+            xAxisData:'',
+            yAxisData:'',
+            optionData:'',
+            ySeriesCommon:[]
+        }
+    },
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+        const xAxisData=Vue.ref();
+        const yAxisData=Vue.ref([]);
+        const legendData=Vue.ref([]);
+        const ySeriesCommon=Vue.ref([]);
+
+        // 半透明的颜色值
+        const colorArr1 = [
+            'rgba(23,212,152, 0.8)',
+            'rgba(253,152,58, 0.8)',
+            'rgba(255,238,0, 0.8)',
+            'rgba(255,113,66, 0.8)',
+            'rgba(255,0,255, 0.8)',
+        ]
+        //   全透明的颜色值
+        const colorArr2 = [
+            'rgba(23,212,152, 0)',
+            'rgba(253,152,58, 0)',
+            'rgba(255,238,0, 0)',
+            'rgba(255,113,66, 0)',
+            'rgba(255,0,255, 0)',
+        ]
+        // 挂载完
+        Vue.onMounted(() => {
+            proxy.getData();
+
+        })
+        const getData=()=>{
+            let params = {
+                kpiIds: props.kpiIds,
+                busId: props.busId,
+                startTime:'',
+                endTime:'',
+                access_token:localStorage.getItem('access_token')
+            };
+            $.get(proxy.domainName +proxy.apiUrl+'?access_token='+localStorage.getItem('access_token'),params,function (res) {
+                console.log("yewu")
+                const data = res;
+                let legendData=Vue.ref([]);
+                let xAxisData=Vue.ref([]);
+                let yAxisData=Vue.ref([]);
+                let mapData={
+                    legend:[ "成功率","响应率","业务量","业务告警量","可用性"],
+                    x:[ "10:00","10:15","10:30", "10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45", "13:00","13:15","13:30","13:45",
+                        "14:00","14:15","14:30", "14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45", "17:00","17:15","17:30","17:45",
+                        "18:00","18:15","18:30", "18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45", "21:00","21:15","21:30","21:45",
+                        "22:00","22:15","22:30", "22:45","23:00","23:15","23:30","23:45","00:00","00:15","00:30","00:45", "01:00","01:15","01:30","01:45",
+                        "02:00","02:15","02:30", "02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45", "05:00","05:15","05:30","05:45",
+                        "06:00","06:15","06:30", "06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45", "09:00","09:15","09:30","09:45",
+                        "10:00"
+                    ],
+                    y:[[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0]
+                    ]
+                }
+                if (data ) {
+                    if(data.map){
+                        let resData=data.map;
+                        if(!resData.x || resData.x.length==0){
+                            resData=mapData;
+                        }
+                        xAxisData=resData.x;
+                        yAxisData=resData.y;
+                        legendData=resData.legend;
+
+                    }else{
+                        xAxisData=mapData.x;
+                        yAxisData=mapData.y;
+                        legendData=mapData.legend;
+                    }
+                    proxy.legendData= legendData;
+                    proxy.xAxisData=xAxisData;
+                    proxy.yAxisData=yAxisData;
+                    proxy.optionInit();
+
+                }
+
+            })
+            // proxy.optionInit();
+
+        }
+        const optionInit=()=>{
+
+            let data3=proxy.yAxisData[0];
+            let data4=proxy.yAxisData[3];
+            let min2=proxy.calMin([data3,data4]);
+            let max2=proxy.calMax([data3,data4]);
+            let ySeriesCommon=[];
+            proxy.legendData.map((item,index)=>{
+                let i=0;
+                if(index%2==0 ||index%3==0){
+                    i=0;
+                }else{
+                    i=1;
+                }
+                let areaStyle=0;
+                if(i==2){
+                    areaStyle=1
+                }
+                ySeriesCommon.push(
+                    {
+                        name:item,
+                        type: 'line',
+                        smooth:true,
+                        // stack: 'Total',
+                        show:false,
+                        data:proxy.yAxisData[index],
+                        yAxisIndex:i,
+                        showSymbol:false,
+                        itemStyle : {
+                            normal : {
+                                color:colorArr1[index],//tooltip里的小圆点颜色
+                                lineStyle:{
+                                    color:colorArr1[index],
+                                    width:1
+                                }
+                            }
+                        },
+                        areaStyle: {
+                            // color:'rgba(151,213,244,0.4)',
+                            normal:{
+                                color:new echarts.graphic.LinearGradient(0, 0, 0, areaStyle, [{ //关键在这里, 设置面积渐变
+                                    offset: 0,
+                                    color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
+                                }, {
+                                    offset: 1,
+                                    color: colorArr2[index]
+                                }])
+                            }
+
+                        },
+                    },
+                )
+            })
+            proxy.ySeriesCommon=ySeriesCommon;
+
+            // let xAxisDataLength=proxy.ySeriesCommon[0].length;
+            let xAxisData=[];
+            if(proxy.xAxisData){
+                proxy.xAxisData.map((item,index)=>{
+                    if(index%20==0){
+                        xAxisData.push(item)
+
+                    }
+                })
+
+            }
+            proxy.optionData = {
+                title: {
+                    text: ''
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    backgroundColor:'rgba(50,50,50,0.7)',
+                    borderColor:"#333",
+                    formatter:function(params){
+                        let str='<div>'+params[0].name+'</div>';
+                        let unit='%';
+                        for(let i=0;i<params.length;i++){
+                            if(i==3){
+                                unit=" 个"
+                            }else{
+                                unit="%"
+                            }
+                            let dataVal=0;
+                            if(params[i].data && params[i].data!=undefined && params[i].data!='undefined') {
+                                dataVal=params[i].data
+                            }
+                            str+="<div style='display:flex;justify-content: space-between'><span>"+params[i].marker+params[i].seriesName+"</span><span style='margin-left:10px;'>"+dataVal+unit+"</span></div>"
+                        }
+                        return str
+                    },
+                    textStyle:{
+                        color:"#fff",
+                        align:'left'
+                    }
+
+                },
+                legend: {
+                    data: proxy.legendData,
+                    itemHeight:0,//图例圆圈大小设置
+                    y:'0px',
+                    textStyle: {
+                        color: '#ffffff',
+                        fontsize:"12px"
+                    }
+
+                },
+                grid: {
+                    top:'10%',
+                    left: '3%',
+                    right: '8%',
+                    bottom: '20%',
+                    containLabel: true,
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: proxy.xAxisData,
+
+                    axisLine:{
+                        show:false,//是否显示坐标线
+                    },
+                    axisTick: {
+                        show: false //是否显示坐标刻度
+                    },
+                    axisLabel:{
+                        color:'#ffffff',
+                    },
+
+                },
+                yAxis:[
+                    {
+
+                        type: 'value',
+                        axisLabel: {
+                            formatter: '{value} %'//以百分比显示
+                        },
+                        splitLine:{
+                            lineStyle: {
+                                color:'#0a1b31'
+                            }
+                        },
+                        // position:'right',
+                        min:0,
+                        max:100,
+                        splitNumber:10,
+                        interval:(100-0)/10
+                    },
+                    {
+                        name: '单位:个',
+                        type: 'value',
+                        axisLabel: {
+                            show: true,
+                            interval: 'right',//居中显示
+                        },
+                        splitLine:{
+                            lineStyle: {
+                                color:'#0a1b31'
+                            }
+                        },
+                        min:min2,
+                        max:max2,
+                        splitNumber:10,
+                        interval:(max2-min2)/10
+                    },
+                ],
+                series: proxy.ySeriesCommon,
+                itemStyle:{
+                    showSymbol:false
+                }
+            };
+        }
+        //计算最大值
+        const calMax=(arr)=>{
+            let max=0;
+            arr.forEach((el)=>{
+                el.forEach((el1)=>{
+                    if(!(el1 === undefined || el1 === '')){
+                        if(max<el1){
+                            max=el1;
+                        }
+                    }
+                })
+            })
+            let maxint=Math.ceil(max/9.5);
+            let maxval=maxint * 10;//让显示的刻度是整数
+            return maxval;
+        }
+        //计算最小值
+        const calMin=(arr)=>{
+            let min=0;
+            arr.forEach((el)=>{
+                el.forEach((el1)=>{
+                    if(!(el1 === undefined || el1 === '')){
+                        if(min>el1){
+                            min=el1;
+                        }
+                    }
+                })
+            })
+            let minint=Math.floor(min/10);
+            let minval=minint * 10;//让显示的刻度是整数
+            return minval;
+        }
+
+
+        return{
+            calMax,
+            calMin,
+            getData,
+            xAxisData,
+            yAxisData,
+            legendData,
+            optionInit
+        }
+    }
+}