fix:修改legend 跟图例不对应的问题

This commit is contained in:
zhangyu
2021-03-31 16:33:24 +08:00
parent 5fa9bc0188
commit bfc5bbbd1c
3 changed files with 22 additions and 14 deletions

View File

@@ -283,14 +283,7 @@ export default {
screenLegendList:[], */ screenLegendList:[], */
isGrey: [], isGrey: [],
isGreyScreen: [], isGreyScreen: [],
/* bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758', bgColorList: [],
'#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
'#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
'#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
'#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
'#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
'#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
], */
stackTotalColor: null, stackTotalColor: null,
firstShow: false, // 默认不显示操作按钮, firstShow: false, // 默认不显示操作按钮,
caretShow: false, caretShow: false,
@@ -1593,13 +1586,14 @@ export default {
} }
if (pos >= this.data.elements.length) { if (pos >= this.data.elements.length) {
legend.push({ name: 'process_' + host + '-' + elements.id + '-' + innerPos, alias: 'process_' + alias }) legend.push({ name: 'process_' + host + '-' + elements.id + '-' + innerPos, alias: 'process_' + alias })
seriesItem.theData.name = 'process_' + host + '-' + elements.id + '-' + innerPos
seriesItem.metric_name = seriesItem.theData.name
} else { } else {
legend.push({ name: host + '-' + elements.id + '-' + innerPos, alias: alias }) legend.push({ name: host + '-' + elements.id + '-' + innerPos, alias: alias })
seriesItem.theData.name = host + '-' + elements.id + '-' + innerPos
seriesItem.metric_name = seriesItem.theData.name
} }
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host + '-' + elements.id + '-' + innerPos
seriesItem.metric_name = seriesItem.theData.name
// 将秒改为毫秒 // 将秒改为毫秒
// alert('table=='+JSON.stringify(queryItem)) // alert('table=='+JSON.stringify(queryItem))
seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => { seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
@@ -1632,6 +1626,9 @@ export default {
} }
}) })
this.setColor(legend.length) this.setColor(legend.length)
legend.forEach((item, index) => {
item.color = this.bgColorList[index]
})
if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.data.elements.length) { if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.data.elements.length) {
const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime()) const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
let cutPoint = 0 let cutPoint = 0

View File

@@ -502,6 +502,7 @@ export default {
} }
if (promIndex >= this.selectedEndpoints.length) { if (promIndex >= this.selectedEndpoints.length) {
legend.name = 'process_' + legend.name legend.name = 'process_' + legend.name
chartData.name = legend.name
legend.alias = 'process_' + legend.alias legend.alias = 'process_' + legend.alias
} }
this.legend.push(legend) this.legend.push(legend)

View File

@@ -58,11 +58,11 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.tongbi-box{ .compare-box{
line-height: 50px; line-height: 50px;
margin-right: 20px; margin-right: 20px;
} }
.nz-icon-tongbi{ .nz-icon-compare{
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #DEDEDE; border: 1px solid #DEDEDE;
border-radius: 2px; border-radius: 2px;
@@ -107,7 +107,7 @@
</style> </style>
<template> <template>
<div class="multiple-time-box"> <div class="multiple-time-box">
<div :class="showDropdown?'tongbi-box':''"><i class="nz-icon nz-icon-tongbi" @click="changeShowDropdown" /></div> <div :class="showDropdown?'compare-box':''"><i class="nz-icon nz-icon-compare" @click="changeShowDropdown" /></div>
<transition name="multiple-time-datepicker"> <transition name="multiple-time-datepicker">
<div class="calendar top-tools" id="panel-calender" v-show="showDropdown"> <div class="calendar top-tools" id="panel-calender" v-show="showDropdown">
<el-date-picker prefix-icon=" " size="mini" ref="calendar" <el-date-picker prefix-icon=" " size="mini" ref="calendar"
@@ -433,6 +433,16 @@ export default {
text: this.$t('dashboard.panel.noDate') text: this.$t('dashboard.panel.noDate')
} }
this.$emit('change', this.searchTime) this.$emit('change', this.searchTime)
} else {
this.searchTime = []
this.showTime = this.nowTimeType = {
id: 4,
text: this.$t('dashboard.panel.beforeOneHour'),
type: 'hour',
value: 1
}
this.setSearchTime(this.showTime.type, this.showTime.value)
this.$emit('change', this.searchTime)
} }
} }
} }