首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 echarts v-show无法重新渲染

解决Vue3 echarts v-show无法重新渲染的问题

2023-09-11 14:10:18 作者：woflyoycm

这篇文章主要介绍了Vue3 echarts v-show无法重新渲染的问题,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

Vue3 echarts v-show无法重新渲染的问题

部分html代码如下

<el-empty class="chart-small" v-if="!dataList || !dataList.length" description="没有数据"/>
<div class="chart-small" ref="dataBarDom" v-show="dataList && dataList.length">

部分js代码如下

这里需要引入nextTick方法

import {ref, onMounted, reactive, nextTick} from "vue";
onMounted(async ()=>{
    getData()
})
// echarts相关
const dataBarDom = ref()//关联图标div的ref
let dataBar = null
// 需要显示的数据（有数据显示，没有数据不显示）
const dataList=ref([])
const getData=async ()=>{
    // 从后台获取需要渲染的数据
    dataList.value=await getDataFromDb()
    if(dataList.value.length){
        showChart.value=true
        nextTick(() => {
            dataBar= echarts.init(dataBarDom.value)
            //...以下省略渲染echart的代码
        })
    }else{
        showChart.value=false
    }
}

nextTick方法之后（Dom重新渲染）再去调用echarts图标的生成方法即可

vue3线上环境组件重新渲染echarts图表无法正常显示问题

一、echarts在vue3的使用问题

环境：

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"

问题描述：

线上环境vue组件第一次渲染时echarts图表可以正常渲染展示，但是第二次进入组件时（组件重新渲染）echarts无法正常渲染展示。

升级echarts5后发现的问题。

排查：

通过检查dom发现虽然组件第二次重新渲染时，第一次组件渲染生成的echarts实列依然存在（未销毁）导致第二次组件渲染但是echarts无法成功渲染展示

解决方案：

在组件每次渲染时都执行一次echants实列销毁操作。

目前还没找到更好的解决方法，至少目前可行。

二、解决方案1

      // 基于准备好的dom，初始化echarts实例
      echarts.init(document.getElementById("monthCollect")).dispose();
      var myChart = echarts.init(document.getElementById("monthCollect"));
      myChart.setOption()

三、解决方案2

// 取得Dom
var main=document.getDocumentByID()
//先获取dom实例，执行销毁
let existInstance = echarts.getInstanceByDom(main);
if (existInstance) {
    if (true) {
        echarts.dispose(chartStudent);
    }
}
// 初始化&配置設定
let mychart = echarts.init(main);
mychar.setOption({....});

到此这篇关于Vue3 echarts v-show无法重新渲染的问题的文章就介绍到这了,更多相关Vue3 echarts v-show无法重新渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！