VUE使用echarts?5.0以上版本渲染器未導入錯誤問題
更新時間：2024年06月12日 11:32:23 作者：Humbunklung
這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導入錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題的出現
使用echarts、vue-echarts庫開發(fā)一個簡單的儀表盤應用，采用按需引入的方式
代碼如下：
<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>效果如下：
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue 作為一款流行的前端框架,提供了多種方式來定義組件,包括單文件組件、渲染函數、、JSX/TSX 以及函數式組件、不同的方式適用于不同的場景,本文將對這四種方式進行詳細對比,幫助你找到最適合自己項目的方案,需要的朋友可以參考下2025-03-03
今天小編就為大家分享一篇vue.js 實現點擊按鈕動態(tài)添加li的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue中computed及watch區(qū)別實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了Vue頁面骨架屏注入的操作，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了你了解vue3.0響應式數據怎么實現嗎，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
本文詳細講解了vue3獲取當前路由地址的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-01-01
這篇文章主要介紹了vue使用微信掃一掃功能的實現代碼,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了Vue細節(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue多個元素的樣式選擇器問題，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
vue表單vxe-form多字段聯動校驗的操作方法(對一個控件校驗多個關聯字段)
vue表單vxe-form如何多字段聯動校驗,對一個控件校驗多個關聯字段,這篇文章給大家介紹vue表單vxe-form如何多字段聯動校驗,對一個控件校驗多個關聯字段,感興趣的朋友跟隨小編一起看看吧2026-02-02