VUE使用echarts 5.0以上版本渲染器未导入错误问题

<script setup>
import {basic_gauge_option} from '../data/gauge';
import {TitleComponent, TooltipComponent} from 'echarts/components';
import { GaugeChart } from 'echarts/charts';
import { use } from 'echarts/core';
import VExample from './Example.vue';
import VChart from 'vue-echarts';
import { shallowRef } from 'vue';
 
use([GaugeChart, TitleComponent, TooltipComponent])
 
const option = shallowRef(basic_gauge_option)
</script>
 
<template>
    <v-example title="仪表盘示例" id="gauge-example" desc="仪表盘使用样例">
        <v-chart :option="option" autoresize>
        </v-chart>
    </v-example>
</template>

<script setup>
import {basic_gauge_option} from '../data/gauge';
import {TitleComponent, TooltipComponent} from 'echarts/components';
// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer
// 引入Canvas渲染器或SVG渲染器是必须的一步
import { CanvasRenderer }from 'echarts/renderers';
import { GaugeChart } from 'echarts/charts';
import { use } from 'echarts/core';
import VExample from './Example.vue';
import VChart from 'vue-echarts';
import { shallowRef } from 'vue';
 
use([GaugeChart, TitleComponent, TooltipComponent, CanvasRenderer])
 
const option = shallowRef(basic_gauge_option)
</script>
<template>
    <v-example title="仪表盘示例" id="gauge-example" desc="仪表盘使用样例">
        <v-chart :option="option" autoresize>
        </v-chart>
    </v-example>
</template>