Vue3中使用zrender

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 二维绘图引擎”。