CN-651 feat: Dashboard - npm - 近期事件图开发
This commit is contained in:
@changcode
@@ -55,4 +55,8 @@
|
||||
@import './views/charts2/npmAppCategoryScore';
|
||||
@import './views/charts2/npmTabs';
|
||||
@import './views/charts2/npmMap';
|
||||
@import './views/charts2/npmLine';
|
||||
@import './views/charts2/npmEventsHeader';
|
||||
@import './views/charts2/npmEventsByType';
|
||||
@import './views/charts2/npmRecentEvents';
|
||||
//@import '../chart';
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
height: 100%;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
.app-table {
|
||||
.app-table.el-table {
|
||||
.el-table__header-wrapper {
|
||||
tr th {
|
||||
padding: 5px 0;
|
||||
|
||||
74
src/assets/css/components/views/charts2/npmEventsByType.scss
Normal file
74
src/assets/css/components/views/charts2/npmEventsByType.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
.npm-event {
|
||||
height: calc(100% - 24px);
|
||||
width: 100%;
|
||||
.npm-event-title {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.npm-event-pie {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.npm-event-pie-legends {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
justify-content: space-around;
|
||||
.npm-event-pie-legend {
|
||||
.npm-event-pie-legend-title {
|
||||
font-size: 12px;
|
||||
color: #575757;
|
||||
line-height: 12px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.npm-event-pie-legend-type {
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
line-height: 12px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 11px;
|
||||
.npm-event-pie-legend-type-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.critical {
|
||||
background: rgb(226,97,84);
|
||||
}
|
||||
.high {
|
||||
background: rgb(228,142,77);
|
||||
}
|
||||
.info {
|
||||
background: rgb(136,175,101);
|
||||
}
|
||||
.medium {
|
||||
background: rgb(231,179,78);
|
||||
}
|
||||
.low {
|
||||
background: rgb(218,199,75);
|
||||
}
|
||||
}
|
||||
.npm-event-pie-legend-total {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
line-height: 12px;
|
||||
font-weight: 540;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-drawing {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
56
src/assets/css/components/views/charts2/npmEventsHeader.scss
Normal file
56
src/assets/css/components/views/charts2/npmEventsHeader.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
.npm-header {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.npm-header-body:nth-of-type(5) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.npm-header-body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: rgba(113,113,113,0.06);
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
padding: 0 14px 0 16px;
|
||||
margin-right: 12px;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
.npm-header-body-severity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.npm-header-body-severity-icon {
|
||||
border-radius: 6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.critical {
|
||||
background: rgb(226,97,84);
|
||||
}
|
||||
.high {
|
||||
background: rgb(228,142,77);
|
||||
}
|
||||
.info {
|
||||
background: rgb(136,175,101);
|
||||
}
|
||||
.medium {
|
||||
background: rgb(231,179,78);
|
||||
}
|
||||
.low {
|
||||
background: rgb(218,199,75);
|
||||
}
|
||||
.npm-header-body-severity-value {
|
||||
font-family: NotoSansHans-Black;
|
||||
font-size: 12px;
|
||||
color: #575757;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
.npm-header-body-total {
|
||||
font-family: Helvetica-Bold;
|
||||
font-size: 16px;
|
||||
color: #353636;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
59
src/assets/css/components/views/charts2/npmLine.scss
Normal file
59
src/assets/css/components/views/charts2/npmLine.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
.npm-line {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid #f0f0f0;
|
||||
position: relative;
|
||||
.npm-line-header {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 21px;
|
||||
right: 23px;
|
||||
z-index: 1;
|
||||
.npm-line-header-right {
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.npm-line-header-icon {
|
||||
border-radius: 3px;
|
||||
width: 16px;
|
||||
height: 6px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.npm-line-header-icon.icon0 {
|
||||
background: #749F4D;
|
||||
}
|
||||
.npm-line-header-icon.icon1 {
|
||||
background: #98709B;
|
||||
}
|
||||
.npm-line-header-icon.icon2 {
|
||||
background: #E5A219;
|
||||
}
|
||||
.npm-line-header-value {
|
||||
font-size: 12px;
|
||||
color: #717171;
|
||||
line-height: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.npm-line-header-value.active {
|
||||
color: #717171;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.chart-drawing {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.echarts-tooltip.echarts-tooltip-dark {
|
||||
.cn-chart-tooltip {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.cn-chart-tooltip-value.cn-chart-tooltip__color {
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
line-height: 21px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
79
src/assets/css/components/views/charts2/npmRecentEvents.scss
Normal file
79
src/assets/css/components/views/charts2/npmRecentEvents.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
.npm-recent {
|
||||
height: calc(100% - 24px);
|
||||
.npm-recent-title {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.npm-recent-table {
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
.el-table__header-wrapper {
|
||||
tr th {
|
||||
padding: 5px 0;
|
||||
.data-column__span {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper.is-scrolling-none {
|
||||
tr td {
|
||||
padding: 7px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-recent-table{
|
||||
display: flex !important;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
.data-recent-table-severity {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.critical {
|
||||
color: #E26154;
|
||||
background: rgba(226,97,84, .18);
|
||||
}
|
||||
.high {
|
||||
color: #E48E4D;
|
||||
background: rgba(228,142,77, .18);
|
||||
}
|
||||
.info {
|
||||
color: #88AF65;
|
||||
background: rgba(136,175,101, .18);
|
||||
}
|
||||
.medium {
|
||||
color: #E7B34E;
|
||||
background: rgba(231,179,78, .18);
|
||||
}
|
||||
.low {
|
||||
color: #DAC74B;
|
||||
background: rgba(218,199,75, .18);
|
||||
}
|
||||
.data-recent-table-entity {
|
||||
font-size: 12px;
|
||||
color: #046ECA;
|
||||
font-weight: 400
|
||||
}
|
||||
.data-recent-table-eventType {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #046ECA;
|
||||
font-weight: 500;
|
||||
background: #EBF1F4;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
.el-table--group::after,.el-table--border::after, .el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
@@ -216,6 +216,8 @@ export const chartColor2 = ['#86B565', '#A37FA7', '#EFAFC7', '#EFC48F', '#B4B1A8
|
||||
export const chartColor3 = ['#00A7AB', '#7FA054', '#35ADDA', '#E48F3E', '#9FBC1D', '#98709B']
|
||||
|
||||
export const chartColor4 = ['#E5F6F6', '#F2F6EE', '#EBF7FC', '#FCF4EB', '#9FBC1D', '#F5F1F5']
|
||||
export const chartColor5 = ['#749F4D', '#98709B', '#E5A219']
|
||||
export const chartColor6 = ['#E26154', '#E48E4D', '#E7B34E', '#DAC74B', '#88AF65']
|
||||
|
||||
export const iso36112 = {
|
||||
[storageKey.iso36112Capital]: 'data/countriesWithCapital',
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<network-overview-line
|
||||
v-if="chart.type === typeMapping.networkOverview.line"
|
||||
:chart="chart"
|
||||
:time-filter="timeFilter"
|
||||
></network-overview-line>
|
||||
<network-overview-ddos-detection
|
||||
v-else-if="chart.type === typeMapping.networkOverview.ddosDetection"
|
||||
@@ -42,6 +43,18 @@
|
||||
v-else-if="chart.type === typeMapping.npm.npmLine"
|
||||
:chart="chart"
|
||||
></npm-line>
|
||||
<npm-events-header
|
||||
v-else-if="chart.type === typeMapping.npm.npmEventsHeader"
|
||||
:chart="chart"
|
||||
></npm-events-header>
|
||||
<npm-events-by-type
|
||||
v-else-if="chart.type === typeMapping.npm.npmEventsByType"
|
||||
:chart="chart"
|
||||
></npm-events-by-type>
|
||||
<npm-recent-events
|
||||
v-else-if="chart.type === typeMapping.npm.npmRecentEvents"
|
||||
:chart="chart"
|
||||
></npm-recent-events>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -59,9 +72,15 @@ import NpmNetworkQuantity from '@/views/charts2/charts/NpmNetworkQuantity'
|
||||
import NpmAppCategoryScore from '@/views/charts2/charts/NpmAppCategoryScore'
|
||||
import NpmMap from '@/views/charts2/charts/NpmMap'
|
||||
import NpmLine from '@/views/charts2/charts/NpmLine'
|
||||
import NpmEventsByType from '@/views/charts2/charts/NpmEventsByType'
|
||||
import NpmRecentEvents from '@/views/charts2/charts/NpmRecentEvents'
|
||||
import NpmEventsHeader from '@/views/charts2/charts/NpmEventsHeader'
|
||||
export default {
|
||||
name: 'Chart',
|
||||
components: {
|
||||
NpmEventsHeader,
|
||||
NpmRecentEvents,
|
||||
NpmEventsByType,
|
||||
NpmLine,
|
||||
NpmMap,
|
||||
NpmAppCategoryScore,
|
||||
|
||||
@@ -9,8 +9,11 @@ export const typeMapping = {
|
||||
npm: {
|
||||
npmMap: 1,
|
||||
npmLine: 101,
|
||||
npmEventsByType: 301,
|
||||
npmAppCategoryScore: 702,
|
||||
npmTabs: 704,
|
||||
npmNetworkQuantity: 703
|
||||
npmEventsHeader: 705,
|
||||
npmNetworkQuantity: 703,
|
||||
npmRecentEvents: 602
|
||||
}
|
||||
}
|
||||
|
||||
127
src/views/charts2/charts/NpmEventsByType.vue
Normal file
127
src/views/charts2/charts/NpmEventsByType.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="npm-event">
|
||||
<div class="npm-event-title">{{$t('network.eventByType')}}</div>
|
||||
<div class="npm-event-pie">
|
||||
<div class="chart-drawing" id="chart"></div>
|
||||
<div class="npm-event-pie-legends">
|
||||
<div class="npm-event-pie-legend">
|
||||
<div class="npm-event-pie-legend-title">{{ $t('overall.type') }}</div>
|
||||
<template v-for="(legend, index) in chartData" :key="index">
|
||||
<div class="npm-event-pie-legend-type">
|
||||
<div class="npm-event-pie-legend-type-icon" :class="iconClass(legend)"></div>
|
||||
<div>{{legend.severity}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="npm-event-pie-legend">
|
||||
<div class="npm-event-pie-legend-title">{{ $t('network.total') }}</div>
|
||||
<template v-for="(legend, index) in chartData" :key="index">
|
||||
<div class="npm-event-pie-legend-total">{{legend.total}}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shallowRef } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
|
||||
|
||||
export default {
|
||||
name: 'NpmEventsByType',
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef(null)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartData: [
|
||||
{ value: 1048, severity: 'Critical', total: 323 },
|
||||
{ value: 1315, severity: 'High', total: 178 },
|
||||
{ value: 5810, severity: 'Medium', total: 223 },
|
||||
{ value: 4184, severity: 'Low', total: 178 },
|
||||
{ value: 3100, severity: 'Info', total: 323 }
|
||||
],
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconClass () {
|
||||
return function (row) {
|
||||
let className
|
||||
switch (row.severity) {
|
||||
case ('Critical'): {
|
||||
className = 'critical'
|
||||
break
|
||||
}
|
||||
case ('High'): {
|
||||
className = 'high'
|
||||
break
|
||||
}
|
||||
case ('Info'): {
|
||||
className = 'info'
|
||||
break
|
||||
}
|
||||
case ('Medium'): {
|
||||
className = 'medium'
|
||||
break
|
||||
}
|
||||
case ('Low'): {
|
||||
className = 'low'
|
||||
break
|
||||
}
|
||||
default: break
|
||||
}
|
||||
return className
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const _this = this
|
||||
const dom = document.getElementById('chart')
|
||||
this.myChart = echarts.init(dom)
|
||||
this.chartOption = pieChartOption3
|
||||
this.chartOption.series[0].data = this.chartData
|
||||
this.chartOption.series[0].label = {
|
||||
show: true,
|
||||
position: 'center',
|
||||
fontFamily: 'NotoSansHans-Medium',
|
||||
fontSize: 20,
|
||||
fontWeight: 500,
|
||||
formatter: function () {
|
||||
let num = 0
|
||||
_this.chartData.forEach(t => {
|
||||
num += t.total
|
||||
})
|
||||
return num
|
||||
}
|
||||
}
|
||||
this.myChart.on('mouseover', function (params) {
|
||||
_this.chartOption.series[0].label.show = false
|
||||
_this.myChart.setOption(_this.chartOption)
|
||||
})
|
||||
this.myChart.on('mouseout', function (params) {
|
||||
_this.chartOption.series[0].label.show = true
|
||||
_this.myChart.setOption(_this.chartOption)
|
||||
})
|
||||
this.myChart.setOption(this.chartOption)
|
||||
},
|
||||
resize () {
|
||||
this.myChart.resize()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.timer = setTimeout(() => {
|
||||
this.init()
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.resize)
|
||||
},
|
||||
beforeUnmount () {
|
||||
clearTimeout(this.timer)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
59
src/views/charts2/charts/NpmEventsHeader.vue
Normal file
59
src/views/charts2/charts/NpmEventsHeader.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="npm-header">
|
||||
<div class="npm-header-body" v-for="(item, index) in chartData" :key="index">
|
||||
<div class="npm-header-body-severity">
|
||||
<div class="npm-header-body-severity-icon" :class="iconClass(item)"></div>
|
||||
<div class="npm-header-body-severity-value">{{item.severity}}</div>
|
||||
</div>
|
||||
<div class="npm-header-body-total">{{item.total}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NpmEventsHeader',
|
||||
data () {
|
||||
return {
|
||||
chartData: [
|
||||
{ severity: 'Critical', total: 12 },
|
||||
{ severity: 'High', total: 32 },
|
||||
{ severity: 'Medium', total: 12 },
|
||||
{ severity: 'Low', total: 21 },
|
||||
{ severity: 'Info', total: 18 }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconClass () {
|
||||
return function (row) {
|
||||
let className
|
||||
switch (row.severity) {
|
||||
case ('Critical'): {
|
||||
className = 'critical'
|
||||
break
|
||||
}
|
||||
case ('High'): {
|
||||
className = 'high'
|
||||
break
|
||||
}
|
||||
case ('Info'): {
|
||||
className = 'info'
|
||||
break
|
||||
}
|
||||
case ('Medium'): {
|
||||
className = 'medium'
|
||||
break
|
||||
}
|
||||
case ('Low'): {
|
||||
className = 'low'
|
||||
break
|
||||
}
|
||||
default: break
|
||||
}
|
||||
return className
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
116
src/views/charts2/charts/NpmRecentEvents.vue
Normal file
116
src/views/charts2/charts/NpmRecentEvents.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="npm-recent">
|
||||
<div class="npm-recent-title">{{ $t('network.recentEvents') }}</div>
|
||||
<el-table
|
||||
:id="`tabTable_${index}`"
|
||||
:ref="`dataTable_${index}`"
|
||||
:data="tableData"
|
||||
class="npm-recent-table"
|
||||
height="100%"
|
||||
>
|
||||
<template v-for="(item, index) in customTableTitles" :key="index">
|
||||
<el-table-column class="data-column">
|
||||
<template #header>
|
||||
<span class="data-column__span">{{$t(item.label)}}</span>
|
||||
</template>
|
||||
<template #default="scope" :column="item">
|
||||
<div class="data-recent-table">
|
||||
<template v-if="item.prop === 'severity'">
|
||||
<span class="data-recent-table-severity" :class="iconClass(scope.row)">{{$t(scope.row[item.prop])}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'entity'">
|
||||
<span class="data-recent-table-entity">{{$t(scope.row[item.prop])}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'eventType'">
|
||||
<span class="data-recent-table-eventType">{{$t(scope.row[item.prop])}}</span>
|
||||
</template>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NpmRecentEvents',
|
||||
data () {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
severity: 'Critical',
|
||||
entity: 'command adn control',
|
||||
eventType: 'dns error'
|
||||
}, {
|
||||
severity: 'High',
|
||||
entity: 'command adn control',
|
||||
eventType: 'dns error'
|
||||
}, {
|
||||
severity: 'Critical',
|
||||
entity: 'command adn control',
|
||||
eventType: 'dns error'
|
||||
}, {
|
||||
severity: 'Medium',
|
||||
entity: 'command adn control',
|
||||
eventType: 'dns error'
|
||||
}, {
|
||||
severity: 'Low',
|
||||
entity: 'command adn control',
|
||||
eventType: 'dns error'
|
||||
}, {
|
||||
severity: 'Info',
|
||||
entity: 'command adn control',
|
||||
eventType: 'dns error'
|
||||
}, {
|
||||
severity: 'Critical',
|
||||
entity: 'command adn control',
|
||||
eventType: 'dns error'
|
||||
}, {
|
||||
severity: 'Critical',
|
||||
entity: 'command adn control',
|
||||
eventType: 'dns error'
|
||||
}
|
||||
],
|
||||
customTableTitles: [
|
||||
{ label: 'network.severity', prop: 'severity' },
|
||||
{ label: 'network.entity', prop: 'entity' },
|
||||
{ label: 'detections.eventType', prop: 'eventType' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconClass () {
|
||||
return function (row) {
|
||||
let className
|
||||
switch (row.severity) {
|
||||
case ('Critical'): {
|
||||
className = 'critical'
|
||||
break
|
||||
}
|
||||
case ('High'): {
|
||||
className = 'high'
|
||||
break
|
||||
}
|
||||
case ('Info'): {
|
||||
className = 'info'
|
||||
break
|
||||
}
|
||||
case ('Medium'): {
|
||||
className = 'medium'
|
||||
break
|
||||
}
|
||||
case ('Low'): {
|
||||
className = 'low'
|
||||
break
|
||||
}
|
||||
default: break
|
||||
}
|
||||
return className
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,4 +1,12 @@
|
||||
import { chartColor, chartColor1, chartColor2, chartColor3, unitTypes } from '@/utils/constants'
|
||||
import {
|
||||
chartColor,
|
||||
chartColor1,
|
||||
chartColor2,
|
||||
chartColor3,
|
||||
chartColor5,
|
||||
chartColor6,
|
||||
unitTypes
|
||||
} from '@/utils/constants'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import { axisFormatter } from '@/views/charts/charts/tools'
|
||||
|
||||
@@ -110,6 +118,34 @@ export const pieChartOption2 = {
|
||||
}
|
||||
]
|
||||
}
|
||||
export const pieChartOption3 = {
|
||||
color: chartColor6,
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['45%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 20,
|
||||
fontWeight: 500,
|
||||
fontFamily: 'NotoSansHans-Medium',
|
||||
color: '#353636',
|
||||
formatter: function (params) {
|
||||
return params.data.value
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const stackedLineChartOption = {
|
||||
color: chartColor3,
|
||||
tooltip: {
|
||||
@@ -203,3 +239,69 @@ export const appListChartOption = {
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const npmLineChartOption = {
|
||||
color: chartColor5,
|
||||
title: {
|
||||
text: '',
|
||||
top: 20,
|
||||
left: 20,
|
||||
textStyle: {
|
||||
fontFamily: 'NotoSansSChineseRegular',
|
||||
fontSize: 14,
|
||||
color: '#353636',
|
||||
fontWeight: 400
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
className: 'echarts-tooltip echarts-tooltip-dark'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: 15,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'time',
|
||||
splitNumber: 12,
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
const data = new Date(value)
|
||||
const h = data.getHours() > 9 ? data.getHours() : '0' + data.getHours()
|
||||
const m = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes()
|
||||
return h + ':' + m
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
return unitConvert(value, unitTypes.number).join('')
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
stack: 'network.total',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user