Using the treeshakable api for echarts

ohcnetwork · Oct 4, 2023 · d7840ee · d7840ee
1 parent 7df0f13
commit d7840ee
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 4 deletions.
diff --git a/src/Components/Facility/Consultations/components/LinePlot.tsx b/src/Components/Facility/Consultations/components/LinePlot.tsx
@@ -1,4 +1,32 @@
-import ReactECharts from "echarts-for-react";
+import ReactEchartsCore from "echarts-for-react/lib/core";
+import { BarChart, LineChart } from "echarts/charts";
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapPiecewiseComponent,
+} from "echarts/components";
+
+import * as echarts from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([
+  BarChart,
+  LineChart,
+  CanvasRenderer,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapPiecewiseComponent,
+]);
 
 export const LinePlot = (props: any) => {
   const {
@@ -197,7 +225,8 @@ export const LinePlot = (props: any) => {
   }
 
   return (
-    <ReactECharts
+    <ReactEchartsCore
+      echarts={echarts}
       option={generalOptions}
       className={props.classes}
       lazyUpdate={props.type === "WAVEFORM"}

diff --git a/src/Components/Facility/Consultations/components/StackedLinePlot.tsx b/src/Components/Facility/Consultations/components/StackedLinePlot.tsx
@@ -1,5 +1,32 @@
-import ReactECharts from "echarts-for-react";
+import ReactEchartsCore from "echarts-for-react/lib/core";
+import { BarChart, LineChart } from "echarts/charts";
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapPiecewiseComponent,
+} from "echarts/components";
 
+import * as echarts from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([
+  BarChart,
+  LineChart,
+  CanvasRenderer,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapPiecewiseComponent,
+]);
 const COLORS = ["#B13F3C", "#2F8B35", "#44327A", "#B19D3C"];
 
 export const StackedLinePlot = (props: any) => {
@@ -81,5 +108,5 @@ export const StackedLinePlot = (props: any) => {
     },
     series: series,
   };
-  return <ReactECharts option={generalOptions} />;
+  return <ReactEchartsCore echarts={echarts} option={generalOptions} />;
 };