Toggle navigation
Toggle navigation
This project
Loading...
Sign in
monitor_v3
/
hg-monitor-web
·
Commits
Go to a project
GitLab
Go to group
Project
Activity
Files
Commits
Pipelines
0
Builds
0
Graphs
Milestones
Issues
0
Merge Requests
0
Members
Labels
Wiki
Forks
Network
Create a new issue
Download as
Email Patches
Plain Diff
Browse Files
Authored by
鲁尚清
3 years ago
Commit
db245a0a73a417afe4ccd49dc2accd15abdb6c0f
1 parent
4e86e814
业务性能指标折线图写成组件
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
322 additions
and
0 deletions
hg-monitor-web-zj/src/main/resources/static/vue3/src/views/zjdaping/components/availabilityLine/index.html
hg-monitor-web-zj/src/main/resources/static/vue3/src/views/zjdaping/components/availabilityLine/index.js
hg-monitor-web-zj/src/main/resources/static/vue3/src/views/zjdaping/components/availabilityLine/index.html
0 → 100644
View file @
db245a0
<LineChart
:optionData=
"optionData"
v-if=
"optionData"
></LineChart>
...
...
hg-monitor-web-zj/src/main/resources/static/vue3/src/views/zjdaping/components/availabilityLine/index.js
0 → 100644
View file @
db245a0
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
...
...
Please
register
or
login
to post a comment