f

package.json

@@ -50,7 +50,7 @@
     "@tarojs/taro": "3.6.25",
     "@zjxpcyc/js_event": "^1.0.0",
     "@zjxpcyc/react-tiny-store": "^2.0.1",
-    "echarts": "5.4.1",
+    "echarts": "^5.4.1",
     "echarts-for-weixin": "^1.0.2",
     "md5": "^2.3.0",
     "postcss-modules": "^6.0.0",

src/subpkg1/components/chart/index.jsx

@@ -1,5 +1,8 @@
-import React from 'react';
-import * as echarts from '@/subpkg1/components/ec-canvas/echarts';
+import React from "react";
+// import * as echarts from '@/subpkg1/components/ec-canvas/echarts';
+import * as echarts from "echarts";
+
+import { View } from "@tarojs/components";
 
 /**
  * 使用本组件前, 页面组件必须引入 ec-canvas 组件
@@ -7,47 +10,37 @@ import * as echarts from '@/subpkg1/components/ec-canvas/echarts';
  *   'ec-canvas': '@/subpkg1/components/ec-canvas/ec-canvas'
  * }
  */
-const Chart = (props) => {
+export default function Chart(props) {
   const { option, className, style } = props;
-  
+
   const [inited, setInited] = React.useState(false);
   const chartRef = React.useRef();
-  const canvasId = React.useMemo(() => `canvas-${Math.random().toString(36).substring(2, 7)}`, []);
-  const ec = React.useMemo(() => {
-    const onInit = (canvas, width, height, dpr) => {
-      const chart = echarts.init(canvas, null, {
-        width: width,
-        height: height,
-        devicePixelRatio: dpr // new
-      });
-      canvas.setChart(chart);
-      chartRef.current = chart;
-      setInited(true);
-    }
+  const domRef = React.useRef();
 
-    return {
-      onInit
-    }
-  }, []);
 
   React.useEffect(() => {
-    if (inited) {
-      chartRef.current.setOption(option);
+    if (!chartRef.current) {
+      chartRef.current = echarts.init(domRef.current);
     }
-  }, [option, inited]);
 
-  return (
-    <View className={className} style={style}>
-      <ec-canvas canvasId={canvasId} ec={ec}></ec-canvas>
-    </View>
-  )
-}
+    const resize = () => {
+      const t = setTimeout(() => {
+        clearTimeout(t);
+        chartRef.current.resize();
+      }, 100);
+    };
+
+    chartRef.current.setOption(option);
+    resize();
 
-export default Chart;
+    window.addEventListener("resize", resize);
+    return () => window.removeEventListener("resize", resize);
+  }, [option]);
+  console.log(option);
+  return <div className={className} style={style} ref={domRef}></div>;
+}
 
-const getLinearGradient = (...args) => new echarts.graphic.LinearGradient(...args);
+const getLinearGradient = (...args) =>
+  new echarts.graphic.LinearGradient(...args);
 
-export {
-  echarts,
-  getLinearGradient,
-}
+export { echarts, getLinearGradient };