dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(图表): 折线图标签颜色可以根据范围设定 #12536

Browse Source
This commit is contained in:
jianneng-fit2cloud 2024-11-21 19:23:39 +08:00
parent fee4441a95
commit 7ff18f0d4f
4 changed files with 71 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
View File

@ -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<AreaOptions, G2Area> {
}
}
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<AreaOptions, G2Area> {
? -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<AreaOptions, G2Area> {
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)
}
}

8
core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
View File

@ -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<LineOptions, G2Line> {
}
}
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<LineOptions, G2Line> {
? -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<LineOptions, G2Line> {
textAlign: 'start',
textBaseline: 'top',
fontSize: labelCfg.fontSize,
fill: labelCfg.color
fill: color
}
})
return group

5
core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
View File

@ -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 = {

48
core/core-frontend/src/views/chart/components/js/util.ts
View File

@ -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
}