diff --git a/README.md b/README.md index 20dee61..ee1e1f1 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,10 @@ In order to run the program correctly, you need to create a `config.toml` file i capture_interval = '2s' check_interval = '10s' +# The statistics period +# if you don't set it,the default value 60 is used +stat_period = 60 + # The url of the web interface # leave it empty if you don't want to use the web interface web = '127.0.0.1:8080' diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue index 2c4d8bb..8ee131b 100644 --- a/frontend/src/pages/index.vue +++ b/frontend/src/pages/index.vue @@ -55,6 +55,60 @@ const pieViewOption = computed(() => { ], } }) + +const barFrequencyOption = computed(() => { + return { + dataset: { + source: stats.value, + }, + color: ['#73c0de', '#fac858', '#ee6666'], + tooltip: {}, + xAxis: { type: 'category' }, + yAxis: { type: 'value' }, + series: [ + { + type: 'bar', + encode: { x: 0, y: [3, 4, 5] }, // 使用“可疑、恶意”的统计数据 + }, + ], + } +}) + +const barGeoRankingOption = computed(() => { + return { + dataset: { + source: stats.value, + }, + color: ['#91cc75'], + tooltip: {}, + xAxis: { type: 'category' }, + yAxis: { type: 'value' }, + series: [ + { + type: 'bar', + encode: { x: 0, y: 8 }, // 假设第 8 列是地理排名数据 + }, + ], + } +}) + +const lineTrendOption = computed(() => { + return { + dataset: { + source: stats.value, + }, + color: ['#5470c6'], + tooltip: {}, + xAxis: { type: 'category' }, + yAxis: { type: 'value' }, + series: [ + { + type: 'line', + encode: { x: 0, y: 8 }, // 使用趋势数据列 + }, + ], + } +})