CN-1728 fix: 动态调整y轴起点
This commit is contained in:
chenjinsong
@@ -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
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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 => {
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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 => {
|
||||
|
||||
@@ -30,28 +30,30 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { trafficLineChartOption } from '@/views/charts2/charts/options/echartOption'
|
||||
import {trafficLineChartOption} from '@/views/charts2/charts/options/echartOption'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import { chartColor3, chartColor4, unitTypes } from '@/utils/constants.js'
|
||||
import { ref, shallowRef } from 'vue'
|
||||
import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
|
||||
import {chartColor3, chartColor4, unitTypes} from '@/utils/constants.js'
|
||||
import {ref, shallowRef} from 'vue'
|
||||
import {stackedLineTooltipFormatter} from '@/views/charts/charts/tools'
|
||||
import axios from 'axios'
|
||||
import { api } from '@/utils/api'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import {api} from '@/utils/api'
|
||||
import {getSecond} from '@/utils/date-util'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
import _ from 'lodash'
|
||||
import i18n from '@/i18n'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
import { useRoute } from 'vue-router'
|
||||
import {useRoute} from 'vue-router'
|
||||
|
||||
import {
|
||||
getLineType,
|
||||
getLineIndexUnit,
|
||||
getLineIndexUnit2,
|
||||
getLineType,
|
||||
getYAxisBeginValue,
|
||||
overwriteUrl,
|
||||
urlParamsHandler
|
||||
} from '@/utils/tools'
|
||||
import ChartError from '@/components/common/Error'
|
||||
import { dataForNpmTrafficLine } from '@/utils/static-data'
|
||||
import {dataForNpmTrafficLine} from '@/utils/static-data'
|
||||
|
||||
export default {
|
||||
name: 'NpmTrafficLine',
|
||||
@@ -293,7 +295,7 @@ export default {
|
||||
data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), t.unitType])
|
||||
}
|
||||
})
|
||||
|
||||
this.chartOption.yAxis[0].startValue = getYAxisBeginValue(this.chartOption.series)
|
||||
this.chartOption.tooltip.formatter = (params) => {
|
||||
params.forEach(t => {
|
||||
this.tabs.forEach(e => {
|
||||
@@ -431,7 +433,6 @@ export default {
|
||||
if (lineData[0] && lineData[0].values.length > 1 && lineData[0].values[0][1] === 0) {
|
||||
lineData[0].values.splice(0, 1)
|
||||
}
|
||||
|
||||
const tabs = _.cloneDeep(this.tabs)
|
||||
const npmQuantity = _.cloneDeep(this.npmQuantity)
|
||||
if (val === 'Sessions/s') {
|
||||
@@ -445,7 +446,7 @@ export default {
|
||||
}
|
||||
})
|
||||
this.tabs = tabs
|
||||
this.initEchartsOption(this.tabs)
|
||||
this.initEchartsOption(this.tabs, null)
|
||||
} else if (val !== 'Bits/s' && val !== 'Packets/s') {
|
||||
this.initLegend(lineData, npmQuantity, true)
|
||||
} else {
|
||||
@@ -480,13 +481,14 @@ export default {
|
||||
e.show = true
|
||||
})
|
||||
this.tabs = newNpmData
|
||||
this.initEchartsOption(this.tabs)
|
||||
this.initEchartsOption(this.tabs, null)
|
||||
}
|
||||
},
|
||||
httpError (e) {
|
||||
this.isNoData = false
|
||||
this.showError = true
|
||||
this.errorMsg = this.errorMsgHandler(e)
|
||||
console.error(e)
|
||||
},
|
||||
/**
|
||||
* echarts框选
|
||||
|
||||
@@ -26,32 +26,38 @@ const mockData = {
|
||||
totalBitsRate: {
|
||||
analysis: {
|
||||
avg: '0'
|
||||
}
|
||||
},
|
||||
values: []
|
||||
},
|
||||
inboundBitsRate: {
|
||||
analysis: {
|
||||
avg: '0'
|
||||
}
|
||||
},
|
||||
values: []
|
||||
},
|
||||
outboundBitsRate: {
|
||||
analysis: {
|
||||
avg: '95229000000000000000'
|
||||
}
|
||||
},
|
||||
values: []
|
||||
},
|
||||
internalBitsRate: {
|
||||
analysis: {
|
||||
avg: '0'
|
||||
}
|
||||
},
|
||||
values: []
|
||||
},
|
||||
throughBitsRate: {
|
||||
analysis: {
|
||||
avg: '0'
|
||||
}
|
||||
},
|
||||
values: []
|
||||
},
|
||||
other: {
|
||||
analysis: {
|
||||
avg: '0.01'
|
||||
}
|
||||
},
|
||||
values: []
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user