//v-empty="{el:'echart1',show:value}"
//class是要替換的元素的類名（）
//flag是判斷圖片顯示隱藏的依據(jù)
//必須要指定寬高
Vue.directive('empty', 
  (el, binding, vnode, oldVnode)=> {
    Vue.nextTick(()=>{
      let show=binding.value.show
      let Elclass=binding.value.el
      const _DOM = el.querySelector(`.${Elclass}`);
      if(!_DOM){
        console.log('傳的對應的類名不對')
        return
      }
      if(show){
        _DOM.style.display='block'
        const empty_content = el.querySelector('.empty_content');
        if(empty_content)empty_content.remove()
      }else{
        _DOM.style.display='none'
        let div=document.createElement("div");
        div.className="empty_content"
        div.style.height=el.clientHeight + 'px'
        div.style.width=el.clientWidth + 'px'
        div.style.display='flex'
        div.style.alignItems='center'
        div.style.justifyContent='center'
        let img=document.createElement("img");
        img.setAttribute('src','no-data.png')
        div.appendChild(img)
        el.appendChild(div)
      }
    })
  },
)

使用如圖（value:true/false //為控制顯示判斷的依據(jù)）

<div class="echart_content" v-empty="{el:'echart1',show:value}">
              <div  class="echart1">數(shù)據(jù)展示</div>
</div>

QQ截圖20221222143333.png