|
...
|
...
|
@@ -21,7 +21,8 @@ export default { |
|
|
|
return {
|
|
|
|
domainName:sessionStorage.getItem('domainName'),
|
|
|
|
apiUrl:'/api-web/sxview/getBusinessAvailability',
|
|
|
|
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
|
|
|
|
// kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',//可用性，成功率，响应率，业务告警量
|
|
|
|
kpiIds:'KPIFE85BE59,KPI7A29BAC3,KPI5F8CCDA0,KPIE7A7E3E4,KPI97B835A4',//成功率，响应率，业务量，业务告警量，可用性
|
|
|
|
// busId:'7a9d2360e09f4ed8aaa8011ceb4178fd',
|
|
|
|
busId:'',
|
|
|
|
performanceData:'',
|
|
...
|
...
|
@@ -46,17 +47,19 @@ export default { |
|
|
|
});
|
|
|
|
// 半透明的颜色值
|
|
|
|
const colorArr1 = [
|
|
|
|
'rgba(255,0,255, 0.8)',
|
|
|
|
'rgba(23,212,152, 0.8)',
|
|
|
|
'rgba(253,152,58, 0.8)',
|
|
|
|
'rgba(255,113,66, 0.8)'
|
|
|
|
'rgba(255,238,0, 0.8)',
|
|
|
|
'rgba(255,113,66, 0.8)',
|
|
|
|
'rgba(255,0,255, 0.8)',
|
|
|
|
]
|
|
|
|
// 全透明的颜色值
|
|
|
|
const colorArr2 = [
|
|
|
|
'rgba(255,0,255, 0)',
|
|
|
|
'rgba(23,212,152, 0)',
|
|
|
|
'rgba(253,152,58, 0)',
|
|
|
|
'rgba(255,113,66, 0)'
|
|
|
|
'rgba(255,238,0, 0)',
|
|
|
|
'rgba(255,113,66, 0)',
|
|
|
|
'rgba(255,0,255, 0)',
|
|
|
|
]
|
|
|
|
// 挂载完
|
|
|
|
Vue.onMounted(() => {
|
|
...
|
...
|
@@ -77,7 +80,7 @@ export default { |
|
|
|
let xAxisData=Vue.ref([]);
|
|
|
|
let yAxisData=Vue.ref([]);
|
|
|
|
let mapData={
|
|
|
|
legend:[ "可用性","成功率","响应率","业务告警量"],
|
|
|
|
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",
|
|
...
|
...
|
@@ -86,7 +89,7 @@ export default { |
|
|
|
"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,1,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]
|
|
|
|
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 ) {
|
|
...
|
...
|
@@ -129,6 +132,10 @@ export default { |
|
|
|
}else{
|
|
|
|
i=1;
|
|
|
|
}
|
|
|
|
let areaStyle=0;
|
|
|
|
if(i==2){
|
|
|
|
areaStyle=1
|
|
|
|
}
|
|
|
|
ySeriesCommon.push(
|
|
|
|
{
|
|
|
|
name:item,
|
|
...
|
...
|
@@ -151,7 +158,7 @@ export default { |
|
|
|
areaStyle: {
|
|
|
|
// color:'rgba(151,213,244,0.4)',
|
|
|
|
normal:{
|
|
|
|
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
|
|
|
|
color:new echarts.graphic.LinearGradient(0, 0, 0, areaStyle, [{ //关键在这里, 设置面积渐变
|
|
|
|
offset: 0,
|
|
|
|
color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
|
|
|
|
}, {
|
|
...
|
...
|
@@ -221,14 +228,14 @@ export default { |
|
|
|
grid: {
|
|
|
|
top:'10%',
|
|
|
|
left: '3%',
|
|
|
|
right: '4%',
|
|
|
|
right: '8%',
|
|
|
|
bottom: '20%',
|
|
|
|
containLabel: true,
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
type: 'category',
|
|
|
|
boundaryGap: false,
|
|
|
|
data: xAxisData,
|
|
|
|
data: proxy.xAxisData,
|
|
|
|
|
|
|
|
axisLine:{
|
|
|
|
show:false,//是否显示坐标线
|
...
|
...
|
|
