feat: 图例与标题同行展示示例

Author: wangxingkang

docs/charts/demo/Area/basic.tsx

@@ -10,6 +10,32 @@ function Example() {
     },
     xField: 'date',
     yField: 'value',
+    legends: [
+      {
+        visible: true,
+        position: 'end',
+        orient: 'top',
+        item: {
+          shape: {
+            style: {
+              size: 10,
+              symbolType: hyphenPointPath,
+              dy: -5,
+              fill: colorBlue2,
+            },
+          },
+          label: {
+            formatMethod: () => {
+              return '测试图例';
+            },
+          },
+        },
+        layoutType: 'absolute',
+        left: 0,
+        right: -20,
+        top: 2,
+      },
+    ],
     data: {
       values: [
         { date: 0, value: 11635 },

packages/chart/src/Area/index.ts

@@ -1,4 +1,2 @@
-import { AreaChart } from '@visactor/react-vchart';
-
-export type { AreaChartProps as AreaProps } from '@visactor/react-vchart';
-export default AreaChart;
+export { Area } from './Area';
+export type { AreaProps } from './Area';

packages/theme/src/common/component/discreteLegend.ts

@@ -54,6 +54,7 @@ export const discreteLegend: IDiscreteLegendTheme = {
     spaceRow: 6,
     padding: 2,
     background: {
+      visible: false,
       state: {
         selectedHover: {
           fill: {
@@ -70,7 +71,7 @@ export const discreteLegend: IDiscreteLegendTheme = {
       },
     },
     shape: {
-      space: 6,
+      space: 10,
       style: {
         lineWidth: 0,
         fillOpacity: 1,

packages/theme/src/common/component/tooltip.ts

@@ -5,7 +5,7 @@ export const tooltip: ITooltipTheme = {
   /** 偏移量 */
   offset: {
     x: 10,
-    y: 10
+    y: 10,
   },
   panel: {
     padding: {
@@ -16,12 +16,12 @@ export const tooltip: ITooltipTheme = {
     },
     backgroundColor: {
       type: 'palette',
-      key: 'popupBackgroundColor'
+      key: 'popupBackgroundColor',
     } as any,
     border: {
       color: {
         type: 'palette',
-        key: 'popupBackgroundColor'
+        key: 'popupBackgroundColor',
       } as any,
       width: 0,
       radius: 0,
@@ -33,9 +33,9 @@ export const tooltip: ITooltipTheme = {
       spread: 0,
       color: {
         type: 'palette',
-        key: 'shadowColor'
-      } as any
-    }
+        key: 'shadowColor',
+      } as any,
+    },
   },
   spaceRow: 6,
   titleLabel: {
@@ -44,25 +44,25 @@ export const tooltip: ITooltipTheme = {
     fontColor: colorGrey06,
     fontWeight: 'bold',
     textBaseline: 'middle',
-    spacing: 0
+    spacing: 0,
   },
   shape: {
     size: 8,
-    spacing: 6
+    spacing: 6,
   },
   keyLabel: {
     fontSize: 12,
     lineHeight: 20,
     fontColor: '#fff',
     textBaseline: 'middle',
-    spacing: 26
+    spacing: 26,
   },
   valueLabel: {
     fontSize: 12,
     lineHeight: 20,
     fontColor: '#fff',
     fontWeight: 'bold',
     textBaseline: 'middle',
-    spacing: 0
+    spacing: 0,
   },
-}
+};

packages/theme/src/common/series/area.ts

@@ -0,0 +1,58 @@
+import type { ISeriesTheme } from '@visactor/vchart';
+
+export const area: ISeriesTheme['area'] = {
+  line: {
+    style: {
+      lineWidth: 2,
+      curveType: 'monotone',
+    },
+  },
+  point: {
+    style: {
+      symbolType: 'circle',
+      size: 0,
+    },
+    state: {
+      hover: {
+        size: 10,
+      },
+      dimension_hover: {
+        size: 10,
+      },
+    },
+  },
+  area: {
+    style: {
+      stroke: {
+        type: 'palette',
+        key: 'backgroundColor',
+      },
+      fillOpacity: 1,
+      fill: {
+        gradient: 'linear',
+        x0: 0.5,
+        y0: 0,
+        x1: 0.5,
+        y1: 1,
+        stops: [
+          {
+            offset: 0,
+            opacity: 0.1,
+          },
+          {
+            offset: 1,
+            opacity: 0,
+          },
+        ],
+      },
+    },
+  },
+  label: {
+    position: 'top',
+    offset: 4,
+    style: {
+      fill: { type: 'palette', key: 'secondaryFontColor' },
+    },
+  },
+  seriesMark: 'line',
+};

packages/theme/src/light/colorScheme.ts

@@ -4,6 +4,7 @@ import {
   colorGrey04,
   colorGrey06,
   colorGrey10,
+  colorGreyPro08,
   colorGreyPro09,
   colorWhite,
   dataScheme,
@@ -33,7 +34,7 @@ export const colorScheme: IThemeColorScheme = {
       /** 主要字色 */
       primaryFontColor: colorGrey10,
       /** 次要字色 */
-      secondaryFontColor: 'rgba(78,89,105,1)',
+      secondaryFontColor: colorGreyPro08,
       /** 第三字色 */
       tertiaryFontColor: 'rgba(134,144,156,1)',
       /** 轴标签字色 */