diff --git a/nezha-fronted/src/components/chart/chart/legend.vue b/nezha-fronted/src/components/chart/chart/legend.vue index d7c49c97c..35957f32c 100644 --- a/nezha-fronted/src/components/chart/chart/legend.vue +++ b/nezha-fronted/src/components/chart/chart/legend.vue @@ -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) => { diff --git a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue index 9aa0e6919..f3dbfef98 100644 --- a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue @@ -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) { @@ -299,7 +303,7 @@ export default { leftMin = leftMax leftMax = temp } - opts.scales.left.range = (self, initMin, initMax, scaleKey)=>{ + opts.scales.left.range = (self, initMin, initMax, scaleKey) => { if (typeof (leftMin) === 'undefined') { if (initMin > 0) { leftMin = initMin / 2 @@ -327,7 +331,7 @@ export default { rightMin = rightMax rightMax = temp } - opts.scales.right.range = (self, initMin, initMax, scaleKey)=>{ + opts.scales.right.range = (self, initMin, initMax, scaleKey) => { if (typeof (rightMin) === 'undefined') { if (initMin > 0) { rightMin = initMin / 2 @@ -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 () { diff --git a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js index 85d81f2f8..3c84375b9 100644 --- a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js +++ b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js @@ -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 } diff --git a/nezha-fronted/src/components/chart/chart/uplot/stack.js b/nezha-fronted/src/components/chart/chart/uplot/stack.js index e2c5baccd..19bbb7a49 100644 --- a/nezha-fronted/src/components/chart/chart/uplot/stack.js +++ b/nezha-fronted/src/components/chart/chart/uplot/stack.js @@ -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: [