1、添加zrender包 yarn add zrender

2、修改 zrender 的 BUG。

修改 node_modules/zrender/index.d.ts 将里面的 src 改成 lib 。这个问题在 zrender 的 Issue 中已经有人报了,见“Typescript 编译报类型错误”。不改虽然编译也能通过,但运行时会出现无法正常渲染的情况。

export * from './lib/zrender';
export * from './lib/export';

3、修改 tsconfig.json 的编译选项,解决编译错误。Vue3 默认编译选项过于严格,会引起很多编译错误。

{
"compilerOptions": {
"strict": false,
"useDefineForClassFields": false,
"types": [
"node",
...
],
...
}

4、在 main.ts 注册 Painter

import * as zrender from "zrender";
import SVGPainter from "zrender/lib/svg/Painter";
import CanvasPainter from "zrender/lib/canvas/Painter";
zrender.registerPainter("canvas", CanvasPainter);
zrender.registerPainter("svg", SVGPainter);

5、组件内使用,参考其他文章。如“Vue项目中使用 ZRender 二维绘图引擎”。

发表评论

您的电子邮箱地址不会被公开。