fix: 自定义图形颜色和主题切换 (#1989)

* docs: fix custom plot demo

* docs: fix custom plot demo

Author: lessmost

examples/plugin/basic/demo/hill-column.ts

@@ -1,9 +1,10 @@
+import { isObject, deepMix } from '@antv/util';
 import { P, G2 } from '@antv/g2plot';
 
 // 自定义图形
 G2.registerShape('interval', 'hill', {
   draw(info, container) {
-    const { points, style } = info;
+    const { points, style, defaultStyle = {} } = info;
 
     let path = [
       ['M', points[0].x, points[0].y],
@@ -17,6 +18,7 @@ G2.registerShape('interval', 'hill', {
     return container.addShape('path', {
       attrs: {
         path,
+        ...defaultStyle,
         ...style,
       },
     });
@@ -31,7 +33,7 @@ const defaultOptions = {
 // 2. adaptor 实现
 function adaptor(params) {
   const { chart, options } = params;
-  const { data, xField, yField, columnWidthRatio, columnStyle, seriesField } = options;
+  const { data, xField, yField, columnWidthRatio, columnStyle, theme } = options;
 
   // 数据
   chart.data(data);
@@ -46,9 +48,11 @@ function adaptor(params) {
     });
 
   // 设置重叠比率
-  chart.theme({
-    columnWidthRatio: columnWidthRatio,
-  });
+  chart.theme(
+    deepMix({}, isObject(theme) ? theme : G2.getTheme(theme), {
+      columnWidthRatio: columnWidthRatio,
+    })
+  );
 
   const gap = (1 / data.length / 2) * columnWidthRatio; // 左右预留
   chart.scale({
@@ -86,7 +90,6 @@ const hill = new P(
     yField: 'sold',
     columnStyle: {
       fillOpacity: 0.3,
-      fill: 'red',
     },
   },
   adaptor,

examples/plugin/basic/demo/meta.json

@@ -10,7 +10,7 @@
         "zh": "自定义柱图",
         "en": "Custom hill column"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*QcBKQYfdoKUAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*zBrDQJhu1BwAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }