From c8d39f6c9933a0f9364d620e9da034306f11e3b1 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Wed, 26 Oct 2022 14:04:30 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-2293=20fix:chart-line=20datazoom=E5=90=8E?= =?UTF-8?q?=20=E6=9C=AA=E9=87=8D=E6=96=B0=E8=AE=A1=E7=AE=97=E5=88=86?= =?UTF-8?q?=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/chart/chartTimeSeries.vue | 64 ++++++++++++++++++- .../src/components/chart/chartMixin.js | 64 +++++++++++++++++++ 2 files changed, 127 insertions(+), 1 deletion(-) diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index 0f76fe5e0..4c9cf04cb 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -167,7 +167,69 @@ export default { } }) } - + const self = this + getChart(this.chartId).off('dataZoom') + getChart(this.chartId).on('dataZoom', function (params) { + if (params.batch[0].startValue) { + const chartInfo = self.chartInfo + const dataArg = self.$loadsh.cloneDeep(self.series) + dataArg.forEach(item => { + item.data = item.data.filter(value => value[0] > params.batch[0].startValue && value[0] < params.batch[0].endValue) + }) + const maxValueCopies = self.getMaxValue(dataArg, chartInfo) + const maxValue = maxValueCopies.maxValue + const copies = maxValueCopies.copies + const unit = maxValueCopies.unit + const option = { + yAxis: { + minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'), + maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5) + } + } + if (!maxValueCopies.copies) { + option.yAxis.min = 0 + option.yAxis.max = 1 + } else { + option.yAxis.max = undefined + } + if (unit.type == 'Time' || option.yAxis.maxInterval === 1) { + delete option.yAxis.maxInterval + } + getChart(self.chartId) && getChart(self.chartId).setOption({ + yAxis: { + ...option.yAxis + } + }) + } else { + // 处理点击后的 Y轴 + const chartInfo = self.chartInfo + const dataArg = self.series + const maxValueCopies = self.getMaxValue(dataArg, chartInfo) + const maxValue = maxValueCopies.maxValue + const copies = maxValueCopies.copies + const unit = maxValueCopies.unit + const option = { + yAxis: { + minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'), + maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5) + } + } + if (!maxValueCopies.copies) { + option.yAxis.min = 0 + option.yAxis.max = 1 + } else { + option.yAxis.max = undefined + } + if (unit.type == 'Time' || option.yAxis.maxInterval === 1) { + delete option.yAxis.maxInterval + } + getChart(self.chartId) && getChart(self.chartId).setOption({ + yAxis: { + ...option.yAxis + } + }) + } + }) this.isInit = false }, 200) }, diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index 9d32f1231..4683f63b3 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -3,6 +3,7 @@ import * as echarts from 'echarts' import { getMetricTypeValue } from '@/components/common/js/tools' import { getChart, getMousePoint, setChart } from '@/components/common/js/common' import { randomcolor } from '@/components/common/js/radomcolor/randomcolor' +import chartDataFormat from "@/components/chart/chartDataFormat"; export default { data () { return { @@ -318,6 +319,69 @@ export default { }, 300) } }, + getMaxValue (dataArg, chartInfo) { + let maxValue = 0 + let minValue = 0 + if (dataArg.length > 0) { + maxValue = 0 + minValue = 0 + for (let j = 0; j < dataArg.length; j++) { + for (let i = 0; i < dataArg[j].data.length; i++) { + if (!isNaN(dataArg[j].data[i][1])) { + maxValue = (maxValue < Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : maxValue) + minValue = (minValue > Number(dataArg[j].data[i][1]) ? Number(dataArg[j].data[i][1]) : minValue) + } + } + } + } + const chartUnit = chartInfo.unit ? chartInfo.unit : 2 + const unit = chartDataFormat.getUnit(chartUnit) + minValue = minValue > 0 ? 0 : minValue + if (maxValue < 0) { + maxValue = Math.abs(maxValue) + } + if (Math.abs(minValue) > Math.abs(maxValue)) { + maxValue = Math.abs(minValue) + } + maxValue = maxValue - minValue + maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii) + let oldValue = maxValue + if (maxValue < 0) { + oldValue = Math.abs(maxValue) + } + if (minValue < 0) { + oldValue = Math.abs(maxValue - minValue) + } + let dot = 0 + if (maxValue == 1) { + dot++ + } + if (oldValue > 10) { + while (oldValue > 10) { + oldValue = oldValue / 10 + } + } else if (oldValue < 1 && maxValue !== 0) { + while (oldValue < 1 && oldValue > 0) { + oldValue = oldValue * 10 + dot++ + } + maxValue = Math.floor(oldValue) / Math.pow(10, dot) + dot++ + } + const copies = chartDataFormat.copies(oldValue, unit.type) + let oldDot = 2 + if (maxValue <= 1) { + oldDot = dot > 6 ? 6 : dot + } + return { + maxValue, + dot, + copies, + minValue, + unit, + oldDot + } + }, resize () { setTimeout(() => { getChart(this.chartId) && getChart(this.chartId).resize()