快捷導(dǎo)航

VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯誤問題

更新時間：2024年06月12日 11:32:23 作者：Humbunklung

這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

問題的出現(xiàn)

使用echarts、vue-echarts庫開發(fā)一個簡單的儀表盤應(yīng)用，采用按需引入的方式

代碼如下：

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

運(yùn)行時瀏覽器報

Uncaught Error: Renderer 'undefined' is not imported. Please import it first. 錯誤：

問題解決

通過錯誤提示我們可知，圖表欠缺了渲染器，根據(jù)ECharts官方文檔（我引用的是5.5.0版本），需要加上渲染器，并在程序中引入

修改后代碼如下：

<script setup>
import {basic_gauge_option} from '../data/gauge';
import {TitleComponent, TooltipComponent} from 'echarts/components';
// 注意，新的接口中默認(rèn)不再包含 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>

效果如下：

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3定義組件的四種方式
Vue 作為一款流行的前端框架,提供了多種方式來定義組件,包括單文件組件、渲染函數(shù)、、JSX/TSX 以及函數(shù)式組件、不同的方式適用于不同的場景,本文將對這四種方式進(jìn)行詳細(xì)對比,幫助你找到最適合自己項(xiàng)目的方案,需要的朋友可以參考下
2025-03-03
vue.js 實(shí)現(xiàn)點(diǎn)擊按鈕動態(tài)添加li的方法
今天小編就為大家分享一篇vue.js 實(shí)現(xiàn)點(diǎn)擊按鈕動態(tài)添加li的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue中computed及watch區(qū)別實(shí)例解析
這篇文章主要介紹了Vue中computed及watch區(qū)別實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-08-08
Vue頁面骨架屏注入方法
這篇文章主要介紹了Vue頁面骨架屏注入的操作，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-05-05
你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實(shí)現(xiàn)嗎
這篇文章主要介紹了你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實(shí)現(xiàn)嗎，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-06-06
vue3獲取當(dāng)前路由地址
本文詳細(xì)講解了vue3獲取當(dāng)前路由地址的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-01-01
vue使用微信掃一掃功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue使用微信掃一掃功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2020-04-04
理理Vue細(xì)節(jié)（推薦）
這篇文章主要介紹了Vue細(xì)節(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue多個元素的樣式選擇器問題
這篇文章主要介紹了vue多個元素的樣式選擇器問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-11-11
vue表單vxe-form多字段聯(lián)動校驗(yàn)的操作方法(對一個控件校驗(yàn)多個關(guān)聯(lián)字段)
vue表單vxe-form如何多字段聯(lián)動校驗(yàn),對一個控件校驗(yàn)多個關(guān)聯(lián)字段,這篇文章給大家介紹vue表單vxe-form如何多字段聯(lián)動校驗(yàn),對一個控件校驗(yàn)多個關(guān)聯(lián)字段,感興趣的朋友跟隨小編一起看看吧
2026-02-02