taro 中使用 ecanvas 图表，首次渲染时图表不展示，多刷新几次才出现图表，报警告：组件需绑定 ec 变量。已传递ec:{{onInit}}参数

[junjieWangYzh]

相关平台

微信小程序

小程序基础库: 2.20.3
使用框架: React

复现步骤

核心代码如下，options中的数据部分由业务页面在useEffect 中获取数据后注入
const { pixelRatio: canvasDpr, platform } = Taro.getSystemInfoSync();

const BaseChart: React.FC = props => {
const { height, option } = props;
const [isComplete, setIsComplete] = useState(false);
const chartRef = useRef();
const canvasRef = useRef();

useEffect(() => {
    if (option && isComplete && chartRef.current) {
        chartRef.current.setOption(option, { notMerge: true });
    }
}, [option, isComplete]);

const style = { height };

const onChartInit = useCallback((canvas, width, height, dpr) => {
    console.log('dpr=', dpr);
    canvasRef.current = canvas;
    const chart = InternalEcharts.init(canvas, null, {
        width,
        height,
        devicePixelRatio: platform !== 'devtools' && ['mac', 'windows'].includes(platform) ? canvasDpr : dpr, // new
    });
    chartRef.current = chart;

    canvas.setChart(chart);

    setIsComplete(true);

    return chart;
}, []);

return (
    <View style={style} className="echarts">
        <ecanvas ec={{ onInit: onChartInit }} />
    </View>
);

};

期望结果

ecanvas 图表，首次渲染能够呈现

实际结果

ecanvas 图表，首次渲染不展示，报警告：组件需绑定 ec 变量

环境信息

Taro CLI 3.6.10 environment info:
    System:
      OS: macOS 14.7
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
      Yarn: 1.22.17 - /usr/local/bin/yarn
      npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.5.3 => 3.6.17
      @tarojs/components: 3.5.3 => 3.6.17
      @tarojs/helper: 3.5.3 => 3.6.17
      @tarojs/plugin-framework-react: 3.5.3 => 3.6.17
      @tarojs/plugin-html: 3.5.3 => 3.6.17
      @tarojs/plugin-platform-alipay: 3.5.3 => 3.6.17
      @tarojs/plugin-platform-jd: 3.5.3 => 3.6.17
      @tarojs/plugin-platform-qq: 3.5.3 => 3.6.17
      @tarojs/plugin-platform-swan: 3.5.3 => 3.6.17
      @tarojs/plugin-platform-tt: 3.5.3 => 3.6.17
      @tarojs/plugin-platform-weapp: 3.5.3 => 3.6.17
      @tarojs/react: 3.5.3 => 3.6.17
      @tarojs/router: 3.5.3 => 3.6.17
      @tarojs/runtime: 3.5.3 => 3.6.17
      @tarojs/shared: 3.5.3 => 3.6.17
      @tarojs/taro: 3.5.3 => 3.6.17
      @tarojs/taro-h5: 3.5.3 => 3.6.17
      @tarojs/taro-loader: ^3.5.3 => 3.6.17
      @tarojs/webpack5-runner: 3.5.3 => 3.6.17
      babel-preset-taro: 3.5.3 => 3.6.17
      eslint-config-taro: 3.5.3 => 3.6.17
      react: ^18.0.0 => 18.2.0
      taro-ui: ^3.1.0-beta.3 => 3.1.0-beta.3

---

补充信息

https://github.com/ecomfe/echarts-for-weixin