NEZ-3211 fix: dashboard 时序图表性能优化
This commit is contained in:
@@ -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) => {
|
||||
|
||||
@@ -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 () {
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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: [
|
||||
|
||||
Reference in New Issue
Block a user