vue3使用zrender创建antd的图形元素

首先，需要在 Vue3 项目中引入 zrender：

import zrender from 'zrender'
import 'zrender/lib/svg/svg'

然后，在组件中使用 zrender 创建图形元素，可以按照以下步骤进行：

1. 在组件的 `setup` 钩子中创建 zrender 实例：

import { onMounted, onUnmounted, ref } from 'vue'
import zrender from 'zrender'
import 'zrender/lib/svg/svg'

export default {
  setup() {
    const zr = ref(null)

    onMounted(() => {
      zr.value = zrender.init(document.getElementById('my-chart'))
    })

    onUnmounted(() => {
      zr.value.dispose()
    })

    return {
      zr,
    }
  }
}

2. 在模板中创建容器元素：

<template>
  <div id="my-chart"></div>
</template>

3. 使用 zrender 创建图形元素：

import { onMounted, onUnmounted, ref } from 'vue'
import zrender from 'zrender'
import 'zrender/lib/svg/svg'
import { Rect } from 'zrender/lib/graphic'

export default {
  setup() {
    const zr = ref(null)

    onMounted(() => {
      zr.value = zrender.init(document.getElementById('my-chart'))

      const rect = new Rect({
        shape: {
          x: 10,
          y: 10,
          width: 100,
          height: 50,
        },
        style: {
          fill: '#1890ff',
        },
      })

      zr.value.add(rect)
    })

    onUnmounted(() => {
      zr.value.dispose()
    })

    return {
      zr,
    }
  }
}

以上代码中，创建了一个矩形元素，并添加到 zrender 实例中。在实际使用中，可以根据需要创建不同的图形元素，并设置相应的属性和样式。