渲染echarts，要么空白，要么报错

[lqllife]

描述问题 (Describe the problem)

我已 很详细很详细 阅读文档中关于 echarts 使用的部分，main.ts中的代码如下：

import App from "./App.vue";
import router from "./router";
import { setupStore } from "@/store";
import ElementPlus from "element-plus";
import { getServerConfig } from "./config";
import { createApp, Directive } from "vue";
import { MotionPlugin } from "@vueuse/motion";
import { useEcharts } from "@/plugins/echarts";
import { injectResponsiveStorage } from "@/utils/responsive";
import Table from "@pureadmin/table";
import * as echarts from "echarts";

// 引入重置样式
import "./style/reset.scss";
// 导入公共样式
import "./style/index.scss";
// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
import "./style/tailwind.css";
import "element-plus/dist/index.css";
// 导入字体图标
import "./assets/iconfont/iconfont.js";
import "./assets/iconfont/iconfont.css";
// 导入unocss
import "uno.css";

const app = createApp(App);

// 全局注册echarts
app.config.globalProperties.$echarts = echarts;

// 自定义指令
import * as directives from "@/directives";
Object.keys(directives).forEach(key => {
  app.directive(key, (directives as { [key: string]: Directive })[key]);
});

// 全局注册`@iconify/vue`图标库
import {
  IconifyIconOffline,
  IconifyIconOnline,
  FontIcon
} from "./components/ReIcon";
app.component("IconifyIconOffline", IconifyIconOffline);
app.component("IconifyIconOnline", IconifyIconOnline);
app.component("FontIcon", FontIcon);

// 全局注册按钮级别权限组件
import { Auth } from "@/components/ReAuth";
app.component("Auth", Auth);

getServerConfig(app).then(async config => {
  app.use(router);
  await router.isReady();
  injectResponsiveStorage(app, config);
  setupStore(app);
  app.use(MotionPlugin).use(ElementPlus).use(useEcharts).use(Table);
  app.mount("#app");
});

现在遇见的问题是：

function onInit() {
  // 如果直接使用，页面上不会渲染出来
  //initEcharts();

  // 如果通过接口请求后再使用，则会报错：Uncaught (in promise) TypeError: Cannot destructure property 'appContext' of '(0 , c.getCurrentInstance)(...)' as it is null.
  // 不仅是异步请求之后，使用nextTick 也会报同样的错误
  DataApi.getData(toRaw(form)).then(data => {
    console.log(data);
    initEcharts();
  });
}

function initEcharts() {
  const echartRef = ref();
  const { setOptions } = useECharts(echartRef);
  setOptions({
    tooltip: {
      trigger: "item"
    },
    legend: {
      top: "5%",
      left: "center"
    },
    series: [
      {
        name: "统计",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2
        },
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 100, name: "周一" },
          { value: 200, name: "周二" },
          { value: 300, name: "周三" },
          { value: 400, name: "周四" },
          { value: 500, name: "周五" }
        ]
      }
    ]
  });
}

onMounted(() => {
  onInit();
});

 <div ref="echartRef" class="w-full h-[100px]" />

如何复现该问题 (How to reproduce the problem)

同上

我真的已经很测试很多次了，使用原生的echarts没问题，所以请您仔细看看，谢谢。

操作系统和浏览器信息 (Operating system and browser information)

No response

验证 (Verify)

• [X] 是否仔细阅读过 文档 (Have you read documentation carefully)
• [X] 检查是否存在相同或类似的问题 issues (Check for the same or similar issues)

[xiaoxian521]

目前只解决bug 这属于你的业务问题，自行参考demo