[react] feat: Added docs for components/Echart

sites/dev/docs/reference/packages/react/components/echart/_examples.js

@@ -0,0 +1,103 @@
+import React from 'react'
+import { ChartWrapper } from '@freesewing/react/components/Echart'
+
+// Taken from https://echarts.apache.org/examples/en/editor.html?c=area-stack
+const option = {
+  title: {
+    text: 'Stacked Area Chart'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: {}
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value'
+    }
+  ],
+  series: [
+    {
+      name: 'Email',
+      type: 'line',
+      stack: 'Total',
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [120, 132, 101, 134, 90, 230, 210]
+    },
+    {
+      name: 'Union Ads',
+      type: 'line',
+      stack: 'Total',
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [220, 182, 191, 234, 290, 330, 310]
+    },
+    {
+      name: 'Video Ads',
+      type: 'line',
+      stack: 'Total',
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [150, 232, 201, 154, 190, 330, 410]
+    },
+    {
+      name: 'Direct',
+      type: 'line',
+      stack: 'Total',
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [320, 332, 301, 334, 390, 330, 320]
+    },
+    {
+      name: 'Search Engine',
+      type: 'line',
+      stack: 'Total',
+      label: {
+        show: true,
+        position: 'top'
+      },
+      areaStyle: {},
+      emphasis: {
+        focus: 'series'
+      },
+      data: [820, 932, 901, 934, 1290, 1330, 1320]
+    }
+  ]
+}
+
+export const ChartWrapperExample = () => <ChartWrapper option={option} />
+

sites/dev/docs/reference/packages/react/components/echart/readme.mdx

@@ -2,6 +2,33 @@
 title: Echart
 ---
 
-:::note
-This page is yet to be created
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import { jsdocChartWrapper } from '@site/prebuild/jsdoc/components.echart.mjs'
+import { ChartWrapperExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+The **Echart** component family provides the following components:
+
+- [ChartWrapper](#chartwrapper)
+
+In addition, it also exports the following objects:
+
+- [echarts](#echarts)
+
+## EchartWrapper
+
+<ComponentDocs docs={jsdocChartWrapper} example={ChartWrapperExample} />
+
+## echarts
+
+This is a re-export of [Apache Echarts](https://echarts.apache.org/).
+
+:::tip
+#### Not FreeSewing code
+We re-export <code>echarts</code> for convenience.
+Please refer to the documentation for [Apache Echarts](https://echarts.apache.org/).
 :::
+
+</DocusaurusDoc>