From 2ec31b87112c0650c5621b87c7c5a57eb7f0763f Mon Sep 17 00:00:00 2001
From: Chunxian Zhang <1836891291@qq.com>
Date: Tue, 2 Aug 2022 01:34:27 +0800
Subject: [PATCH] =?UTF-8?q?fe-32=20ej2-react-charts=20=E9=A5=BC=E7=8A=B6?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lazy-timer-fe/src/components/Charts/Pie.jsx | 46 +++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 lazy-timer-fe/src/components/Charts/Pie.jsx

diff --git a/lazy-timer-fe/src/components/Charts/Pie.jsx b/lazy-timer-fe/src/components/Charts/Pie.jsx
new file mode 100644
index 0000000..a6d9483
--- /dev/null
+++ b/lazy-timer-fe/src/components/Charts/Pie.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationLegend, PieSeries, AccumulationDataLabel, Inject, AccumulationTooltip } from '@syncfusion/ej2-react-charts';
+
+import { useStateContext } from '../../contexts/ContextProvider';
+
+const Doughnut = ({ id, data, legendVisiblity, height }) => {
+  const { currentMode } = useStateContext();
+
+  return (
+    <AccumulationChartComponent
+      id={id}
+      legendSettings={{ visible: legendVisiblity, background: 'white' }}
+      height={height}
+      background={currentMode === 'Dark' ? '#33373E' : '#fff'}
+      tooltip={{ enable: true }}
+    >
+      <Inject services={[AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip]} />
+      <AccumulationSeriesCollectionDirective>
+        <AccumulationSeriesDirective
+          name="Sale"
+          dataSource={data}
+          xName="x"
+          yName="y"
+          innerRadius="40%"
+          startAngle={0}
+          endAngle={360}
+          radius="70%"
+          explode
+          explodeOffset="10%"
+          explodeIndex={2}
+          dataLabel={{
+            visible: true,
+            name: 'text',
+            position: 'Inside',
+            font: {
+              fontWeight: '600',
+              color: '#fff',
+            },
+          }}
+        />
+      </AccumulationSeriesCollectionDirective>
+    </AccumulationChartComponent>
+  );
+};
+
+export default Doughnut;