diff --git a/src/components/table/tag/TagTable.vue b/src/components/table/tag/TagTable.vue index 5f156d07..e1debb84 100644 --- a/src/components/table/tag/TagTable.vue +++ b/src/components/table/tag/TagTable.vue @@ -135,10 +135,10 @@ import table from '@/mixins/table' import Loading from '@/components/common/Loading' import axios from 'axios' import { api } from '@/utils/api' -import { storageKey, tagIntent, chartColor3 } from '@/utils/constants' -import { urlParamsHandler, overwriteUrl, headerCellClass } from '@/utils/tools' +import { storageKey, tagIntent } from '@/utils/constants' +import { urlParamsHandler, overwriteUrl, headerCellClass, getYAxisBeginValue } from '@/utils/tools' import { ref, shallowRef } from 'vue' -import { dateFormatToUTC, getNowTime, getSecond } from '@/utils/date-util' +import { getNowTime, getSecond } from '@/utils/date-util' import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination' import ChartNoData from '@/views/charts/charts/ChartNoData' import { useRoute } from 'vue-router' @@ -385,7 +385,6 @@ export default { if (data.length > 1 && data[0].ipCount === 0 && data[0].domainCount === 0) { data.splice(0, 1) } - this.myChart = echarts.init(dom) this.chartOption = tagLineChartOption const series = [] @@ -401,7 +400,6 @@ export default { } }, name: 'IP', - stack: 'Total', lineStyle: { color: '#35ADDA', width: 1 @@ -428,7 +426,6 @@ export default { } }, name: this.$t('overall.domain'), - stack: 'Total', lineStyle: { color: '#E48F3E', width: 1 @@ -444,12 +441,25 @@ export default { }) } this.chartOption.series = series - + this.chartOption.yAxis[0].startValue = getYAxisBeginValue(series) this.chartOption.yAxis[0].axisLabel.formatter = (value) => { return unitConvert(value, 'number').join('') } this.myChartArray.push(this.myChart) this.myChart.setOption(this.chartOption) + const _this = this + this.myChart.on('legendselectchanged', function (params) { + const newSeries = [] + if (params.selected.IP) { + newSeries.push(series[0]) + } + if (params.selected.Domain) { + newSeries.push(series[1]) + } + const _option = _this.myChart.getOption() + _option.yAxis[0].startValue = getYAxisBeginValue(newSeries) + _this.myChart.setOption(_option) + }) this.$nextTick(() => { this.myChart.resize() }) @@ -682,7 +692,319 @@ export default { lineUrl = lineUrl.replace('{{name}}', item.name) this.loadingDown = true axios.get(lineUrl, { params: params }).then(response => { - const res = response.data + const res = { + "data": { + "resultType": "table", + "result": [ + { + "statTime": 1731571020, + "domainCount": 0, + "ipCount": 0 + }, + { + "statTime": 1731571080, + "ipCount": 8370, + "domainCount": 0 + }, + { + "statTime": 1731571140, + "ipCount": 8362, + "domainCount": 0 + }, + { + "statTime": 1731571200, + "ipCount": 8386, + "domainCount": 0 + }, + { + "statTime": 1731571260, + "ipCount": 8373, + "domainCount": 0 + }, + { + "statTime": 1731571320, + "ipCount": 8362, + "domainCount": 0 + }, + { + "statTime": 1731571380, + "ipCount": 8369, + "domainCount": 0 + }, + { + "statTime": 1731571440, + "ipCount": 8378, + "domainCount": 0 + }, + { + "statTime": 1731571500, + "ipCount": 8374, + "domainCount": 0 + }, + { + "statTime": 1731571560, + "ipCount": 8364, + "domainCount": 0 + }, + { + "statTime": 1731571620, + "ipCount": 8389, + "domainCount": 0 + }, + { + "statTime": 1731571680, + "ipCount": 8397, + "domainCount": 0 + }, + { + "statTime": 1731571740, + "ipCount": 8370, + "domainCount": 0 + }, + { + "statTime": 1731571800, + "ipCount": 8370, + "domainCount": 0 + }, + { + "statTime": 1731571860, + "ipCount": 8378, + "domainCount": 0 + }, + { + "statTime": 1731571920, + "ipCount": 8405, + "domainCount": 0 + }, + { + "statTime": 1731571980, + "ipCount": 8403, + "domainCount": 0 + }, + { + "statTime": 1731572040, + "ipCount": 8403, + "domainCount": 0 + }, + { + "statTime": 1731572100, + "ipCount": 8397, + "domainCount": 0 + }, + { + "statTime": 1731572160, + "ipCount": 8405, + "domainCount": 0 + }, + { + "statTime": 1731572220, + "ipCount": 8404, + "domainCount": 0 + }, + { + "statTime": 1731572280, + "ipCount": 8374, + "domainCount": 0 + }, + { + "statTime": 1731572340, + "ipCount": 8370, + "domainCount": 0 + }, + { + "statTime": 1731572400, + "ipCount": 8359, + "domainCount": 0 + }, + { + "statTime": 1731572460, + "ipCount": 8369, + "domainCount": 0 + }, + { + "statTime": 1731572520, + "ipCount": 8386, + "domainCount": 0 + }, + { + "statTime": 1731572580, + "ipCount": 8370, + "domainCount": 0 + }, + { + "statTime": 1731572640, + "ipCount": 8373, + "domainCount": 0 + }, + { + "statTime": 1731572700, + "ipCount": 8370, + "domainCount": 0 + }, + { + "statTime": 1731572760, + "ipCount": 8378, + "domainCount": 0 + }, + { + "statTime": 1731572820, + "ipCount": 8380, + "domainCount": 0 + }, + { + "statTime": 1731572880, + "ipCount": 8370, + "domainCount": 0 + }, + { + "statTime": 1731572940, + "ipCount": 8386, + "domainCount": 0 + }, + { + "statTime": 1731573000, + "ipCount": 8373, + "domainCount": 0 + }, + { + "statTime": 1731573060, + "ipCount": 8390, + "domainCount": 0 + }, + { + "statTime": 1731573120, + "ipCount": 8380, + "domainCount": 0 + }, + { + "statTime": 1731573180, + "ipCount": 8397, + "domainCount": 0 + }, + { + "statTime": 1731573240, + "ipCount": 8405, + "domainCount": 0 + }, + { + "statTime": 1731573300, + "ipCount": 8389, + "domainCount": 0 + }, + { + "statTime": 1731573360, + "ipCount": 8389, + "domainCount": 0 + }, + { + "statTime": 1731573420, + "ipCount": 8380, + "domainCount": 0 + }, + { + "statTime": 1731573480, + "ipCount": 8370, + "domainCount": 0 + }, + { + "statTime": 1731573540, + "ipCount": 8389, + "domainCount": 0 + }, + { + "statTime": 1731573600, + "ipCount": 8378, + "domainCount": 0 + }, + { + "statTime": 1731573660, + "ipCount": 8373, + "domainCount": 0 + }, + { + "statTime": 1731573720, + "ipCount": 8405, + "domainCount": 0 + }, + { + "statTime": 1731573780, + "ipCount": 8378, + "domainCount": 0 + }, + { + "statTime": 1731573840, + "ipCount": 8389, + "domainCount": 0 + }, + { + "statTime": 1731573900, + "ipCount": 8389, + "domainCount": 0 + }, + { + "statTime": 1731573960, + "ipCount": 8380, + "domainCount": 0 + }, + { + "statTime": 1731574020, + "ipCount": 8403, + "domainCount": 0 + }, + { + "statTime": 1731574080, + "ipCount": 8362, + "domainCount": 0 + }, + { + "statTime": 1731574140, + "ipCount": 8389, + "domainCount": 0 + }, + { + "statTime": 1731574200, + "ipCount": 8378, + "domainCount": 0 + }, + { + "statTime": 1731574260, + "ipCount": 8399, + "domainCount": 0 + }, + { + "statTime": 1731574320, + "ipCount": 8389, + "domainCount": 0 + }, + { + "statTime": 1731574380, + "ipCount": 8378, + "domainCount": 0 + }, + { + "statTime": 1731574440, + "ipCount": 8389, + "domainCount": 0 + }, + { + "statTime": 1731574500, + "ipCount": 8369, + "domainCount": 0 + }, + { + "statTime": 1731574560, + "ipCount": 8378, + "domainCount": 0 + }, + { + "statTime": 1731574620, + "ipCount": 8374, + "domainCount": 0 + } + ] + } + } + // const res = response.data if (response.status === 200) { this.showError = false this.isNoData = res.data.result.length === 0 diff --git a/src/utils/tools.js b/src/utils/tools.js index a33d4859..f79c3b44 100644 --- a/src/utils/tools.js +++ b/src/utils/tools.js @@ -1268,24 +1268,6 @@ export function getIndexByEventSeverity (type) { } } -export function getQueryByFlag2 (type, condition) { - switch (type) { - case 'country': - case 'asn': - case 'province': - case 'city': - case 'isp': { - return `${type}='${condition[1]}'` - } - case 'idcRenter': { - return `idc_renter='${condition[1]}'` - } - default: { - return `${condition[0]}'${condition[1]}'` - } - } -} - /** 根据语言环境获取字符所占像素px */ @@ -1581,9 +1563,7 @@ const tagValueHandler = (value) => { return find ? find.name : value } -export const headerCellClass = (row) => { - return 'my-header-cell-class' -} +export const headerCellClass = 'my-header-cell-class' /** * & 被转译为& 将转义后的值转为 & @@ -1621,3 +1601,26 @@ export const getSeverityByCode = (code) => { } } } + +export function getYAxisBeginValue (data) { + let max + let min + data.forEach(line => { + line.data && line.data.forEach(value => { + if (max === undefined || max < value[1]) { + max = value[1] + } + if (min === undefined || min > value[1]) { + min = value[1] + } + }) + }) + if (_.isNumber(min) && min >= 100) { + const diff = max - min + if (diff / min < 0.5) { + const minMDiff = min - diff > 0.8 * min ? min - diff : 0.8 * min + return Math.floor(minMDiff / Math.pow(10, `${Math.floor(minMDiff)}`.length - 2)) * Math.pow(10, `${Math.floor(minMDiff)}`.length - 2) + } + } + return 0 +} diff --git a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue index f0f6f631..b1df355e 100644 --- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue +++ b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue @@ -83,7 +83,7 @@ import { getSecond } from '@/utils/date-util' import ChartNoData from '@/views/charts/charts/ChartNoData' import chartMixin from '@/views/charts2/chart-mixin' import { useRoute } from 'vue-router' -import { getLineType, getMarkLineByLineRefer, overwriteUrl, urlParamsHandler } from '@/utils/tools' +import {getLineType, getMarkLineByLineRefer, getYAxisBeginValue, overwriteUrl, urlParamsHandler} from '@/utils/tools' import { dataForDnsTrafficLine } from '@/utils/static-data' export default { name: 'DnsTrafficLine', @@ -292,6 +292,7 @@ export default { } } }) + this.chartOption.yAxis[0].startValue = getYAxisBeginValue(this.chartOption.series) if (!show) { this.chartOption.series.forEach((t) => { t.markLine.label.show = false @@ -378,6 +379,13 @@ export default { this.dispatchSelectAction('legendUnSelect', t.name) } }) + const series = this.tabs.filter(tab => tab.show) + const yAxisStartValue = getYAxisBeginValue(series) + if (this.myChart) { + const _option = this.myChart.getOption() + _option.yAxis[0].startValue = yAxisStartValue + this.myChart.setOption(_option) + } } if (val === 'active') { this.tabs.forEach(t => { diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue index 2928cadb..dc75fe00 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue @@ -72,7 +72,7 @@ import { getSecond } from '@/utils/date-util' import ChartNoData from '@/views/charts/charts/ChartNoData' import chartMixin from '@/views/charts2/chart-mixin' import { useRoute } from 'vue-router' -import { getLineType, getMarkLineByLineRefer, overwriteUrl, urlParamsHandler } from '@/utils/tools' +import { getLineType, getMarkLineByLineRefer, overwriteUrl, urlParamsHandler, getYAxisBeginValue } from '@/utils/tools' import ChartError from '@/components/common/Error' import { dataForNetworkOverviewLine } from '@/utils/static-data' @@ -202,6 +202,7 @@ export default { this.toggleLoading(true) axios.get(url, { params: params }).then(response => { const res = response.data + console.info(res) if (response.status === 200) { this.chartDateObject = res.data.result this.isNoData = res.data.result.length === 0 @@ -319,6 +320,7 @@ export default { } } }) + this.chartOption.yAxis[0].startValue = getYAxisBeginValue(this.chartOption.series) if (!show && !this.lineTab) { this.chartOption.series.forEach((t) => { t.markLine.label.show = false @@ -423,13 +425,18 @@ export default { } }) } + const series = this.tabs.filter(tab => tab.show) + const yAxisStartValue = getYAxisBeginValue(series) + const _option = this.myChart.getOption() + _option.yAxis[0].startValue = yAxisStartValue + this.myChart.setOption(_option) } if (val === 'active') { this.tabs.forEach(t => { t.invertTab = item.name === t.name ? !t.invertTab : true if (t.invertTab && item.name === t.name) { this.lineTab = this.lineTab ? '' : t.class - this.tabs.forEach((e) => { + this.tabs.forEach(e => { this.dispatchSelectAction('legendSelect', e.name) }) } @@ -541,12 +548,11 @@ export default { } } // 判断total曲线的头部数据，若第一个值是0，则删除第一个值 - if (totalData.values[0].length > 1 && totalData.values[0][1] === 0) { + if (totalData && totalData.values && totalData.values[0] && totalData.values[0].length > 1 && totalData.values[0][1] === 0) { lineData.forEach(l => { l.values.splice(0, 1) }) } - if (val === metricType.Sessions) { const tabs = _.cloneDeep(this.tabsTemplate) lineData.forEach((d, i) => { diff --git a/src/views/charts2/charts/npm/NpmLine.vue b/src/views/charts2/charts/npm/NpmLine.vue index 6974e584..68a9c5d2 100644 --- a/src/views/charts2/charts/npm/NpmLine.vue +++ b/src/views/charts2/charts/npm/NpmLine.vue @@ -69,6 +69,7 @@ import chartMixin from '@/views/charts2/chart-mixin' import unitConvert from '@/utils/unit-convert' import ChartError from '@/components/common/Error' import { dataForNpmLine } from '@/utils/static-data' +import { getYAxisBeginValue } from '@/utils/tools' export default { name: 'NpmLine', @@ -135,7 +136,221 @@ export default { if (url) { axios.get(url, { params: params }).then(response => { - const res = response.data + const res = { + "data": { + "resultType": "matrix", + "result": [ + { + "values": [ + [ + 1731574080, + 0.0 + ], + [ + 1731574140, + 17826.96 + ], + [ + 1731574200, + 4890.96 + ], + [ + 1731574260, + 4667.6 + ], + [ + 1731574320, + 4504.24 + ], + [ + 1731574380, + 3907.2 + ], + [ + 1731574440, + 3943.2 + ], + [ + 1731574500, + 6414.4 + ], + [ + 1731574560, + 3310.24 + ], + [ + 1731574620, + 9168.4 + ], + [ + 1731574680, + 575.2 + ], + [ + 1731574740, + 2633.44 + ], + [ + 1731574800, + 8965.04 + ], + [ + 1731574860, + 622.24 + ], + [ + 1731574920, + 2636.56 + ], + [ + 1731574980, + 0.0 + ] + ], + "type": "totalBitsRate" + }, + { + "values": [ + [ + 1731574080, + 0.0 + ], + [ + 1731574140, + 14262.96 + ], + [ + 1731574200, + 3917.2 + ], + [ + 1731574260, + 3808.4 + ], + [ + 1731574320, + 3649.84 + ], + [ + 1731574380, + 3159.2 + ], + [ + 1731574440, + 3096.8 + ], + [ + 1731574500, + 5166.0 + ], + [ + 1731574560, + 2644.16 + ], + [ + 1731574620, + 7310.16 + ], + [ + 1731574680, + 476.4 + ], + [ + 1731574740, + 2108.4 + ], + [ + 1731574800, + 7193.84 + ], + [ + 1731574860, + 501.04 + ], + [ + 1731574920, + 2124.56 + ], + [ + 1731574980, + 0.0 + ] + ], + "type": "inboundBitsRate" + }, + { + "values": [ + [ + 1731574080, + 0.0 + ], + [ + 1731574140, + 1764.0 + ], + [ + 1731574200, + 1773.76 + ], + [ + 1731574260, + 1759.2 + ], + [ + 1731574320, + 1754.4 + ], + [ + 1731574380, + 1748.0 + ], + [ + 1731574440, + 1746.4 + ], + [ + 1731574500, + 1748.4 + ], + [ + 1731574560, + 1766.16 + ], + [ + 1731574620, + 1758.24 + ], + [ + 1731574680, + 1798.8 + ], + [ + 1731574740, + 1725.04 + ], + [ + 1731574800, + 1771.2 + ], + [ + 1731574860, + 1721.2 + ], + [ + 1731574920, + 1712.0 + ], + [ + 1731574980, + 0.0 + ] + ], + "type": "outboundBitsRate" + } + ] + } + } + // const res = response.data if (response.status === 200) { this.showError = false this.isNoData = res.data.result.length === 0 @@ -197,8 +412,6 @@ export default { } this.chartOption = npmLineChartOption this.chartOption.color = this.chartData.params.color - // this.chartOption.color = this.chartOption.color.reverse() - // data = data.reverse() this.chartOption.series = data.map(t => { return { @@ -225,7 +438,7 @@ export default { data: t.values.map((v) => [Number(v[0]) * 1000, Number(v[1]), type]) } }) - + this.chartOption.yAxis[0].startValue = getYAxisBeginValue(this.chartOption.series) this.chartOption.yAxis[0].axisLabel.formatter = (value) => { if (type === 'percent') { return unitConvert(value, type)[0] @@ -302,6 +515,7 @@ export default { this.legendSelectChange(legendList, legend) }, legendSelectChange (legendList, legend) { + const showLegend = [] if (legendList.length > 0) { this.chartOptionLineData.forEach(t => { legendList.forEach(r => { @@ -309,6 +523,7 @@ export default { this.dispatchSelectAction('legendUnSelect', t.legend) } if (!t.show) { + showLegend.push(t.legend) this.dispatchSelectAction('legendSelect', t.legend) } }) @@ -317,11 +532,16 @@ export default { this.chartOptionLineData.forEach(t => { legend.forEach(r => { if (t.legend !== r.legend) { + showLegend.push(t.legend) this.dispatchSelectAction('legendSelect', t.legend) } }) }) } + const _option = this.myChart.getOption() + const _series = _option.series.filter(s => showLegend.includes(s.name)) + _option.yAxis[0].startValue = getYAxisBeginValue(_series) + this.myChart.setOption(_option) }, resize () { this.myChartArray.forEach(t => { diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue index 63bd7c33..260b0ac3 100644 --- a/src/views/charts2/charts/npm/NpmTrafficLine.vue +++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue @@ -30,28 +30,30 @@