feat: radial bar color demo

__tests__/unit/plots/radial-bar/utils-spec.ts

@@ -7,7 +7,7 @@ describe('utils of radial-bar', () => {
   const starArr = antvStar.map((item) => item[yField]);
   const maxValue = Math.max(...starArr);
   it('getScaleMax: normal', () => {
-    expect(getScaleMax(300, yField, antvStar)).toBe((maxValue * 360) / 300);
+    expect(getScaleMax(360, yField, antvStar)).toBe(maxValue);
     expect(getScaleMax(-300, yField, antvStar)).toBe((maxValue * 360) / 300);
     expect(getScaleMax(660, yField, antvStar)).toBe((maxValue * 360) / 300);
   });

examples/radial-bar/basic/demo/color.ts

@@ -0,0 +1,38 @@
+import { RadialBar } from '@antv/g2plot';
+
+const data = [
+  { name: 'X6', star: 297 },
+  { name: 'G', star: 506 },
+  { name: 'AVA', star: 805 },
+  { name: 'G2Plot', star: 1478 },
+  { name: 'L7', star: 2029 },
+  { name: 'G6', star: 7100 },
+  { name: 'F2', star: 7346 },
+  { name: 'G2', star: 10178 },
+];
+
+const bar = new RadialBar('container', {
+  width: 400,
+  height: 300,
+  data,
+  xField: 'name',
+  yField: 'star',
+  maxAngle: 360, //最大旋转角度,
+  radius: 0.8,
+  innerRadius: 0.2,
+  tooltip: {
+    formatter: (datum) => {
+      return { name: 'star数', value: datum.star };
+    },
+  },
+  colorField: 'star',
+  color: ({ star }) => {
+    if (star > 10000) {
+      return 'red';
+    } else if (star > 1000) {
+      return 'orange';
+    }
+    return 'green';
+  },
+});
+bar.render();

examples/radial-bar/basic/demo/meta.json

@@ -10,7 +10,15 @@
         "zh": "玉珏图",
         "en": "basic Radial-Bar chart"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*wmldRZZj9lIAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*GTDCRYkg6V4AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "color.ts",
+      "title": {
+        "zh": "玉珏图 - 自定义颜色",
+        "en": "basic Radial-Bar chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*GTDCRYkg6V4AAAAAAAAAAABkARQnAQ"
     }
   ]
 }

src/plots/radial-bar/types.ts

@@ -15,4 +15,6 @@ export interface RadialBarOptions extends Options {
   readonly radius?: number;
   /** 圆内半径 */
   readonly innerRadius?: number;
+  /** 颜色字段 */
+  readonly colorField?: string;
 }