feat: use option colors

src/helper.ts

@@ -902,3 +902,13 @@ export const sortSeries = (props: {
     max: 0,
   };
 };
+
+/**
+ * Retrieves the colors of options for a given field.
+ * @param {Field | undefined} field - The field object.
+ * @returns {Map<string, string>} - A map containing the names of options as keys and their respective color values as values.
+ */
+export const getOptionColors = (field: Field | undefined) => {
+  if (field?.entityType !== 'SingleSelect') return new Map();
+  return new Map(field.property.options.map(x => [x.name, x.color.value]));
+};

src/model/echarts_base.ts

@@ -290,6 +290,11 @@ export abstract class EchartsBase {
         type: 'boolean',
         description: t(Strings.exclude_zero_point_describle),
       },
+      useOptionColors: {
+        title: t(Strings.use_option_colors),
+        type: 'boolean',
+        description: t(Strings.use_option_colors_describle),
+      },
       theme: {
         title: t(Strings.select_theme_color),
         type: 'string',

src/model/echarts_column.ts

@@ -1,7 +1,7 @@
 import { Field, Record } from '@apitable/widget-sdk';
 import { ChartType, StackType } from "./interface";
 import { Strings, t } from "../i18n";
-import { formatterValue, maxRenderNum, processChartData, processRecords, sortSeries } from '../helper';
+import { formatterValue, getOptionColors, maxRenderNum, processChartData, processRecords, sortSeries } from '../helper';
 import { BarSeriesOption } from 'echarts';
 import { EchartsBase } from './echarts_base';
 
@@ -146,7 +146,7 @@ export class EchartsColumn extends EchartsBase {
 
     const isColumn = this.type === ChartType.EchartsColumn;
     const isPercent = this.stackType === StackType.Percent
-    const { axisSortType, isCountNullValue, excludeZeroPoint } = chartStyle;
+    const { axisSortType, isCountNullValue, excludeZeroPoint, useOptionColors } = chartStyle;
     const dimensionMetricsMap = this.getFormDimensionMetricsMap();
     const yKey = dimensionMetricsMap.metrics.key;
     // Statistical dimension attribute, statistical value attribute, statistical value name.
@@ -199,6 +199,7 @@ export class EchartsColumn extends EchartsBase {
       chartStyle,
       { noFormatMetric, metricsField, axisLength: axisNames.length }
     );
+    const colorMap = getOptionColors(seriesFieldInstance);
 
     const series: BarSeriesOption[] = [];
     if (axisSortType && seriesFieldInstance) {
@@ -216,11 +217,13 @@ export class EchartsColumn extends EchartsBase {
             [axisKey]: sereisItem[dataIndex],
             barWidth,
           } : {};
+          const itemStyle = { color: colorMap.get(item.sortKey) || '#000000' };
           series.push({
             ...styleOption.series,
             name: item.sortKey,
             data: [sereisItem],
             ...extraField,
+            ...(useOptionColors ? { itemStyle } : {}),
           });
         }
       }

src/model/echarts_line.ts

@@ -1,7 +1,7 @@
 import { LineSeriesOption } from 'echarts';
 import { ChartType, StackType } from "./interface";
 import { Strings, t } from '../i18n';
-import { formatterValue, maxRenderNum, processChartData, processRecords, sortSeries } from '../helper';
+import { formatterValue, getOptionColors, maxRenderNum, processChartData, processRecords, sortSeries } from '../helper';
 import { EchartsBase } from './echarts_base';
 import { Field } from '@apitable/widget-sdk';
 
@@ -103,7 +103,7 @@ export class EchartsLine extends EchartsBase {
     const { seriesField, dimension, metrics, metricsType, isSplitMultipleValue,
       isFormatDatetime: _isFormatDatetime, datetimeFormatter } = chartStructure;
 
-    const { axisSortType, isCountNullValue, excludeZeroPoint } = chartStyle;
+    const { axisSortType, isCountNullValue, excludeZeroPoint, useOptionColors } = chartStyle;
     const dimensionMetricsMap = this.getFormDimensionMetricsMap();
     // Statistical dimension attribute, statistical value attribute, statistical value name.
     const dimensionField = fields.find(field => field.id === dimension) as Field;
@@ -153,15 +153,18 @@ export class EchartsLine extends EchartsBase {
       metricsField,
       isColumn: true,
     });
+    const colorMap = getOptionColors(seriesFieldInstance);
 
     const series: LineSeriesOption[] = [];
     if (axisSortType && seriesFieldInstance) {
       for (let i = 0; i < sortedSeries.length; i++) {
         const item = sortedSeries[i];
+        const itemStyle = { color: colorMap.get(item.sortKey) || '#000000' };
         series.push({
           ...styleOption.series,
           name: item.sortKey,
           data: item.series.slice(0, maxRenderNum),
+          ...(useOptionColors ? { itemStyle } : {}),
         });
       }
     } else {

src/model/echarts_pie.ts

@@ -3,7 +3,7 @@ import { EchartsBase } from './echarts_base';
 import { ChartType, StackType } from './interface';
 import { Strings, t } from '../i18n';
 import { sortBy } from '../sortBy';
-import { getNumberBaseFieldPrecision, maxRenderNum, processChartData, processRecords } from '../helper';
+import { getNumberBaseFieldPrecision, getOptionColors, maxRenderNum, processChartData, processRecords } from '../helper';
 
 export class EchartsPie extends EchartsBase {
   type = ChartType.EchartsPie;
@@ -56,11 +56,13 @@ export class EchartsPie extends EchartsBase {
   }
 
   getChartStyleFormJSON() {
+    const commonFormConfigJson = this.getCommonFormConfigJson();
+    delete commonFormConfigJson.excludeZeroPoint;
     return {
       title: t(Strings.design_chart_style),
       type: 'object',
       properties: {
-        ...this.getCommonFormConfigJson(),
+        ...commonFormConfigJson,
       },
     };
   }
@@ -156,7 +158,7 @@ export class EchartsPie extends EchartsBase {
     // Statistic field id, type of statistic specified field (sum, average),
     // type of statistic value, whether to cut multi-selected values, date formatting.
     const { dimension, metrics, metricsType, isSplitMultipleValue, isFormatDatetime: _isFormatDatetime, datetimeFormatter } = chartStructure;
-    const { isCountNullValue } = chartStyle;
+    const { isCountNullValue, useOptionColors } = chartStyle;
     const dimensionMetricsMap = this.getFormDimensionMetricsMap();
     // Statistical dimensional attributes, statistical numerical attributes.
     const dimensionField = fields.find(field => field.id === dimension);
@@ -194,17 +196,23 @@ export class EchartsPie extends EchartsBase {
     data = data.slice(0, maxRenderNum);
 
     const styleOption = this.getChartStyleOptions(chartStructure, chartStyle, { metricsType, data, metricsField });
+    const dataWithColors = (() => {
+      if (!useOptionColors) return data;
+      const colorMap = getOptionColors(dimensionField);
+      if (!colorMap.size) return data;
+      return data.map(item => ({ ...item, itemStyle: { color: colorMap.get(item.name) || '#000000' }}));
+    })();
     const options = {
       ...styleOption.commonOption,
-      series: [{ ...styleOption.series, data }],
+      series: [{ ...styleOption.series, data: dataWithColors }],
     };
 
     if (this.stackType === StackType.Stack) {
       return {
         ...options,
         series: [
-          {  ...styleOption.series, data},
-          { ...styleOption.stackSeries, data }
+          {  ...styleOption.series, data: dataWithColors},
+          { ...styleOption.stackSeries, data: dataWithColors }
         ]
       };
     }

src/model/echarts_scatter.ts

@@ -28,11 +28,13 @@ export class EchartsScatter extends EchartsBase {
 
   getChartStyleFormJSON(fields: Field[]) {
     const dimensionMetricsMap = this.getFormDimensionMetricsMap();
+    const commonFormConfigJson = this.getCommonFormConfigJson();
+    delete commonFormConfigJson.useOptionColors;
     return {
       title: t(Strings.design_chart_style),
       type: 'object',
       properties: {
-        ...this.getCommonFormConfigJson(),
+        ...commonFormConfigJson,
         axisSortType: {
           title: t(Strings.chart_sort),
           type: 'object',

src/ui_schema.tsx

@@ -112,6 +112,11 @@ export const getUiSchema = (viewId: string) => {
           showTitle: false,
         },
       },
+      useOptionColors: {
+        'ui:options': {
+          showTitle: false,
+        },
+      },
       theme: {
         'ui:widget': (props) => {
           return <ThemeSelect value={props.value} onChange={props.onChange} />;

strings.json

@@ -236,6 +236,14 @@
             "zh_CN": "脱离零值比例",
             "en_US": "Exclude zero point"
         },
+        "use_option_colors": {
+            "zh_CN": "使用选项颜色",
+            "en_US": "Use option colors"
+        },
+        "use_option_colors_describle": {
+            "zh_CN": "使用选项颜色",
+            "en_US": "Use option colors"
+        },
         "show_smooth_line": {
             "zh_CN": "开启平滑曲线",
             "en_US": "Show smooth line"