From 3f7abb8eed12057fcb938b65dddfa82bbc3abccd Mon Sep 17 00:00:00 2001 From: wisonic Date: Mon, 22 Jul 2024 22:35:01 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E9=A5=BC=E5=9B=BE?= =?UTF-8?q?=E3=80=81=E7=8E=AB=E7=91=B0=E5=9B=BE=E3=80=81=E9=9B=B7=E8=BE=BE?= =?UTF-8?q?=E5=9B=BE=E3=80=81=E7=9F=A9=E5=BD=A2=E6=A0=91=E5=9B=BE=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E8=AE=BE=E7=BD=AE=E5=BA=8F=E5=88=97=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CustomColorStyleSelect.vue | 15 ++++- .../js/panel/charts/others/radar.ts | 3 +- .../js/panel/charts/others/treemap.ts | 18 ++++-- .../components/js/panel/charts/pie/common.ts | 2 +- .../components/js/panel/charts/pie/pie.ts | 29 ++++++++-- .../components/js/panel/charts/pie/rose.ts | 9 ++- .../components/js/panel/types/impl/g2plot.ts | 6 ++ .../src/views/chart/components/js/util.ts | 56 +++++++++++++++++++ 8 files changed, 123 insertions(+), 15 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue index a776185a2d..4166745052 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue @@ -116,9 +116,17 @@ const changeSeriesColor = () => { }) changed && changeBasicStyle('seriesColor') } -watch([chart, chart.value?.type], setupSeriesColor, { - deep: false -}) +watch( + [ + chart, + chart.value?.type, + () => chart.value?.customAttr.basicStyle.calcTopN, + () => chart.value?.customAttr.basicStyle.topN, + () => chart.value?.customAttr.basicStyle.topNLabel + ], + setupSeriesColor, + { deep: false } +) onMounted(() => { useEmitt({ name: 'chart-type-change', callback: changeChartType }) useEmitt({ name: 'chart-data-change', callback: setupSeriesColor }) @@ -576,6 +584,7 @@ const colorItemBorderColor = (index, state) => { height: 20px; border-radius: 3px; margin-right: 4px; + margin-bottom: 4px; cursor: pointer; padding: 2px; border: solid 1px transparent; diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts index d054184e5b..2e61a13be9 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts @@ -22,7 +22,7 @@ export class Radar extends G2PlotChartView { 'linkage' ] propertyInner: EditorPropertyInner = { - 'basic-style-selector': ['colors', 'alpha', 'radarShape'], + 'basic-style-selector': ['colors', 'alpha', 'radarShape', 'seriesColor'], 'label-selector': ['seriesLabelFormatter'], 'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter', 'show'], 'misc-style-selector': ['showName', 'color', 'fontSize', 'axisColor'], @@ -220,6 +220,7 @@ export class Radar extends G2PlotChartView { protected setupOptions(chart: Chart, options: RadarOptions): RadarOptions { return flow( this.configTheme, + this.configColor, this.configLabel, this.configLegend, this.configMultiSeriesTooltip, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts index 11be3a4663..3c1f8fa864 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts @@ -1,6 +1,6 @@ import { TreemapOptions, Treemap as G2Treemap } from '@antv/g2plot/esm/plots/treemap' import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot' -import { flow, parseJson } from '../../../util' +import { flow, parseJson, setUpSingleDimensionSeriesColor } from '../../../util' import { getPadding, getTooltipSeriesTotalMap } from '../../common/common_antv' import { valueFormatter } from '../../../formatter' import { Label } from '@antv/g2plot/lib/types/label' @@ -26,7 +26,7 @@ export class Treemap extends G2PlotChartView { ] propertyInner: EditorPropertyInner = { 'background-overall-component': ['all'], - 'basic-style-selector': ['colors', 'alpha'], + 'basic-style-selector': ['colors', 'alpha', 'seriesColor'], 'label-selector': ['fontSize', 'color', 'showDimension', 'showQuota', 'showProportion'], 'legend-selector': ['icon', 'orient', 'fontSize', 'color', 'hPosition', 'vPosition'], 'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'], @@ -214,14 +214,24 @@ export class Treemap extends G2PlotChartView { legend.show = false return chart } - + public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] { + data?.sort((a, b) => b.value - a.value) + return setUpSingleDimensionSeriesColor(chart, data) + } + protected configColor(chart: Chart, options: TreemapOptions): TreemapOptions { + const data = options.data.children + data.sort((a, b) => b.value - a.value) + const tmpOptions = this.configSingleDimensionColor(chart, { ...options, data }) + return { ...options, color: tmpOptions.color } + } protected setupOptions(chart: Chart, options: TreemapOptions): TreemapOptions { return flow( this.configTheme, + this.configColor, this.configLabel, this.configTooltip, this.configLegend - )(chart, options) + )(chart, options, {}, this) } constructor() { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/common.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/common.ts index 8eb5a51484..390700af28 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/common.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/common.ts @@ -23,7 +23,7 @@ export const PIE_EDITOR_PROPERTY_INNER: EditorPropertyInner = { 'showProportion' ], 'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'], - 'basic-style-selector': ['colors', 'alpha', 'radius'], + 'basic-style-selector': ['colors', 'alpha', 'radius', 'seriesColor'], 'title-selector': [ 'title', 'fontSize', diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts index 7f18e2bffa..be12faae9d 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts @@ -3,7 +3,12 @@ import { G2PlotDrawOptions } from '@/views/chart/components/js/panel/types/impl/g2plot' import { Pie as G2Pie, PieOptions } from '@antv/g2plot/esm/plots/pie' -import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util' +import { + flow, + hexColorToRGBA, + parseJson, + setUpSingleDimensionSeriesColor +} from '@/views/chart/components/js/util' import { getPadding, getTooltipSeriesTotalMap @@ -18,6 +23,7 @@ import { import { Datum } from '@antv/g2plot/esm/types/common' import { add } from 'mathjs' import isEmpty from 'lodash-es/isEmpty' +import { cloneDeep } from 'lodash-es' const DEFAULT_DATA = [] export class Pie extends G2PlotChartView { @@ -25,7 +31,7 @@ export class Pie extends G2PlotChartView { properties = PIE_EDITOR_PROPERTY propertyInner: EditorPropertyInner = { ...PIE_EDITOR_PROPERTY_INNER, - 'basic-style-selector': ['colors', 'alpha', 'radius', 'topN'] + 'basic-style-selector': ['colors', 'alpha', 'radius', 'topN', 'seriesColor'] } axisConfig = PIE_AXIS_CONFIG @@ -271,14 +277,29 @@ export class Pie extends G2PlotChartView { return chart } + public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] { + data = cloneDeep(data) + const { calcTopN, topN, topNLabel } = chart.customAttr.basicStyle + if (data?.length && calcTopN && data.length > topN) { + data.sort((a, b) => b.value - a.value) + data.splice(topN) + data.push({ + field: topNLabel, + value: 0 + }) + } + return setUpSingleDimensionSeriesColor(chart, data) + } + protected setupOptions(chart: Chart, options: PieOptions): PieOptions { return flow( this.configTheme, this.configBasicStyle, + this.configSingleDimensionColor, this.configLabel, this.configTooltip, this.configLegend - )(chart, options) + )(chart, options, {}, this) } constructor(name = 'pie') { @@ -289,7 +310,7 @@ export class Pie extends G2PlotChartView { export class PieDonut extends Pie { propertyInner: EditorPropertyInner = { ...PIE_EDITOR_PROPERTY_INNER, - 'basic-style-selector': ['colors', 'alpha', 'radius', 'innerRadius', 'topN'] + 'basic-style-selector': ['colors', 'alpha', 'radius', 'innerRadius', 'topN', 'seriesColor'] } protected configBasicStyle(chart: Chart, options: PieOptions): PieOptions { const tmp = super.configBasicStyle(chart, options) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts index 2cd4f6e0a4..6388184ca1 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts @@ -13,7 +13,7 @@ import { getPadding, getTooltipSeriesTotalMap } from '@/views/chart/components/js/panel/common/common_antv' -import { parseJson, flow } from '@/views/chart/components/js/util' +import { parseJson, flow, setUpSingleDimensionSeriesColor } from '@/views/chart/components/js/util' import { Label } from '@antv/g2plot/lib/types/label' import { valueFormatter } from '@/views/chart/components/js/formatter' import { Datum } from '@antv/g2plot/esm/types/common' @@ -225,9 +225,14 @@ export class Rose extends G2PlotChartView { return chart } + public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] { + return setUpSingleDimensionSeriesColor(chart, data) + } + protected setupOptions(chart: Chart, options: RoseOptions): RoseOptions { return flow( this.configBasicStyle, + this.configSingleDimensionColor, this.configTheme, this.configLabel, this.configLegend, @@ -243,7 +248,7 @@ export class Rose extends G2PlotChartView { export class RoseDonut extends Rose { propertyInner: EditorPropertyInner = { ...PIE_EDITOR_PROPERTY_INNER, - 'basic-style-selector': ['colors', 'alpha', 'radius', 'innerRadius'] + 'basic-style-selector': ['colors', 'alpha', 'radius', 'innerRadius', 'seriesColor'] } protected configBasicStyle(chart: Chart, options: RoseOptions): RoseOptions { const customAttr = parseJson(chart.customAttr) diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts index a10c836222..fa2c865133 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts @@ -22,6 +22,7 @@ import { getEngine } from '@antv/g2/esm/core' import { getColor, getGroupColor, + getSingleDimensionColor, getStackColor, handleEmptyDataStrategy, setupSeriesColor @@ -155,6 +156,11 @@ export abstract class G2PlotChartView< return { ...options, color } } + protected configSingleDimensionColor(chart: Chart, options: O): O { + const color = getSingleDimensionColor(chart, options) + return { ...options, color } + } + public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] { return setupSeriesColor(chart, data) } 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 659fb0921b..50933ff6c0 100644 --- a/core/core-frontend/src/views/chart/components/js/util.ts +++ b/core/core-frontend/src/views/chart/components/js/util.ts @@ -886,6 +886,62 @@ export function setUpStackSeriesColor( return result } +export function getSingleDimensionColor(chart: Chart, options: O) { + const { basicStyle } = parseJson(chart.customAttr) + const { seriesColor } = basicStyle + if (!seriesColor?.length) { + return + } + const seriesMap = seriesColor.reduce((p, n) => { + p[n.id] = n + return p + }, {}) + const { xAxis, yAxis } = chart + const { data } = options as unknown as Options + if (xAxis?.length && yAxis?.length) { + const seriesSet = new Set() + data?.forEach(d => d.field !== null && seriesSet.add(d.field)) + const tmp = [...seriesSet] + tmp.forEach((c, i) => { + const curAxisColor = seriesMap[c as string] + if (curAxisColor) { + if (i + 1 > basicStyle.colors.length) { + basicStyle.colors.push(curAxisColor.color) + } else { + basicStyle.colors[i] = curAxisColor.color + } + } + }) + } + const color = basicStyle.colors.map(c => hexColorToRGBA(c, basicStyle.alpha)) + return color +} + +export function setUpSingleDimensionSeriesColor( + chart: ChartObj, + data?: any[] +): ChartBasicStyle['seriesColor'] { + const result: ChartBasicStyle['seriesColor'] = [] + const seriesSet = new Set() + const colors = chart.customAttr.basicStyle.colors + const { xAxis, yAxis } = chart + if (!(xAxis?.length && yAxis?.length)) { + return result + } + data?.forEach(item => { + if (seriesSet.has(item.field)) { + return + } + seriesSet.add(item.field) + result.push({ + id: item.field, + name: item.field, + color: colors[(seriesSet.size - 1) % colors.length] + }) + }) + return result +} + /** * 注册极值点事件处理函数 * 该函数用于在新建的图表上注册极值点显示的事件处理逻辑，根据图表类型和配置数据处理极值点的显示