Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

页面首次渲染不展示canvas图表,多刷新几次才出现图表,报警告:组件需绑定 ec 变量。已传递ec:{{onInit}}参数 #950

Open
4 tasks done
junjieWangYzh opened this issue Oct 31, 2024 · 0 comments

Comments

@junjieWangYzh
Copy link

junjieWangYzh commented Oct 31, 2024

提问前应该做的事

请确保提问前做了以下事,将完成的项目的 [] 改为 [x]

需提供的信息

将符合项的 [] 改为 [x],并补充需要的信息:

简单描述问题:

页面首次渲染报警告:组件需绑定 ec 变量,canvas组件不渲染。多刷新几次才出现图表

预期效果:

首次渲染即可看到canvas图

实际效果:

image

复现环境:

  • 在微信开发工具中存在该问题
  • 在真机上存在该问题

核心代码:

使用ec-canvas为提供的最新版本,使用taro3.5.7进行开发

核心代码如下,options中的数据部分由业务页面在useEffect 中获取数据后注入
`
import * as InternalEcharts from '@/components/ec-canvas/echarts';

const { pixelRatio: canvasDpr, platform } = wx.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>
);

};

export default BaseChart;`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant