vue3 echarts graphic 按需导入

在 Vue3 中按需导入 ECharts 的 Graphic 模块，可以使用 `echarts/core` 模块提供的 `use()` 方法来按需加载所需的 ECharts 模块和组件。

首先，安装 ECharts：

npm install echarts --save

然后，在组件中引入需要使用的 ECharts 模块和组件，如下所示：

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { RectShape } from 'echarts/graphic';

export default defineComponent({
  name: 'MyChart',
  setup() {
    const chartRef = ref(null);

    onMounted(() => {
      use([CanvasRenderer, GridComponent, TooltipComponent, LineChart, RectShape]);

      const chart = echarts.init(chartRef.value);
      // 在这里使用 ECharts 绘制图表
    });

    return {
      chartRef,
    };
  },
});
</script>

在 `use()` 方法中传入需要使用的 ECharts 模块和组件，然后在 `setup()` 函数中初始化 ECharts 实例，并在实例中使用需要的模块和组件。在这个例子中，我们使用了 `CanvasRenderer` 渲染器、`GridComponent` 组件、`TooltipComponent` 组件、`LineChart` 图表和 `RectShape` 图形。

注意，需要在 `onMounted()` 钩子函数中初始化 ECharts 实例，因为只有在组件渲染完成后才能访问 DOM 元素。

最后，在模板中添加一个 `div` 元素作为图表的容器，并将其绑定到 `chartRef` 引用变量上。在 ECharts 实例初始化之后，可以在实例中使用 ECharts 绘制图表。

希望这个例子对你有所帮助！