refactor(stock): 股票图优化，crosshairs 迁移至 constant 中，不在 adaptor 逻辑处理

添加自定义 demo

Author: visiky

examples/more-plots/stock/demo/custom-crosshairs.ts

@@ -0,0 +1,55 @@
+import { Stock } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/qtQ9nYfYJe/stock-data.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const stockPlot = new Stock('container', {
+      data,
+      xField: 'trade_date',
+      yField: ['open', 'close', 'high', 'low'],
+      meta: {
+        vol: { alias: '成交量' },
+        open: { alias: '开盘价' },
+        close: { alias: '收盘价' },
+        high: { alias: '最高价' },
+        low: { alias: '最低价' },
+      },
+      tooltip: {
+        crosshairs: {
+          // 自定义 crosshairs line 样式
+          line: {
+            style: {
+              lineWidth: 0.5,
+              stroke: 'rgba(0,0,0,0.25)',
+            },
+          },
+          text: (type, defaultContent, items) => {
+            let textContent;
+            if (type === 'x') {
+              const item = items[0];
+              textContent = item ? item.title : defaultContent;
+            } else {
+              textContent = `${defaultContent.toFixed(2)}`;
+            }
+            return {
+              position: type === 'y' ? 'start' : 'end',
+              content: textContent,
+              // 自定义 crosshairs text 样式
+              style: {
+                fill: '#dfdfdf',
+              },
+            };
+          },
+          // 自定义 crosshairs textBackground 样式
+          textBackground: {
+            padding: [2, 4],
+            style: {
+              fill: '#666',
+            },
+          },
+        },
+      },
+    });
+
+    stockPlot.render();
+  });

examples/more-plots/stock/demo/meta.json

@@ -35,6 +35,14 @@
         "en": "Custom tooltip fields"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/4EtM9REqIP/8edb0a9e-293e-4b87-bc61-d814e958acbd.png"
+    },
+    {
+      "filename": "custom-crosshairs.ts",
+      "title": {
+        "zh": "自定义 crosshairs 指示器",
+        "en": "Custom crosshairs pointer"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/UKHCDVwzFB/stock-crosshairs.png"
     }
   ]
 }

src/plots/stock/adaptor.ts

@@ -103,28 +103,10 @@ export function axis(params: Params<StockOptions>): Params<StockOptions> {
  */
 export function tooltip(params: Params<StockOptions>): Params<StockOptions> {
   const { chart, options } = params;
-  const { xField, tooltip } = options;
+  const { tooltip } = options;
 
   if (tooltip !== false) {
-    const chartTooltip = deepAssign(
-      {},
-      {
-        crosshairs: {
-          text: (type, defaultContent, items) => {
-            const tooltipCrosshairsText = { position: 'end' };
-            if (type === 'x') {
-              const item = items[0];
-              tooltipCrosshairsText['content'] = item ? item.data[xField] : defaultContent;
-            } else {
-              tooltipCrosshairsText['content'] = defaultContent;
-            }
-            return tooltipCrosshairsText;
-          },
-        },
-      },
-      tooltip
-    );
-    chart.tooltip(chartTooltip);
+    chart.tooltip(tooltip);
   } else {
     chart.tooltip(false);
   }

src/plots/stock/constant.ts

@@ -15,6 +15,16 @@ export const DEFAULT_TOOLTIP_OPTIONS = {
   crosshairs: {
     type: 'xy',
     follow: true,
+    text: (type, defaultContent, items) => {
+      const tooltipCrosshairsText = { position: type === 'y' ? 'start' : 'end' };
+      if (type === 'x') {
+        const item = items[0];
+        tooltipCrosshairsText['content'] = item ? item.title : defaultContent;
+      } else {
+        tooltipCrosshairsText['content'] = defaultContent;
+      }
+      return tooltipCrosshairsText;
+    },
   },
 };