fix: conditionally use of specific props to avoid ECharts error print when using the prop use

Author: hugocxl

example/src/App.tsx

@@ -1,9 +1,25 @@
 import { useState } from 'react'
 import { EChart } from '@kbox-labs/react-echarts'
 
+import { LineChart } from 'echarts/charts'
+import { LabelLayout } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent
+} from 'echarts/components'
+
 function MyChart2() {
   return (
     <EChart
+      use={[
+        LineChart,
+        TitleComponent,
+        TooltipComponent,
+        GridComponent,
+        CanvasRenderer
+      ]}
       group='group1'
       // animation={false}
       style={{

src/use-echarts.ts

@@ -171,59 +171,63 @@ export function useECharts<T extends HTMLElement>({
     if (!echartsInstance) return
 
     if (group) echartsInstance.group = group
-  }, [group, started])
+  }, [group, started, echartsInstance])
 
   useEffect(() => {
     if (!echartsInstance) return
 
     echartsInstance.clear()
     echartsInstance.setOption(
       {
-        angleAxis,
-        animation,
-        animationDelay,
-        animationDelayUpdate,
-        animationDuration,
-        animationDurationUpdate,
-        animationEasing,
-        animationEasingUpdate,
-        animationThreshold,
-        aria,
-        axisPointer,
-        backgroundColor,
-        blendMode,
-        brush,
-        calendar,
-        color,
-        darkMode,
-        dataset,
-        dataZoom,
-        geo,
-        graphic,
-        grid,
-        hoverLayerThreshold,
-        legend,
-        media,
-        options,
-        parallel,
-        parallelAxis,
-        polar,
-        progressive,
-        progressiveThreshold,
-        radar,
-        radiusAxis,
         series,
-        singleAxis,
-        stateAnimation,
-        textStyle,
-        timeline,
-        title,
-        toolbox,
-        tooltip,
         useUTC,
-        visualMap,
         xAxis,
-        yAxis
+        yAxis,
+        progressive,
+        blendMode,
+        hoverLayerThreshold,
+        progressiveThreshold,
+        ...(angleAxis && { angleAxis }),
+        ...(animation && { animation }),
+        ...(animationDelay && { animationDelay }),
+        ...(animationDelayUpdate && { animationDelayUpdate }),
+        ...(animationDuration && { animationDuration }),
+        ...(animationDurationUpdate && { animationDurationUpdate }),
+        ...(animationEasing && { animationEasing }),
+        ...(animationEasingUpdate && { animationEasingUpdate }),
+        ...(animationThreshold && { animationThreshold }),
+        ...(aria && { aria }),
+        ...(axisPointer && { axisPointer }),
+        ...(backgroundColor && { backgroundColor }),
+        ...(brush && { brush }),
+        ...(calendar && { calendar }),
+        ...(color && { color }),
+        ...(darkMode && { darkMode }),
+        ...(dataset && { dataset }),
+        ...(dataZoom && { dataZoom }),
+        ...(geo && { geo }),
+        ...(graphic && { graphic }),
+        ...(grid && { grid }),
+        ...(legend && { legend }),
+        ...(media && { media }),
+        ...(options && { options }),
+        ...(parallel && { parallel }),
+        ...(parallelAxis && { parallelAxis }),
+        ...(polar && { polar }),
+        ...(radar && { radar }),
+        ...(radiusAxis && { radiusAxis }),
+        ...(series && { series }),
+        ...(singleAxis && { singleAxis }),
+        ...(stateAnimation && { stateAnimation }),
+        ...(textStyle && { textStyle }),
+        ...(timeline && { timeline }),
+        ...(title && { title }),
+        ...(toolbox && { toolbox }),
+        ...(tooltip && { tooltip }),
+        ...(useUTC && { useUTC }),
+        ...(visualMap && { visualMap }),
+        ...(xAxis && { xAxis }),
+        ...(yAxis && { yAxis })
       },
       {
         lazyUpdate,
@@ -288,7 +292,8 @@ export function useECharts<T extends HTMLElement>({
     transition,
 
     //
-    started
+    started,
+    echartsInstance
   ])
 
   useEffect(() => {
@@ -431,8 +436,8 @@ export function useECharts<T extends HTMLElement>({
     onTimelineChanged,
     onTimelinePlayChanged,
 
-    //
-    started
+    started,
+    echartsInstance
   ])
 
   return [setContainerRef, echartsRef.current]