From 5ca8fbb017e64321902dfa9755ed606202105f6b Mon Sep 17 00:00:00 2001 From: wisonic Date: Tue, 23 Jul 2024 12:24:19 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=95=A3=E7=82=B9?= =?UTF-8?q?=E5=9B=BE=E3=80=81=E8=B1=A1=E9=99=90=E5=9B=BE=E3=80=81=E6=BC=8F?= =?UTF-8?q?=E6=96=97=E5=9B=BE=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E5=BA=8F?= =?UTF-8?q?=E5=88=97=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/panel/charts/others/funnel.ts | 8 +++-- .../js/panel/charts/others/quadrant.ts | 29 ++++++++++++++++--- .../js/panel/charts/others/scatter.ts | 13 ++++++++- 3 files changed, 43 insertions(+), 7 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts index 48060932aa..1a80a98cfe 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts @@ -1,6 +1,6 @@ import { FunnelOptions, Funnel as G2Funnel } from '@antv/g2plot/esm/plots/funnel' import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot' -import { flow } from '@/views/chart/components/js/util' +import { flow, setUpSingleDimensionSeriesColor } from '@/views/chart/components/js/util' import { getPadding } from '../../common/common_antv' import { useI18n } from '@/hooks/web/useI18n' @@ -22,7 +22,7 @@ export class Funnel extends G2PlotChartView { ] propertyInner: EditorPropertyInner = { 'background-overall-component': ['all'], - 'basic-style-selector': ['colors', 'alpha'], + 'basic-style-selector': ['colors', 'alpha', 'seriesColor'], 'label-selector': ['fontSize', 'color', 'hPosition', 'labelFormatter'], 'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter', 'show'], 'title-selector': [ @@ -121,9 +121,13 @@ export class Funnel extends G2PlotChartView { return tmpOptions } + public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] { + return setUpSingleDimensionSeriesColor(chart, data) + } protected setupOptions(chart: Chart, options: FunnelOptions): FunnelOptions { return flow( this.configTheme, + this.configSingleDimensionColor, this.configLabel, this.configMultiSeriesTooltip, this.configLegend diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts index 06e76652ce..f727840883 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts @@ -3,7 +3,7 @@ import { G2PlotDrawOptions } from '@/views/chart/components/js/panel/types/impl/g2plot' import { ScatterOptions, Scatter as G2Scatter } from '@antv/g2plot/esm/plots/scatter' -import { flow, parseJson } from '../../../util' +import { flow, parseJson, setUpSingleDimensionSeriesColor } from '../../../util' import { valueFormatter } from '@/views/chart/components/js/formatter' import { useI18n } from '@/hooks/web/useI18n' import { isEmpty, map } from 'lodash-es' @@ -28,7 +28,13 @@ export class Quadrant extends G2PlotChartView { 'quadrant-selector' ] propertyInner: EditorPropertyInner = { - 'basic-style-selector': ['colors', 'alpha', 'scatterSymbol', 'scatterSymbolSize'], + 'basic-style-selector': [ + 'colors', + 'alpha', + 'scatterSymbol', + 'scatterSymbolSize', + 'seriesColor' + ], 'label-selector': ['fontSize', 'color'], 'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'], 'x-axis-selector': [ @@ -393,10 +399,25 @@ export class Quadrant extends G2PlotChartView { } return chart } - + protected configColor(chart: Chart, options: ScatterOptions): ScatterOptions { + const { xAxis, yAxis, yAxisExt } = chart + if (!(xAxis?.length && yAxis?.length && yAxisExt?.length)) { + return options + } + return this.configSingleDimensionColor(chart, options) + } + public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] { + const { xAxis, yAxis, yAxisExt } = chart + if (!(xAxis?.length && yAxis?.length && yAxisExt?.length)) { + return [] + } + const tmp = data[0].data + return setUpSingleDimensionSeriesColor(chart, tmp) + } protected setupOptions(chart: Chart, options: ScatterOptions) { return flow( this.configTheme, + this.configColor, this.configLabel, this.configTooltip, this.configLegend, @@ -405,7 +426,7 @@ export class Quadrant extends G2PlotChartView { this.configAnalyse, this.configSlider, this.configBasicStyle - )(chart, options) + )(chart, options, {}, this) } constructor() { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts index 70ebf7a9ba..4c13ced8f3 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts @@ -27,7 +27,13 @@ export class Scatter extends G2PlotChartView { 'linkage' ] propertyInner: EditorPropertyInner = { - 'basic-style-selector': ['colors', 'alpha', 'scatterSymbol', 'scatterSymbolSize'], + 'basic-style-selector': [ + 'colors', + 'alpha', + 'scatterSymbol', + 'scatterSymbolSize', + 'seriesColor' + ], 'label-selector': ['fontSize', 'color', 'labelFormatter'], 'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'], 'x-axis-selector': [ @@ -69,6 +75,10 @@ export class Scatter extends G2PlotChartView { axis: AxisType[] = ['xAxis', 'yAxis', 'extBubble', 'filter', 'drill', 'extLabel', 'extTooltip'] axisConfig: AxisConfig = { ...this['axisConfig'], + yAxis: { + ...this['axisConfig'].yAxis, + limit: undefined + }, extBubble: { name: `${t('chart.bubble_size')} / ${t('chart.quota')}`, type: 'q', @@ -234,6 +244,7 @@ export class Scatter extends G2PlotChartView { protected setupOptions(chart: Chart, options: ScatterOptions) { return flow( this.configTheme, + this.configColor, this.configLabel, this.configTooltip, this.configLegend,