快捷導(dǎo)航

在Vue的mounted中仍然加載渲染不出echarts的方法問(wèn)題

更新時(shí)間：2024年03月06日 10:38:07 作者：沒(méi)有頭發(fā)的戰(zhàn)斗暴龍獸

這篇文章主要介紹了在Vue的mounted中仍然加載渲染不出echarts的方法問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

問(wèn)題

問(wèn)題的主要原因是在mounted中無(wú)法獲取到dom元素

<template>
  <div>
    <div ref="echarts"></div>
  </div>
</template>
 
<script>
  export default {
    mounted () {
      console.log(this.$$refs.echarts);  // undefined
    },
  }
</script>

知道了問(wèn)題在哪里，那就從根源下手：

這是因?yàn)槟承┮蛩厥沟迷趍ounted中還并沒(méi)有生成dom，所以結(jié)果自然就是undefined，那怎樣才能獲取到這個(gè)dom元素？

解決方法1（完美解決+超簡(jiǎn)單）

直接把初始化方法寫在updated生命周期中

    methods: {
      initEcharts() {
        echarts.init(this.$refs.echarts).setOption(option);
      }
    },
    updated() {
      this.initEcharts();
    }

解決方法2（完美解決+復(fù)雜）

使用自定義指令

我們自己設(shè)置一個(gè)自定義屬性，去監(jiān)測(cè)dom是什么時(shí)候生成的，在dom生成的時(shí)候立刻將echarts渲染到頁(yè)面上。

這個(gè)方法完美解決了加定時(shí)器有延時(shí)的缺點(diǎn)。

<template>
  <div>
    <div ref="echarts" v-init="option"></div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts';
  export default {
    data() {
      return {
        option: {
          title: {
          text: 'ECharts 入門示例'
        },
        tooltip: {},
        legend: {
          data: ['銷量']
        },
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
        }
      }
    },
    directives: {
      init: {
        // inserted: 在dom元素成功插入父節(jié)點(diǎn)時(shí)的鉤子函數(shù)
        inserted(el, binding) {
          echarts.init(el).setOption(binding.value);
        }
      }
    },
  }
</script>

解決方法3（有缺陷+超簡(jiǎn)單）

在初始化方法外面套一層定時(shí)器

在初始化方法外面套一層定時(shí)器：等dom生成了之后我們?cè)偃カ@取這個(gè)dom元素

    methods: {
      initEcharts() {
        echarts.init(this.$refs.echarts).setOption(option);
      }
    },
    mounted () {
      setTimeout(() => {
        this.initEcharts();
      }, 500)
    },

這個(gè)方法有一個(gè)很大的缺點(diǎn)，就是我們要自己去設(shè)置定時(shí)器的時(shí)間，就有可能會(huì)造成頁(yè)面的渲染和echarts的渲染不同步，頁(yè)面顯示出來(lái)了之后echarts可能要過(guò)一會(huì)兒才會(huì)出現(xiàn)。