From 5f547c2201ee74f8d94d0023354d6519ca3ab77d Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Thu, 24 Jul 2025 09:34:41 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E7=BA=BF=E9=9D=A2=E5=9B=BE=E5=BC=80=E5=90=AF=E7=BC=A9=E7=95=A5?= =?UTF-8?q?=E8=BD=B4=E6=97=B6=EF=BC=8C=E7=BA=B5=E8=BD=B4=E6=9C=80=E5=B0=8F?= =?UTF-8?q?=E5=80=BC=E4=B8=8D=E7=AB=8B=E5=8D=B3=E8=87=AA=E5=8A=A8=E8=AE=A1?= =?UTF-8?q?=E7=AE=97=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/chart/components/js/formatter.ts | 73 ++++++++++++++++++- .../components/js/panel/charts/line/area.ts | 44 ++--------- .../components/js/panel/charts/line/line.ts | 44 ++--------- 3 files changed, 86 insertions(+), 75 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/formatter.ts b/core/core-frontend/src/views/chart/components/js/formatter.ts index 81ea49521f..27c7ac536f 100644 --- a/core/core-frontend/src/views/chart/components/js/formatter.ts +++ b/core/core-frontend/src/views/chart/components/js/formatter.ts @@ -1,6 +1,8 @@ import { find } from 'lodash-es' import { useI18n } from '@/hooks/web/useI18n' import { getLocale } from '@/utils/utils' +import { parseJson } from '@/views/chart/components/js/util' + const { t } = useI18n() export const isEnLocal = !['zh', 'zh-cn', 'zh-CN', 'tw'].includes(getLocale()) @@ -166,7 +168,7 @@ function transSeparatorAndSuffix(value, formatter) { * @param max * @param tickCount */ -export const niceMin = (min, max, tickCount = 5) => { +function niceMin(min, max, tickCount = 5) { // 数据的总跨度 const range = max - min // 将范围均分为 tickCount-1 份， 得到每份的粗略步长 @@ -181,3 +183,72 @@ export const niceMin = (min, max, tickCount = 5) => { // 将 min 向下取整到 niceStep 的整数倍，得到一个更整齐的起始值 return Math.floor(min / niceStep) * niceStep } + +/** + * 监听图例、缩略轴事件，计算y轴的nice最小刻度值 + * @param chart + * @param newChart + */ +export const listenYAxisNiceMinEvents = (chart: Chart, newChart) => { + const yAxis = parseJson(chart.customStyle).yAxis + if (yAxis.axisValue?.auto) { + newChart.on('legend-item-group:click', e => { + if (e.view?.options?.scales) { + const values = e.view.filteredData + .map(d => d.value) + ?.filter(v => v !== null && v !== undefined) + const min = Math.min(...values) + const max = Math.max(...values) + e.view.options.scales.value.min = niceMin(min, max) + e.view.render(true) + } + }) + newChart.on('slider:valuechanged', ev => { + const values = ev.view.filteredData + .map(d => d.value) + ?.filter(v => v !== null && v !== undefined) + const min = Math.min(...values) + const max = Math.max(...values) + if (max !== min) { + ev.view.options.scales.value.min = niceMin(min, max) + } + }) + } +} + +/** + * 计算数据min值的nice值 + * @param chart + * @param options + * @param tmpOptions + */ +export const calcNiceMinValue = (chart, options, tmpOptions) => { + let filteredData + let cfg + const senior = parseJson(chart.senior) + if (senior.functionCfg && senior.functionCfg.sliderShow) { + cfg = { + start: senior.functionCfg.sliderRange[0] / 100, + end: senior.functionCfg.sliderRange[1] / 100 + } + } + const data = options.data || [] + filteredData = data + // 如果有缩略轴，则取缩略轴范围 + if (cfg && cfg.start !== undefined && cfg.end !== undefined) { + const startIndex = Math.floor(cfg.start * data.length) + const endIndex = Math.ceil(cfg.end * data.length) + filteredData = data.slice(startIndex, endIndex) + } + const values = filteredData.map(d => d.value)?.filter(v => v !== null && v !== undefined) + const min = Math.min(...values) + const max = Math.max(...values) + const niceMinValue = niceMin(min, max) + const axis = { + yAxis: { + ...tmpOptions.yAxis, + min: niceMinValue + } + } + return { ...tmpOptions, ...axis } +} diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts index 673766731f..b4709089c4 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts @@ -19,7 +19,11 @@ import { parseJson, setUpStackSeriesColor } from '@/views/chart/components/js/util' -import { niceMin, valueFormatter } from '@/views/chart/components/js/formatter' +import { + calcNiceMinValue, + listenYAxisNiceMinEvents, + valueFormatter +} from '@/views/chart/components/js/formatter' import { LINE_AXIS_TYPE, LINE_EDITOR_PROPERTY, @@ -126,30 +130,7 @@ export class Area extends G2PlotChartView { newChart.on('point:click', action) extremumEvt(newChart, chart, options, container) configPlotTooltipEvent(chart, newChart) - const yAxis = parseJson(chart.customStyle).yAxis - if (yAxis.axisValue?.auto) { - newChart.on('legend-item-group:click', e => { - if (e.view?.options?.scales) { - const values = e.view.filteredData - .map(d => d.value) - ?.filter(v => v !== null && v !== undefined) - const min = Math.min(...values) - const max = Math.max(...values) - e.view.options.scales.value.min = niceMin(min, max) - e.view.render(true) - } - }) - newChart.on('slider:valuechanged', ev => { - const values = ev.view.filteredData - .map(d => d.value) - ?.filter(v => v !== null && v !== undefined) - const min = Math.min(...values) - const max = Math.max(...values) - if (max !== min) { - ev.view.options.scales.value.min = niceMin(min, max) - } - }) - } + listenYAxisNiceMinEvents(chart, newChart) return newChart } @@ -295,18 +276,7 @@ export class Area extends G2PlotChartView { return { ...tmpOptions, ...axis } } if (axisValue?.auto) { - const data = options.data || [] - const values = data.map(d => d.value)?.filter(v => v !== null && v !== undefined) - const min = Math.min(...values) - const max = Math.max(...values) - const niceMinValue = niceMin(min, max) - const axis = { - yAxis: { - ...tmpOptions.yAxis, - min: niceMinValue - } - } - return { ...tmpOptions, ...axis } + return calcNiceMinValue(chart, options, tmpOptions) } return tmpOptions } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts index e7282f957f..a833235d75 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts @@ -20,7 +20,11 @@ import { setUpGroupSeriesColor } from '@/views/chart/components/js/util' import { cloneDeep, defaults, isEmpty } from 'lodash-es' -import { niceMin, valueFormatter } from '@/views/chart/components/js/formatter' +import { + calcNiceMinValue, + listenYAxisNiceMinEvents, + valueFormatter +} from '@/views/chart/components/js/formatter' import { LINE_AXIS_TYPE, LINE_EDITOR_PROPERTY, @@ -130,30 +134,7 @@ export class Line extends G2PlotChartView { newChart.on('point:click', action) extremumEvt(newChart, chart, options, container) configPlotTooltipEvent(chart, newChart) - const yAxis = parseJson(chart.customStyle).yAxis - if (yAxis.axisValue?.auto) { - newChart.on('legend-item-group:click', e => { - if (e.view?.options?.scales) { - const values = e.view.filteredData - .map(d => d.value) - ?.filter(v => v !== null && v !== undefined) - const min = Math.min(...values) - const max = Math.max(...values) - e.view.options.scales.value.min = niceMin(min, max) - e.view.render(true) - } - }) - newChart.on('slider:valuechanged', ev => { - const values = ev.view.filteredData - .map(d => d.value) - ?.filter(v => v !== null && v !== undefined) - const min = Math.min(...values) - const max = Math.max(...values) - if (max !== min) { - ev.view.options.scales.value.min = niceMin(min, max) - } - }) - } + listenYAxisNiceMinEvents(chart, newChart) return newChart } @@ -276,18 +257,7 @@ export class Line extends G2PlotChartView { return { ...tmpOptions, ...axis } } if (axisValue?.auto) { - const data = options.data || [] - const values = data.map(d => d.value)?.filter(v => v !== null && v !== undefined) - const min = Math.min(...values) - const max = Math.max(...values) - const niceMinValue = niceMin(min, max) - const axis = { - yAxis: { - ...tmpOptions.yAxis, - min: niceMinValue - } - } - return { ...tmpOptions, ...axis } + return calcNiceMinValue(chart, options, tmpOptions) } return tmpOptions }