|
|
|
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
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
|
|
\ No newline at end of file |
...
|
...
|
|
