feat(mix): mix 复合图表支持统一在顶层配置，增加 top、slider、annotations 等属性配置 (#3168)

* feat(mix): mix 复合图表支持统一在顶层配置，增加 top、slider、annotations 等属性配置

* docs(mix): 完善文档，增加定制股票图 demo: https://g2plot.an
tv.vision/zh/examples/plugin/multi-view#customized-stock

__tests__/unit/plots/multi-view/index-spec.ts

@@ -185,6 +185,30 @@ describe('multi-view', () => {
     expect(plot.chart.views[0].geometries[0].animateOption.appear.animation).toBe('fade-in');
   });
 
+  it('plots 支持配置在顶层', () => {
+    const data = [
+      { date: '03-01', sales: 100 },
+      { date: '03-02', sales: 95 },
+      { date: '03-03', sales: 69 },
+    ];
+
+    const plot = new Mix(createDiv(), {
+      data,
+      // 共享 slider
+      slider: {},
+      plots: [
+        { type: 'line', top: true, options: { xField: 'date', yField: 'sales', color: 'red' } },
+        { type: 'column', top: true, options: { xField: 'date', yField: 'sales', color: 'date' } },
+      ],
+    });
+
+    plot.render();
+
+    expect(plot.chart.geometries.length).toBe(2);
+    const line = plot.chart.geometries[0];
+    expect(line.getAttribute('color').values).toEqual(['red']);
+  });
+
   it('MultiView 依然可以使用', () => {
     const data = partySupport.filter((o) => ['FF', 'Lab'].includes(o.type));
     const line = new MultiView(createDiv(), {

docs/api/advanced-plots/mix.zh.md

@@ -121,6 +121,32 @@ plots: [
 ];
 ```
 
+#### IPlot.top
+
+是否设置在顶层。设置为 true 时，几何图形挂在顶层 chart 对象上，而不是子 view 下。此时 region 设置无效，data 继承顶层 data 配置。
+
+**示例**：
+
+```ts
+const data = [{ date: '03-01', sales: 100 }, { date: '03-02', sales: 95 }, { date: '03-03', sales: 69 }];
+const plot = new Mix('container', {
+  data,
+  // 共享 slider
+  slider: {},
+  plots: [
+    { type: 'line', options: { xField: 'date', yField: 'sales', color: 'red' } },
+    { type: 'column', options: { xField: 'date', yField: 'sales', color: 'date', } },
+  ]
+});
+
+// 以上写法，等价于 G2 写法
+chart.data(data);
+chart.line().position('date*sales').color('red');
+chart.interval().position('date*sales').color('date');
+chart.option('slider', {});
+```
+
+更多见：[定制股票图](/zh/examples/plugin/multi-view#customized-stock)
 
 ### 其他
 
@@ -133,3 +159,11 @@ plots: [
 #### legend
 
 顶层 legend 配置(统一在 chart 层配置)。
+
+#### slider
+
+顶层 slider 配置（顶层配置）。
+
+#### annotations
+
+图表标注配置（顶层配置）。

examples/plugin/multi-view/demo/customized-stock.jsx

@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { Mix } from '@antv/g2plot';
+
+const DemoStock = () => {
+  const chartNodeRef = React.useRef();
+  const chartRef = React.useRef();
+
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    asyncFetch();
+  }, []);
+
+  const asyncFetch = () => {
+    fetch('https://gw.alipayobjects.com/os/antfincdn/qtQ9nYfYJe/stock-data.json')
+      .then((response) => response.json())
+      .then((json) => setData(json))
+      .catch((error) => {
+        console.log('fetch data failed', error);
+      });
+  };
+
+  const mixConfig = {
+    appendPadding: 8,
+    tooltip: {
+      shared: true,
+      showCrosshairs: true,
+    },
+    syncViewPadding: true,
+    slider: {},
+    data,
+    plots: [
+      {
+        type: 'stock',
+        // 共享顶层 data
+        top: true,
+        options: {
+          xField: 'trade_date',
+          yField: ['open', 'close', 'high', 'low'],
+        },
+      },
+      {
+        type: 'line',
+        // 共享顶层 data
+        top: true,
+        options: {
+          xField: 'trade_date',
+          yField: 'amount',
+          yAxis: false,
+          yAxis: {
+            type: 'log',
+            grid: null,
+            line: null,
+          },
+          meta: {
+            amount: {
+              alias: '平均租金(元)',
+              formatter: (v) => (v > 10000 ? `${(v / 10000).toFixed(0)}万` : `${v}`),
+            },
+          },
+          color: '#FACC14',
+        },
+      },
+      {
+        type: 'line',
+        top: true,
+        options: {
+          xField: 'trade_date',
+          yField: 'vol',
+          yAxis: false,
+          meta: {
+            vol: {
+              alias: '数值(元)',
+            },
+          },
+          color: '#5FB1EE',
+        },
+      },
+    ],
+    annotations: [
+      {
+        type: 'dataMarker',
+        // 外部获取最大值的数据
+        position: ['2020-03-05', 3074.2571],
+        top: true,
+        autoAdjust: false,
+        direction: 'upward',
+        text: {
+          content: '顶峰值',
+          style: {
+            fontSize: 13,
+          }
+        },
+        line: {
+          length: 12,
+        },
+      },
+      {
+        type: 'dataMarker',
+        // 外部获取最大值的数据
+        position: ['2020-03-13', 2799.9841],
+        top: true,
+        direction: 'downward',
+        text: {
+          content: '2799.9841',
+          style: {
+            fontSize: 12,
+          }
+        },
+        point: null,
+        line: {
+          length: 12,
+        },
+      }
+    ],
+  };
+
+  React.useEffect(() => {
+    const chartDom = chartNodeRef?.current;
+    if (!chartDom) return;
+
+    let plot = chartRef.current;
+    if (!plot) {
+      plot = new Mix(chartDom, mixConfig);
+      plot.render();
+      chartRef.current = plot;
+    } else {
+      plot.update(mixConfig);
+    }
+  }, [mixConfig]);
+
+  return <div style={{ height: '400px' }} ref={chartNodeRef} />;
+};
+
+ReactDOM.render(<DemoStock />, document.getElementById('container'));

examples/plugin/multi-view/demo/meta.json

@@ -36,14 +36,6 @@
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/GMzV%24DSDAX/68a9190b-a4eb-4ad4-be3b-4fef31595a3f.png"
     },
-    {
-      "filename": "nobel-prize.ts",
-      "title": {
-        "zh": "星空诺贝尔奖",
-        "en": "Noble Prize Visual"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Zi6cQJN9L7EAAAAAAAAAAAAAARQnAQ"
-    },
     {
       "filename": "drinks.ts",
       "title": {
@@ -75,6 +67,14 @@
         "en": "Line Chart with Anomaly Detection Style"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/9MkGXoBNaH/20220310212354.jpg"
+    },
+    {
+      "filename": "customized-stock.jsx",
+      "title": {
+        "zh": "定制股票图",
+        "en": "Customized stock"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%26P96Yg5fKh/78f5836e-efde-409d-a5b6-7dfe91cd2d04.png"
     }
   ]
 }