Merge pull request #11094 from dataease/pr@dev-v2@feat_series_color

feat(图表): 饼图、玫瑰图、雷达图、矩形树图支持设置序列颜色

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;

core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts

@@ -22,7 +22,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
     '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<RadarOptions, G2Radar> {
   protected setupOptions(chart: Chart, options: RadarOptions): RadarOptions {
     return flow(
       this.configTheme,
+      this.configColor,
       this.configLabel,
       this.configLegend,
       this.configMultiSeriesTooltip,

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<TreemapOptions, G2Treemap> {
   ]
   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<TreemapOptions, G2Treemap> {
     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() {

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',

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<PieOptions, G2Pie> {
@@ -25,7 +31,7 @@ export class Pie extends G2PlotChartView<PieOptions, G2Pie> {
   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<PieOptions, G2Pie> {
     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<PieOptions, G2Pie> {
 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)

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<RoseOptions, G2Rose> {
     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<RoseOptions, G2Rose> {
 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)

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

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

@@ -886,6 +886,62 @@ export function setUpStackSeriesColor(
   return result
 }
 
+export function getSingleDimensionColor<O extends PickOptions = Options>(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<string>()
+  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
+}
+
 /**
  * 注册极值点事件处理函数
  * 该函数用于在新建的图表上注册极值点显示的事件处理逻辑，根据图表类型和配置数据处理极值点的显示