feat: add bar chart

Author: tmkx

src/charts.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { ComposeOption, GridComponentOption } from 'echarts';
+import type { BarSeriesOption, ComposeOption, GridComponentOption } from 'echarts';
 import {
+  BarChart as EChartBarChart,
   LineChart as EChartLineChart,
   PieChart as EChartPieChart,
   type LineSeriesOption,
@@ -92,6 +93,11 @@ function defineChart<T extends ComponentOption>(ext: EChartExt) {
   return ChartComponent;
 }
 
+export const BarChart = /*#__PURE__*/ defineChart<BarSeriesOption | GridComponentOption>([
+  EChartBarChart,
+  GridComponent,
+]);
+
 export const LineChart = /*#__PURE__*/ defineChart<LineSeriesOption | GridComponentOption>([
   EChartLineChart,
   GridComponent,

src/index.ts

@@ -1,5 +1,5 @@
 export { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
-export { LineChart, PieChart } from './charts.js';
+export { BarChart, LineChart, PieChart } from './charts.js';
 export {
   Dataset,
   DataZoom,

stories/bar.stories.tsx

@@ -0,0 +1,32 @@
+import { BarChart } from '@fanciers/echarts-react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Bar',
+} satisfies Meta;
+
+export default meta;
+
+export type Story = StoryObj<typeof meta>;
+
+export const BarSimple: Story = {
+  name: 'Basic Bar',
+  render() {
+    return (
+      <BarChart
+        style={{ width: 480, height: 300 }}
+        xAxis={{
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        }}
+        yAxis={{ type: 'value' }}
+        series={[
+          {
+            type: 'bar',
+            data: [120, 200, 150, 80, 70, 110, 130],
+          },
+        ]}
+      />
+    );
+  },
+};