feat: add effect-scatter, graph and heatmap charts

Author: tmkx

.storybook/preview.tsx

@@ -16,7 +16,7 @@ const preview: Preview = {
     },
     options: {
       storySort: {
-        order: ['README', 'Line', 'Bar', 'Pie'],
+        order: ['README', 'Line', 'Bar', 'Pie', 'Scatter'],
       },
     },
   } satisfies (CoreTypes & DocsTypes)['parameters'],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanciers/echarts-react",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "ECharts <3 React",
   "author": "Tmk <i@tmk.im>",
   "keywords": [
@@ -32,17 +32,17 @@
     "lint": "tsc --noEmit"
   },
   "devDependencies": {
-    "@rsbuild/core": "^1.5.3",
+    "@rsbuild/core": "^1.5.4",
     "@rsbuild/plugin-react": "^1.4.0",
-    "@storybook/addon-docs": "^9.1.4",
-    "@storybook/react": "^9.1.4",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/react": "^9.1.5",
     "@types/node": "^24.3.1",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
     "echarts": "^6.0.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "storybook": "^9.1.4",
+    "storybook": "^9.1.5",
     "storybook-react-rsbuild": "^2.1.0",
     "swr": "^2.3.6",
     "tsdown": "^0.14.2",

pnpm-lock.yaml

@@ -1,7 +1,18 @@
 import React from 'react';
-import type { BarSeriesOption, ComposeOption, GridComponentOption, ScatterSeriesOption } from 'echarts';
+import type {
+  BarSeriesOption,
+  ComposeOption,
+  EffectScatterSeriesOption,
+  GraphSeriesOption,
+  GridComponentOption,
+  HeatmapSeriesOption,
+  ScatterSeriesOption,
+} from 'echarts';
 import {
   BarChart as EChartBarChart,
+  EffectScatterChart as EChartEffectScatterChart,
+  GraphChart as EChartGraphChart,
+  HeatmapChart as EChartHeatmapChart,
   LineChart as EChartLineChart,
   PieChart as EChartPieChart,
   ScatterChart as EChartScatterChart,
@@ -99,11 +110,23 @@ export const BarChart = /*#__PURE__*/ defineChart<BarSeriesOption | GridComponen
   GridComponent,
 ]);
 
+export const EffectScatterChart = /*#__PURE__*/ defineChart<EffectScatterSeriesOption | GridComponentOption>([
+  EChartEffectScatterChart,
+  GridComponent,
+]);
+
+export const GraphChart = /*#__PURE__*/ defineChart<GraphSeriesOption>([EChartGraphChart]);
+
+export const HeatmapChart = /*#__PURE__*/ defineChart<HeatmapSeriesOption>([EChartHeatmapChart]);
+
 export const LineChart = /*#__PURE__*/ defineChart<LineSeriesOption | GridComponentOption>([
   EChartLineChart,
   GridComponent,
 ]);
 
 export const PieChart = /*#__PURE__*/ defineChart<PieSeriesOption>([EChartPieChart]);
 
-export const ScatterChart = /*#__PURE__*/ defineChart<ScatterSeriesOption>([EChartScatterChart]);
+export const ScatterChart = /*#__PURE__*/ defineChart<ScatterSeriesOption | GridComponentOption>([
+  EChartScatterChart,
+  GridComponent,
+]);

src/charts.tsx

@@ -12,6 +12,7 @@ import type {
   MarkPointComponentOption,
   MatrixComponentOption,
   PolarComponentOption,
+  SingleAxisComponentOption,
   TimelineComponentOption,
   TitleComponentOption,
   ToolboxComponentOption,
@@ -31,6 +32,7 @@ import {
   MarkPointComponent,
   MatrixComponent,
   PolarComponent,
+  SingleAxisComponent,
   TimelineComponent,
   TitleComponent,
   ToolboxComponent,
@@ -82,6 +84,8 @@ export const Matrix = /*#__PURE__*/ defineComponent<MatrixComponentOption>(Matri
 
 export const Polar = /*#__PURE__*/ defineComponent<PolarComponentOption>(PolarComponent);
 
+export const SingleAxis = /*#__PURE__*/ defineComponent<SingleAxisComponentOption>(SingleAxisComponent);
+
 export const Timeline = /*#__PURE__*/ defineComponent<TimelineComponentOption>(TimelineComponent);
 
 export const Title = /*#__PURE__*/ defineComponent<TitleComponentOption>(TitleComponent);

src/components.tsx

@@ -1,5 +1,5 @@
 export { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
-export { BarChart, LineChart, PieChart, ScatterChart } from './charts.js';
+export { BarChart, EffectScatterChart, GraphChart, HeatmapChart, LineChart, PieChart, ScatterChart } from './charts.js';
 export {
   Brush,
   Calendar,
@@ -13,6 +13,7 @@ export {
   MarkPoint,
   Matrix,
   Polar,
+  SingleAxis,
   Timeline,
   Title,
   Toolbox,