feat: 初始 echarts 图表

This commit is contained in:
@changcode
2022-07-08 09:34:09 +08:00
parent aa1cddb746
commit 9f86c16d05
12 changed files with 457 additions and 5 deletions

View File

@@ -2,6 +2,9 @@
height: calc(100% - 50px);
background-color: $--content-right-background-color;
width: 100%;
&>div {
height: 100%;
}
}
.cn-header {

View File

@@ -46,4 +46,7 @@
@import './components/rightBox/report/builtinReportBox';
@import './views/charts2/panel';
@import 'views/charts/NetworkOverviewLine';
@import 'views/charts/NetworkOverviewDdosDetection';
@import 'views/charts/NetworkOverviewPerformanceEvent';
//@import '../chart';

View File

@@ -0,0 +1,52 @@
.ddos-detection {
display: flex;
height: 100%;
width: 85%;
margin: auto;
flex-direction: column;
justify-content: space-evenly;
.ddos-detection-type {
display: flex;
justify-content: space-between;
.ddos-detection-type-value {
display: flex;
flex-direction: column;
.ddos-detection-type-value-name {
font-family: NotoSansSChineseRegular;
font-size: 12px;
color: #575757;
line-height: 12px;
font-weight: 400;
margin-bottom: 12px;
}
.ddos-detection-type-value-number {
font-family: NotoSerifMyanmar-Medium;
font-size: 18px;
color: #E26154;
line-height: 12px;
font-weight: 500;
}
}
}
.el-button {
width: 117px;
min-height: 28px;
background: #FBFBFB;
border: 1px solid #C5C5C5;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 4px;
padding: 8px 5px;
span {
font-family: NotoSansHans-Medium;
font-size: 12px;
color: #575757;
font-weight: 500;
i {
transform: rotate(-90deg);
color: #575757;
font-size: 12px;
margin-left: 4px;
}
}
}
}

View File

@@ -0,0 +1,8 @@
.line {
height: 100%;
width: 100%;
#chart {
width: 1288px;
height: 340px;
}
}

View File

@@ -0,0 +1,38 @@
.performance-event {
width: 100%;
.performance-event-pie {
width: 100%;
div {
height: 175px;
width: 324px;
}
.performance-event-pie-hr {
height: 1px;
width: 310px;
margin: auto;
background: #E2E5EC;
}
}
.el-button {
width: 117px;
min-height: 28px;
background: #FBFBFB;
border: 1px solid #C5C5C5;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 4px;
padding: 8px 5px;
margin-left: 30px;
span {
font-family: NotoSansHans-Medium;
font-size: 12px;
color: #575757;
font-weight: 500;
i {
transform: rotate(-90deg);
color: #575757;
font-size: 12px;
margin-left: 4px;
}
}
}
}