gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-445 多曲线图分位值问题

Browse Source
This commit is contained in:
hyx
2022-03-31 15:37:30 +08:00
parent d4cece5c9e
commit 23d4e18838
4 changed files with 171 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/utils/unit-convert.js
View File

@@ -118,7 +118,7 @@ export function getUnitType (column) {
/* 单位转换，返回转换后的[value, unit]，type=time时若value<1ms，返回<1ms，type=percent时若value<0.01%，返回<0.01% */
export function valueToRangeValue (value, unitType) {
const values = unitConvert(value, unitType)
const values = unitConvert(Number(value), unitType)
if (values[0] || values[0] === 0) {
switch (unitType) {
case unitTypes.time: {

85
src/views/charts/charts/ChartEchart.vue
View File

@@ -140,7 +140,7 @@ export default {
distance: [-50, 0],
formatter(params) {
const arr = unitConvert(
params.value,
Number(params.value),
chartParams.unitType,
).join(' ')
let desc = ''
@@ -277,50 +277,51 @@ export default {
selectedName = name
}
}
let markLine = {
silent: true,
symbol: 'none',
label: {
distance: [-50, 0],
formatter(params) {
const arr = unitConvert(
params.value,
chartParams.unitType,
).join(' ')
let desc = ''
switch (params.dataIndex) {
case 0: {
desc = 'P50'
break
}
case 1: {
desc = 'P90'
break
}
default:
break
}
return `${arr} (${desc})`
},
},
data: [
{
name: 'P50',
yAxis: self.chartData[0].aggregation.p50
? self.chartData[0].aggregation.p50
: 50,
},
{
name: 'P90',
yAxis: self.chartData[0].aggregation.p90
? self.chartData[0].aggregation.p90
: 90,
},
],
}
let serieArray = []
self.chartOption.series.forEach((item,i) =>{
if(item.name === selectedName){
let markLine = {
silent: true,
symbol: 'none',
label: {
distance: [-50, 0],
formatter(params) {
const arr = unitConvert(
Number(params.value),
chartParams.unitType,
).join(' ')
let desc = ''
switch (params.dataIndex) {
case 0: {
desc = 'P50'
break
}
case 1: {
desc = 'P90'
break
}
default:
break
}
return `${arr} (${desc})`
},
},
data: [
{
name: 'P50',
yAxis: self.chartData[i].aggregation.p50
? self.chartData[i].aggregation.p50
: 50,
},
{
name: 'P90',
yAxis: self.chartData[i].aggregation.p90
? self.chartData[i].aggregation.p90
: 90,
},
],
}
item.markLine = markLine
}
serieArray.push(item)

209
src/views/charts/charts/ChartEchartWithStatistics.vue
View File

@@ -57,57 +57,55 @@ export default {
}
}
})
let markLine = {
silent: true,
symbol: 'none',
label: {
distance: [-50, 0],
formatter(params) {
const arr = unitConvert(
params.value,
chartParams.unitType,
).join(' ')
let desc = ''
switch (params.dataIndex) {
case 0: {
desc = 'P50'
break
}
case 1: {
desc = 'P90'
break
}
default:
break
}
return `${arr} (${desc})`
},
},
data: [
{
name: 'P50',
yAxis: this.chartData[0].aggregation.p50
? this.chartData[0].aggregation.p50
: 50,
},
{
name: 'P90',
yAxis: this.chartData[0].aggregation.p90
? this.chartData[0].aggregation.p90
: 90,
},
],
}
if(this.statisticsData.length === 1){
let markLine = {
silent: true,
symbol: 'none',
label: {
distance: [-50, 0],
formatter(params) {
const arr = unitConvert(
Number(params.value),
chartParams.unitType,
).join(' ')
let desc = ''
switch (params.dataIndex) {
case 0: {
desc = 'P50'
break
}
case 1: {
desc = 'P90'
break
}
default:
break
}
return `${arr} (${desc})`
},
},
data: [
{
name: 'P50',
yAxis: this.chartData[0].aggregation.p50
? this.chartData[0].aggregation.p50
: 50,
},
{
name: 'P90',
yAxis: this.chartData[0].aggregation.p90
? this.chartData[0].aggregation.p90
: 90,
},
],
}
let serieTmp = this.chartOption.series[0]
this.chartOption.series[0] = {
...serieTmp,
markLine:markLine
}
}
this.loadEchart()
this.loadEchart(1,true)
},
dispatchLegendSelectAction(name) {
@@ -127,47 +125,6 @@ export default {
toggleStatisticsLegend (index) {
let legendNum = this.statisticsData.length
const chartParams = this.chartInfo.params
let markLine = {
silent: true,
symbol: 'none',
label: {
distance: [-50, 0],
formatter(params) {
const arr = unitConvert(
params.value,
chartParams.unitType,
).join(' ')
let desc = ''
switch (params.dataIndex) {
case 0: {
desc = 'P50'
break
}
case 1: {
desc = 'P90'
break
}
default:
break
}
return `${arr} (${desc})`
},
},
data: [
{
name: 'P50',
yAxis: this.chartData[0].aggregation.p50
? this.chartData[0].aggregation.p50
: 50,
},
{
name: 'P90',
yAxis: this.chartData[0].aggregation.p90
? this.chartData[0].aggregation.p90
: 90,
},
],
}
if(legendNum > 1){
let selectedNum = this.statisticsData.filter(item => {return item.active === true}).length //点击前，高亮legend个数
if(selectedNum === legendNum){//全部曲线高亮时
@@ -205,6 +162,47 @@ export default {
let serieArray = []
this.chartOption.series.forEach((item,i) =>{
if(item.name === selectedName){
let markLine = {
silent: true,
symbol: 'none',
label: {
distance: [-50, 0],
formatter(params) {
const arr = unitConvert(
Number(params.value),
chartParams.unitType,
).join(' ')
let desc = ''
switch (params.dataIndex) {
case 0: {
desc = 'P50'
break
}
case 1: {
desc = 'P90'
break
}
default:
break
}
return `${arr} (${desc})`
},
},
data: [
{
name: 'P50',
yAxis: this.chartData[i].aggregation.p50
? this.chartData[i].aggregation.p50
: 50,
},
{
name: 'P90',
yAxis: this.chartData[i].aggregation.p90
? this.chartData[i].aggregation.p90
: 90,
},
],
}
item.markLine = markLine
}
serieArray.push(item)
@@ -234,6 +232,47 @@ export default {
let selectedAfterNum = this.statisticsData.filter((item,i) => {return item.active === true}).length //点击后，高亮legend个数
if(selectedAfterNum === 1) {//点击后只有一条曲线高亮
let markLine = {
silent: true,
symbol: 'none',
label: {
distance: [-50, 0],
formatter(params) {
const arr = unitConvert(
Number(params.value),
chartParams.unitType,
).join(' ')
let desc = ''
switch (params.dataIndex) {
case 0: {
desc = 'P50'
break
}
case 1: {
desc = 'P90'
break
}
default:
break
}
return `${arr} (${desc})`
},
},
data: [
{
name: 'P50',
yAxis: this.chartData[0].aggregation.p50
? this.chartData[0].aggregation.p50
: 50,
},
{
name: 'P90',
yAxis: this.chartData[0].aggregation.p90
? this.chartData[0].aggregation.p90
: 90,
},
],
}
this.chartOption.series[0].markLine = markLine
}else {
this.chartOption.series[0].markLine = []

6
src/views/charts/charts/chart-echart-mixin.js
View File

@@ -77,13 +77,13 @@ export default {
return allZero
}
},
loadEchart (chartNum) {
loadEchart (chartNum,refresh=false) {
this.$emit('showLoading', true)
try {
this.myChart.setOption(this.chartOption)
this.myChart.setOption(this.chartOption,refresh)
this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart))
if (chartNum && chartNum == 2) {
this.myChart2.setOption(this.chartOption2)
this.myChart2.setOption(this.chartOption2,refresh)
this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
}
const _this = this