NEZ-3211 fix: dashboard 时序图表性能优化

This commit is contained in:
zhangyu
2023-11-08 18:03:30 +08:00
parent f0079f5d54
commit ae39e5c62d
4 changed files with 37 additions and 16 deletions

View File

@@ -164,6 +164,7 @@ export default {
echarts.setSeries(sindex, { show: false, focus: false })
}
})
echarts.setSeries(index + 1, { show: true, focus: false })
this.isGrey = this.isGrey.map((g, i) => i !== index)
} else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
echarts.series.forEach((seriesItem, sindex) => {

View File

@@ -279,18 +279,22 @@ export default {
getStackedOpts('', opts, data)
}
this.renderMinMax(opts)
console.log(opts)
if (getChart(this.chartId)) {
getChart(this.chartId).destroy()
}
setTimeout(() => { // 延迟加载 保证legend的高度正常
const dom = document.getElementById(`chart-canvas-${this.chartId}`)
const width = dom.offsetWidth
const height = dom.offsetHeight
opts.width = width
opts.height = height
const chartUplot = new UPlot(opts, data, document.getElementById(`chart-canvas-${this.chartId}`))
let chartUplot = ''
chartUplot = new UPlot(opts, data, document.getElementById(`chart-canvas-${this.chartId}`))
setChart(this.chartId, chartUplot)
}, 100)
},
renderMinMax (opts) {
console.log(opts)
let leftMin = this.$lodash.get(this.chartInfo, 'param.min', undefined)
let leftMax = this.$lodash.get(this.chartInfo, 'param.max', undefined)
if (leftMin || leftMax) {
@@ -420,6 +424,7 @@ export default {
this.$refs.legend.isGrey = this.isGrey = arr
}
}
this.renderYaxis()
this.clickout()
},
showSelectedSeries () {
@@ -440,10 +445,12 @@ export default {
this.$refs.legend.isGrey = arr
}
}
this.renderYaxis()
this.clickout()
},
legendChange (isGrey) {
this.isGrey = isGrey
this.renderYaxis()
},
resize () {
setTimeout(() => {
@@ -457,6 +464,27 @@ export default {
u.setSize({ width, height })
}
}, 100)
},
renderYaxis () {
const u = getChart(this.chartId)
let leftShow = false
let rightShow = false
u.series.forEach(item => {
if (item.show && item.scale == 'left') {
leftShow = true
}
if (item.show && item.scale == 'right') {
rightShow = true
}
})
u.axes[1].show = leftShow
u.axes[2].show = rightShow
if (!leftShow) {
u.axes[2].grid.show = true
} else {
u.axes[2].grid.show = false
}
u.redraw(false, true)
}
},
mounted () {

View File

@@ -32,6 +32,7 @@ export default {
methods: {
initSeriesData (chartData) { // 处理数据 以及 series
let time = []
this.legends = []
const seriesData = [] // 返回的数据
const seriesAll = [ // 返回的 series
@@ -51,6 +52,9 @@ export default {
})
chartData.forEach((series, expressionIndex) => { // 首先处理时间 对应点没有值不包括null 则添加undefind
series.forEach((item, seriesIndex) => {
if (chartIndex >= 20 && !this.showAllData) {
return
}
let seriesObjTime = {}
// 若需要统计,处理统计数据
const statisticsTypes = this.chartInfo.param.legend ? this.chartInfo.param.legend.values : ''
@@ -102,7 +106,6 @@ export default {
const obj = {
name: name,
label: alias,
class: series.elements.name + JSON.stringify(series.metric),
scale: isRight ? 'right' : 'left', // right
yAxisIndex: isRight ? 1 : 0, // right
values: (u, v) => series.elements.name + JSON.stringify(series.metric),
@@ -557,7 +560,6 @@ export default {
value: [chart.data[0][dataIdx], chart.data[seriesIdx][dataIdx]],
seriesName: obj.label
}
console.log(params)
if (!params.seriesName) {
return
}

View File

@@ -28,7 +28,6 @@ function stack (data, omit) {
export default function getStackedOpts (title, opt, data, interp) {
const opts = opt
opt.scales = {}
const interped = interp ? interp(data) : data
const stacked = stack(interped, i => false)
@@ -55,15 +54,6 @@ export default function getStackedOpts (title, opt, data, interp) {
}
}
})
// force 0 to be the sum minimum this instead of the bottom series
opts.scales.y = {
range: (u, min, max) => {
const minMax = uPlot.rangeNum(0, max, 0.1, true)
return [0, minMax[1]]
}
}
// restack on toggle
opts.hooks = {
setSeries: [