快捷導(dǎo)航

解決Vue3?echarts?v-show無法重新渲染的問題

更新時(shí)間：2023年09月11日 14:12:14 作者：woflyoycm

這篇文章主要介紹了Vue3?echarts?v-show無法重新渲染的問題,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Vue3 echarts v-show無法重新渲染的問題

部分html代碼如下

<el-empty class="chart-small" v-if="!dataList || !dataList.length" description="沒有數(shù)據(jù)"/>
<div class="chart-small" ref="dataBarDom" v-show="dataList && dataList.length">

部分js代碼如下

這里需要引入nextTick方法

import {ref, onMounted, reactive, nextTick} from "vue";
onMounted(async ()=>{
    getData()
})
// echarts相關(guān)
const dataBarDom = ref()//關(guān)聯(lián)圖標(biāo)div的ref
let dataBar = null
// 需要顯示的數(shù)據(jù)（有數(shù)據(jù)顯示，沒有數(shù)據(jù)不顯示）
const dataList=ref([])
const getData=async ()=>{
    // 從后臺獲取需要渲染的數(shù)據(jù)
    dataList.value=await getDataFromDb()
    if(dataList.value.length){
        showChart.value=true
        nextTick(() => {
            dataBar= echarts.init(dataBarDom.value)
            //...以下省略渲染echart的代碼
        })
    }else{
        showChart.value=false
    }
}

nextTick方法之后（Dom重新渲染）再去調(diào)用echarts圖標(biāo)的生成方法即可

vue3線上環(huán)境組件重新渲染echarts圖表無法正常顯示問題

一、echarts在vue3的使用問題

環(huán)境：

Vue3 版本

echarts 5.3.2版本

  "core-js": "^3.8.3",
    "echarts": "^5.3.2",
    "element-plus": "^2.0.4",
    "vue": "^3.2.13",
    "vue-router": "^4.0.13",
    "vue-ueditor-wrap": "^3.0.8"

問題描述：

線上環(huán)境vue組件第一次渲染時(shí)echarts圖表可以正常渲染展示，但是第二次進(jìn)入組件時(shí)（組件重新渲染）echarts無法正常渲染展示。

升級echarts5后發(fā)現(xiàn)的問題。

排查：

通過檢查dom發(fā)現(xiàn)雖然組件第二次重新渲染時(shí)，第一次組件渲染生成的echarts實(shí)列依然存在（未銷毀）導(dǎo)致第二次組件渲染但是echarts無法成功渲染展示

解決方案：

在組件每次渲染時(shí)都執(zhí)行一次echants實(shí)列銷毀操作。

目前還沒找到更好的解決方法，至少目前可行。

二、解決方案1

      // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
      echarts.init(document.getElementById("monthCollect")).dispose();
      var myChart = echarts.init(document.getElementById("monthCollect"));
      myChart.setOption()

三、解決方案2

// 取得Dom
var main=document.getDocumentByID()
//先獲取dom實(shí)例，執(zhí)行銷毀
let existInstance = echarts.getInstanceByDom(main);
if (existInstance) {
    if (true) {
        echarts.dispose(chartStudent);
    }
}
// 初始化&配置設(shè)定
let mychart = echarts.init(main);
mychar.setOption({....});

到此這篇關(guān)于Vue3 echarts v-show無法重新渲染的問題的文章就介紹到這了,更多相關(guān)Vue3 echarts v-show無法重新渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: