From 7ff18f0d4ffe812c7f9271a7fa5d222e108913f4 Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Thu, 21 Nov 2024 19:23:39 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=8A=98=E7=BA=BF?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E7=AD=BE=E9=A2=9C=E8=89=B2=E5=8F=AF=E4=BB=A5?= =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E8=8C=83=E5=9B=B4=E8=AE=BE=E5=AE=9A=20#12536?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/js/panel/charts/line/area.ts | 14 +++++- .../components/js/panel/charts/line/line.ts | 8 +++- .../components/js/panel/common/common_antv.ts | 5 +- .../src/views/chart/components/js/util.ts | 48 +++++++++++++++++++ 4 files changed, 71 insertions(+), 4 deletions(-) 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 1a8fa84851..18c155090c 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 @@ -13,6 +13,8 @@ import { import { cloneDeep } from 'lodash-es' import { flow, + getLineConditions, + getLineLabelColorByCondition, hexColorToRGBA, parseJson, setUpStackSeriesColor @@ -135,6 +137,7 @@ export class Area extends G2PlotChartView { } } const { label: labelAttr, basicStyle } = parseJson(chart.customAttr) + const conditions = getLineConditions(chart) const formatterMap = labelAttr.seriesLabelFormatter?.reduce((pre, next) => { pre[next.id] = next return pre @@ -163,6 +166,9 @@ export class Area extends G2PlotChartView { ? -2 - basicStyle.lineSymbolSize : 10 + basicStyle.lineSymbolSize const value = valueFormatter(data.value, labelCfg.formatterCfg) + const color = + getLineLabelColorByCondition(conditions, data.value, data.quotaList[0].id) || + labelCfg.color const group = new Group({}) group.addShape({ type: 'text', @@ -173,7 +179,7 @@ export class Area extends G2PlotChartView { textAlign: 'start', textBaseline: 'top', fontSize: labelCfg.fontSize, - fill: labelCfg.color + fill: color } }) return group @@ -311,6 +317,7 @@ export class StackArea extends Area { } protected configLabel(chart: Chart, options: AreaOptions): AreaOptions { const { label: labelAttr, basicStyle } = parseJson(chart.customAttr) + const conditions = getLineConditions(chart) if (!labelAttr?.show) { return { ...options, @@ -334,7 +341,10 @@ export class StackArea extends Area { fill: labelAttr.color, fontSize: labelAttr.fontSize }, - formatter: function (param: Datum) { + formatter: function (param: Datum, point) { + point.color = + getLineLabelColorByCondition(conditions, param.value, point._origin.quotaList[0]) || + labelAttr.color return valueFormatter(param.value, labelAttr.labelFormatter) } } 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 0ef10111aa..5f30f318a2 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 @@ -11,6 +11,8 @@ import { } from '../../common/common_antv' import { flow, + getLineConditions, + getLineLabelColorByCondition, hexColorToRGBA, parseJson, setUpGroupSeriesColor @@ -134,6 +136,7 @@ export class Line extends G2PlotChartView { } } const { label: labelAttr, basicStyle } = parseJson(chart.customAttr) + const conditions = getLineConditions(chart) const formatterMap = labelAttr.seriesLabelFormatter?.reduce((pre, next) => { pre[next.id] = next return pre @@ -162,6 +165,9 @@ export class Line extends G2PlotChartView { ? -2 - basicStyle.lineSymbolSize : 10 + basicStyle.lineSymbolSize const value = valueFormatter(data.value, labelCfg.formatterCfg) + const color = + getLineLabelColorByCondition(conditions, data.value, data.quotaList[0].id) || + labelCfg.color const group = new Group({}) group.addShape({ type: 'text', @@ -172,7 +178,7 @@ export class Line extends G2PlotChartView { textAlign: 'start', textBaseline: 'top', fontSize: labelCfg.fontSize, - fill: labelCfg.color + fill: color } }) return group diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts index e4ce12a555..4da701e2a7 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts @@ -1334,8 +1334,11 @@ export function getConditions(chart: Chart) { const annotations = [] if (!threshold.enable) return annotations const conditions = threshold.lineThreshold ?? [] - + const yAxisIds = chart.yAxis.map(i => i.id) for (const field of conditions) { + if (!yAxisIds.includes(field.fieldId)) { + continue + } for (const t of field.conditions) { if ([2, 3, 4].includes(field.field.deType)) { const annotation = { diff --git a/core/core-frontend/src/views/chart/components/js/util.ts b/core/core-frontend/src/views/chart/components/js/util.ts index 887d7bb211..ee73bdf6a8 100644 --- a/core/core-frontend/src/views/chart/components/js/util.ts +++ b/core/core-frontend/src/views/chart/components/js/util.ts @@ -1071,3 +1071,51 @@ export function filterEmptyMinValue(sourceData, field) { ) return notEmptyMinValue } + +/** + * 获取折线条件样式 + * @param chart + */ +export function getLineConditions(chart) { + const { threshold } = parseJson(chart.senior) + const conditions = [] + if (threshold.enable) { + threshold.lineThreshold.forEach(item => + item.conditions.forEach(c => + conditions.push({ + fieldId: item.fieldId, + term: c.term, + value: c.value, + color: c.color, + min: c.min, + max: c.max + }) + ) + ) + } + return conditions +} + +/** + * 根据折线阈值条件获取新的标签颜色 + * @param conditions + * @param value + * @param fieldId + */ +export function getLineLabelColorByCondition(conditions, value, fieldId) { + const fieldConditions = conditions.filter(item => item.fieldId === fieldId) + let color = undefined + if (fieldConditions.length) { + fieldConditions.some(item => { + if ( + (item.term === 'lt' && value <= item.value) || + (item.term === 'gt' && value >= item.value) || + (item.term === 'between' && value >= item.min && value <= item.max) + ) { + color = item.color + return true + } + }) + } + return color +}