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

问题的出现

使用echarts、vue-echarts库开发一个简单的仪表盘应用，采用按需引入的方式

代码如下：

<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>

运行时浏览器报

uncaught error: renderer 'undefined' is not imported. please import it first. 错误：

问题解决

通过错误提示我们可知，图表欠缺了渲染器，根据echarts官方文档（我引用的是5.5.0版本），需要加上渲染器，并在程序中引入

修改后代码如下：

<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>

效果如下：