CN-726：dns-事件分布图开发
This commit is contained in:
刘洪洪
@@ -124,10 +124,8 @@ export default {
|
||||
type: this.tableType,
|
||||
severity: this.tableSeverity
|
||||
}
|
||||
console.log('DnsActiveMaliciousDomain.vue--initData--请求入参', this.timeFilter)
|
||||
|
||||
get(api.dnsInsight.activeMaliciousDomain, params).then(res => {
|
||||
console.log('DnsActiveMaliciousDomain.vue--initData--初始化数据', res.data)
|
||||
if (res.code === 200) {
|
||||
const data = res.data.result
|
||||
if (!data || data.length === 0) {
|
||||
|
||||
99
src/views/charts2/charts/dnsInsight/DnsEventChartByBar.vue
Normal file
99
src/views/charts2/charts/dnsInsight/DnsEventChartByBar.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="npm-event dns-event">
|
||||
<div class="npm-event-pie dns-event-pie">
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
|
||||
<div class="npm-event-pies dns-event-pies" v-else>
|
||||
<!--堆叠柱状图-->
|
||||
<div style="width: 100%;height: 100%" id="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shallowRef } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { stackedBarChartOption } from '@/views/charts2/charts/options/echartOption'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
|
||||
export default {
|
||||
name: 'DnsEventChartByPie',
|
||||
props: {
|
||||
type: String,
|
||||
timeFilter: Object,
|
||||
series: Array
|
||||
},
|
||||
components: {
|
||||
ChartNoData
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef(null)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartData: [],
|
||||
timer: null,
|
||||
isNoData: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timeFilter: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.eventsByTypeData()
|
||||
}
|
||||
},
|
||||
series: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.eventsByTypeData()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.eventsByTypeData()
|
||||
})
|
||||
window.addEventListener('resize', this.resize)
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const _this = this
|
||||
const dom = document.getElementById('chart')
|
||||
if (!this.myChart) {
|
||||
this.myChart = echarts.init(dom)
|
||||
this.chartOption = stackedBarChartOption
|
||||
this.chartOption.series = this.series
|
||||
|
||||
this.myChart.on('mouseover', function (params) {
|
||||
_this.myChart.setOption(_this.chartOption)
|
||||
})
|
||||
this.myChart.on('mouseout', function (params) {
|
||||
_this.myChart.setOption(_this.chartOption)
|
||||
})
|
||||
|
||||
this.myChart.setOption(this.chartOption)
|
||||
} else {
|
||||
this.chartOption.series = this.series
|
||||
this.myChart.setOption(this.chartOption)
|
||||
}
|
||||
},
|
||||
eventsByTypeData () {
|
||||
if (this.series.length > 0) {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
resize () {
|
||||
this.myChart.resize()
|
||||
}
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('resize', this.resize)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
151
src/views/charts2/charts/dnsInsight/DnsEventChartByPie.vue
Normal file
151
src/views/charts2/charts/dnsInsight/DnsEventChartByPie.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="npm-event dns-event">
|
||||
<div class="npm-event-pie dns-event-pie">
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
|
||||
<div class="npm-event-pies dns-event-pies" v-else>
|
||||
<!--pie图-->
|
||||
<div class="chart-drawing" id="chart1"></div>
|
||||
|
||||
<div class="npm-event-pie-legends">
|
||||
<div class="npm-event-pie-legend">
|
||||
<div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
|
||||
<template v-for="(legend, index) in chartData" :key="index">
|
||||
<div class="npm-event-pie-legend-type">
|
||||
<span class="color-block" :style="{background: chartColor6[index]}"></span>
|
||||
<div class="npm-event-pie-legend-type-severity">{{ legend.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="npm-event-pie-legend">
|
||||
<div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
|
||||
<template v-for="(legend, index) in chartData" :key="index">
|
||||
<div class="npm-event-pie-legend-total">{{ legend.value }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shallowRef } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
import { chartColor6 } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: 'DnsEventChartByPie',
|
||||
props: {
|
||||
type: String,
|
||||
timeFilter: Object,
|
||||
pieData: Array
|
||||
},
|
||||
components: {
|
||||
ChartNoData
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef(null)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartData: [],
|
||||
timer: null,
|
||||
isNoData: false,
|
||||
chartColor6: chartColor6
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timeFilter: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.eventsByTypeData()
|
||||
}
|
||||
},
|
||||
pieData: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.eventsByTypeData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const _this = this
|
||||
const dom = document.getElementById('chart1')
|
||||
if (!this.myChart) {
|
||||
this.myChart = echarts.init(dom)
|
||||
this.chartOption = pieChartOption3
|
||||
this.chartOption.color = chartColor6
|
||||
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.value
|
||||
})
|
||||
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)
|
||||
} else {
|
||||
this.chartOption.color = chartColor6
|
||||
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.value
|
||||
})
|
||||
return num
|
||||
}
|
||||
}
|
||||
this.myChart.setOption(this.chartOption)
|
||||
}
|
||||
},
|
||||
eventsByTypeData () {
|
||||
if (this.pieData.length > 0) {
|
||||
this.chartData = this.pieData
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
resize () {
|
||||
this.myChart.resize()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.eventsByTypeData()
|
||||
})
|
||||
window.addEventListener('resize', this.resize)
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('resize', this.resize)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
chartColor2,
|
||||
chartColor3,
|
||||
chartColor5,
|
||||
chartColor6,
|
||||
unitTypes
|
||||
} from '@/utils/constants'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
@@ -376,3 +377,68 @@ export const trafficLineChartOption = {
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const stackedBarChartOption = {
|
||||
color: chartColor6,
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
barWidth: 26,
|
||||
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '12%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: 24,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: ['1%', '3%'],
|
||||
splitNumber: 12,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 12,
|
||||
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',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ECECEC'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 20
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [],
|
||||
stack: 'total',
|
||||
type: 'bar',
|
||||
name: '',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
barWidth: 26
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user