feat: add bar-label-rotation example

Author: tmkx

stories/bar.stories.tsx

@@ -4,8 +4,10 @@ import {
   DataZoom,
   Graphic,
   Legend,
+  LineChart,
   Polar,
   Title,
+  Toolbox,
   Tooltip,
   echarts,
 } from '@fanciers/echarts-react';
@@ -491,3 +493,110 @@ export const BarGradient: Story = {
     );
   },
 };
+
+const barLabelRotationAlign = ['left', 'center', 'right'] as const;
+const barLabelRotationVerticalAlign = ['top', 'middle', 'bottom'] as const;
+const barLabelRotationPosition = [
+  'left',
+  'right',
+  'top',
+  'bottom',
+  'inside',
+  'insideTop',
+  'insideLeft',
+  'insideRight',
+  'insideBottom',
+  'insideTopLeft',
+  'insideTopRight',
+  'insideBottomLeft',
+  'insideBottomRight',
+] as const;
+const barLabelRotationMeta = {
+  component: (_props: {
+    rotate: number;
+    align: (typeof barLabelRotationAlign)[number];
+    verticalAlign: (typeof barLabelRotationVerticalAlign)[number];
+    position: (typeof barLabelRotationPosition)[number];
+    distance: number;
+  }) => null,
+  argTypes: {
+    rotate: { control: { type: 'number', min: -90, max: 90 } },
+    align: { control: { type: 'inline-radio' }, options: barLabelRotationAlign },
+    verticalAlign: { control: { type: 'inline-radio' }, options: barLabelRotationVerticalAlign },
+    position: { control: { type: 'inline-radio' }, options: barLabelRotationPosition },
+    distance: { control: { type: 'number', min: 0, max: 100 } },
+  },
+} satisfies Meta;
+
+export const BarLabelRotation: StoryObj<typeof barLabelRotationMeta> = {
+  name: 'Bar Label Rotation',
+  argTypes: barLabelRotationMeta.argTypes,
+  args: { rotate: 90, align: 'left', verticalAlign: 'middle', position: 'insideBottom', distance: 15 },
+  render(args) {
+    const labelOption: BarSeriesLabelOption = {
+      ...args,
+      show: true,
+      formatter: '{c}  {name|{a}}',
+      fontSize: 16,
+      rich: { name: {} },
+    };
+
+    return (
+      <BarChart
+        style={{ width: 480, height: 300 }}
+        compose={[LineChart]}
+        xAxis={[{ type: 'category', axisTick: { show: false }, data: ['2012', '2013', '2014', '2015', '2016'] }]}
+        yAxis={[{ type: 'value' }]}
+        series={[
+          {
+            name: 'Forest',
+            type: 'bar',
+            barGap: 0,
+            label: labelOption,
+            emphasis: { focus: 'series' },
+            data: [320, 332, 301, 334, 390],
+          },
+          {
+            name: 'Steppe',
+            type: 'bar',
+            label: labelOption,
+            emphasis: { focus: 'series' },
+            data: [220, 182, 191, 234, 290],
+          },
+          {
+            name: 'Desert',
+            type: 'bar',
+            label: labelOption,
+            emphasis: { focus: 'series' },
+            data: [150, 232, 201, 154, 190],
+          },
+          {
+            name: 'Wetland',
+            type: 'bar',
+            label: labelOption,
+            emphasis: { focus: 'series' },
+            data: [98, 77, 101, 99, 40],
+          },
+        ]}
+      >
+        <Tooltip tooltip={{ trigger: 'axis', axisPointer: { type: 'shadow' } }} />
+        <Legend legend={{ data: ['Forest', 'Steppe', 'Desert', 'Wetland'] }} />
+        <Toolbox
+          toolbox={{
+            show: true,
+            orient: 'vertical',
+            left: 'right',
+            top: 'center',
+            feature: {
+              mark: { show: true },
+              dataView: { show: true, readOnly: false },
+              magicType: { show: true, type: ['line', 'bar', 'stack'] },
+              restore: { show: true },
+              saveAsImage: { show: true },
+            },
+          }}
+        />
+      </BarChart>
+    );
+  },
+};