diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index e26f64969..1feb8df55 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -166,6 +166,7 @@ export default { methods: { initChart (chartOptions = this.chartOption) { this.setDataLink() + console.log(JSON.stringify(this.chartData)) try { this.isStack = this.chartInfo.param.stack } catch (e) {} diff --git a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue index 85ff76e14..fc32f11f8 100644 --- a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue @@ -319,9 +319,40 @@ export default { } }, showAllSeries () { + const echarts = getChart(this.chartId) + const arr = [] + if (echarts) { + echarts.series.forEach((seriesItem, sindex) => { + if (sindex > 0) { + seriesItem.show = true + arr.push(false) + } + }) + echarts.redraw() + if (this.$refs.legend) { + this.$refs.legend.isGrey = this.isGrey = arr + } + } this.clickout() }, showSelectedSeries () { + const index = this.toolbox.clickIndex + const echarts = getChart(this.chartId) + const arr = [] + if (echarts) { + echarts.series.forEach((seriesItem, sindex) => { + if (sindex > 0) { + seriesItem.show = false + arr.push(true) + } + }) + echarts.series[index + 1].show = !echarts.series[index + 1].show + arr[index] = false + echarts.redraw() + if (this.$refs.legend) { + this.$refs.legend.isGrey = this.isGrey = arr + } + } this.clickout() } }, diff --git a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js index 38bd21cee..321802566 100644 --- a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js +++ b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js @@ -70,6 +70,7 @@ export default { ...ObjTime, ...seriesObjTime } + item.expressionIndex = expressionIndex seriesData.push(Object.keys(seriesObjTime).map(time => seriesObjTime[time])) seriesAll.push(this.renderSeries(item, expressionIndex, seriesIndex, chartIndex)) chartIndex++ @@ -107,7 +108,8 @@ export default { yAxisIndex: isRight ? 1 : 0, // right values: (u, v) => series.elements.name + JSON.stringify(series.metric), stroke: this.seriesColor[chartIndex], - width: 1 / devicePixelRatio + width: 1 / devicePixelRatio, + expressionIndex: series.expressionIndex } if (chartType === 'area') { obj.fill = this.seriesColor[chartIndex] + '20' // 面积图使用 @@ -127,7 +129,8 @@ export default { let tooltipTopOffset = 0 const self = this const tooltip = document.createElement('div') - tooltip.className = 'nz-uplot-tooltip' + tooltip.className = 'nz-uplot-tooltip chart-time-series-tooltip' + tooltip.style.display = 'none' let over let isRender = false function setTooltip (u, e) { // 生成tooltip内容 @@ -138,8 +141,6 @@ export default { const lft = u.valToPos(u.data[0][self.dataIdx], 'x') const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 - const boxWidth = tooltip.offsetWidth - const boxHeight = tooltip.offsetHeight let x = 0 let y = 0 if (self.mousePosition.left < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 @@ -162,6 +163,7 @@ export default { const tooltipModel = self.$lodash.get(self.chartInfo, 'param.tooltip.mode', 'single') if (self.chartInfo.param && !(tooltipModel == 'single')) { params = u.series.map((s, i) => { + if (i == 0) return '' return { seriesIndex: i - 1, yAxisIndex: s.yAxisIndex, @@ -171,11 +173,7 @@ export default { } }) params = params.filter(item => { - if (!item || !item.seriesIndex || !item.show) { - return false - } - const flag = typeof (item.value[1]) == 'undefined' - return !flag + return item && item.show }) } else if (self.seriesIdx) { const obj = self.series[self.seriesIdx - 1] @@ -193,13 +191,13 @@ export default { } else { tooltip.style.display = 'block' } - if (self.isConnect == 'crosshair' && self.chartId !== self.currentMousemove) { + if (self.isConnect == 'crosshair' && self.chartId != self.currentMousemove) { + tooltip.style.display = 'none' return } if (self.seriesIdx) { over.style.cursor = 'pointer' } - tooltip.className += ' chart-time-series-tooltip' let str = '