fix:修改 legend 点击 显示错误的问题

This commit is contained in:
zhangyu
2021-12-22 19:02:20 +08:00
parent f483ae00c4
commit 9d8d4d30e3
9 changed files with 26 additions and 15 deletions

View File

@@ -127,7 +127,8 @@ export default {
value: value,
realValue: value,
showValue: showValue,
name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex),
name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name,
alias: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias,
labels: data.metric,
seriesIndex: expressionIndex,
dataIndex: dataIndex,

View File

@@ -88,8 +88,9 @@ export default {
gauge.max = getMetricTypeValue(data.values, 'max')
gauge.min = getMetricTypeValue(data.values, 'min')
gauge.label = data.metric
gauge.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
gauge.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
gauge.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias
gauge.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
gauge.alias = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias
gauge.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(gauge.value, null, -1, 2)
// gauge.value = gauge.showValue
gauge.mapping = this.selectMapping(gauge.value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)

View File

@@ -110,7 +110,8 @@ export default {
value: value,
realValue: value,
showValue: showValue,
name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex),
name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name,
alias: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias,
labels: data.metric,
seriesIndex: expressionIndex,
dataIndex: dataIndex,
@@ -132,7 +133,7 @@ export default {
const self = this
return `<div>
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.name}</div>
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>

View File

@@ -68,13 +68,15 @@ export default {
width: '',
height: '',
legend: '',
name: '',
mapping: {
}
}
stat.value = getMetricTypeValue(data.values, chartInfo.param.statistics)
stat.label = data.metric
stat.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
stat.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias
stat.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
stat.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(stat.value, null, -1, 2)
stat.mapping = this.selectMapping(stat.value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
this.statData.push(stat)

View File

@@ -108,7 +108,8 @@ export default {
data.$value = value
data.values = value
data.showValue = showValue
data.$legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
data.$legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias
data.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
// data.mapping = mapping
data.keys = ''
// eslint-disable-next-line vue/no-mutating-props

View File

@@ -108,7 +108,8 @@ export default {
value: value,
realValue: value,
showValue: showValue,
name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex),
name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name,
alias: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias,
labels: data.metric,
seriesIndex: expressionIndex,
dataIndex: dataIndex,

View File

@@ -4,7 +4,7 @@ export default {
const self = this
let str = ''
if (this.chartInfo.param.text === 'all') {
str += params.data.name
str += params.data.alias
str += '\n'
str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
}
@@ -12,7 +12,7 @@ export default {
str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
}
if (this.chartInfo.param.text === 'legend') {
str += params.data.name
str += params.data.alias
}
if (this.chartInfo.param.text === 'none') {
str += ''

View File

@@ -48,7 +48,7 @@ export default {
const s = lodash.cloneDeep(seriesTemplate)
if (s) {
s.data = data.values
s.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
s.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
if (chartInfo.param.stack) { // 堆叠
s.stack = 'Total'
}
@@ -114,7 +114,10 @@ export default {
})
}
this.legends.push({ name, alias, statistics, color: this.colorList[colorIndex] })
return alias
return {
name,
alias
}
},
handleLegendAlias (legend, aliasExpression) {
if (/\{\{.+\}\}/.test(aliasExpression)) {

View File

@@ -73,7 +73,8 @@ export default {
return {
chartData: [],
loading: true,
isError: false
isError: false,
MultipleTime: false
}
},
computed: {
@@ -86,8 +87,8 @@ export default {
},
methods: {
isGroup,
dateChange (filter, isMultipleTime) {
console.log(filter, isMultipleTime)
dateChange (filter, MultipleTime) {
console.log(filter, MultipleTime)
this.loading = true
// TODO assetInfo、endpointInfo、echarts等进行不同的处理
let startTime = filter.start_time