VUE使用echarts?5.0以上版本渲染器未導入錯誤問題
更新時間：2024年06月12日 11:32:23 作者：Humbunklung
這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導入錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題的出現(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>運行時瀏覽器報
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';
// 注意，新的接口中默認不再包含 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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了在Vue3組合式API中如何優(yōu)化列表渲染性能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-12-12
這篇文章主要介紹了如何把vuejs打包出來的文件整合到springboot里,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue實現(xiàn)lodop打印功能的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
vue elementui簡易側(cè)拉欄的使用小結(jié)
這篇文章主要介紹了vue elementui簡易側(cè)拉欄的使用,增加了側(cè)拉欄,目的是可以選擇多條數(shù)據(jù)展示數(shù)據(jù),本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了vue踩坑日記之params傳遞參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家介紹了c++游戲教程使用easyx實現(xiàn)大飛機示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue中使用h5 Plus的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了vue2.0的contextmenu右鍵彈出菜單的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
vue項目使用lodash節(jié)流防抖函數(shù)問題解決方案
在lodash函數(shù)工具庫中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用，這篇文章主要介紹了vue項目使用lodash節(jié)流防抖函數(shù)問題與解決,需要的朋友可以參考下2023-10-10
vue3數(shù)據(jù)可視化實現(xiàn)數(shù)字滾動特效代碼
這篇文章主要介紹了vue3數(shù)據(jù)可視化實現(xiàn)數(shù)字滾動特效,實現(xiàn)思路是使用Vue.component定義公共組件，使用window.requestAnimationFrame（首選，次選setTimeout）來循環(huán)數(shù)字動畫，詳細代碼跟隨小編一起看看吧2022-09-09