移動(dòng)端echarts折線圖結(jié)合vant的tab標(biāo)簽實(shí)戰(zhàn)中遇到坑點(diǎn)

實(shí)現(xiàn)以下效果


image.png

結(jié)構(gòu)

<div class="charts">
        <van-tabs v-model="active" @click="onClick" line-height='1px' title-active-color='#009E96' color='#009E96'>
          <van-tab title="美元">
              <div ref="dollarChart" class="mychart"></div>
          </van-tab>
          <van-tab title="港幣">
              <div ref="hkdChart" class="mychart"></div>
          </van-tab>
          <van-tab title="日元">
              <div ref="yenChart" class="mychart"></div>
          </van-tab>
          <van-tab title="歐元">
              <div ref="eurChart" class="mychart"></div>
          </van-tab>
        </van-tabs>
 </div>

一開(kāi)始,按照以下思路實(shí)現(xiàn)會(huì)出現(xiàn)各種問(wèn)題

<script>
export default {
  data () {
    return {
     
    }
  },
  created () {
     this.updateData();
  },
  methods: {
   // 接口一次性回來(lái)全部數(shù)據(jù)
    updateData() {
      this.$http.post('/pweb/pweb-transfer.MyForeignQry.do', {}).then(res=>{
        if( res._RejCode==='000000' ){
          this.dataMap = res.DataMap
          // 處理echarts數(shù)據(jù)
          for (let key of Object.keys(this.dataMap)){
              if(key === 'UsdMap'){ // 美元
                  this.dollarCurrencyDate = this.dataMap.UsdMap.UsdList.map(item => {
                    return item.CurrencyDate
                  })
                  this.dollarCurrencyBuyRate = this.dataMap.UsdMap.UsdList.map(item => {
                    return item.CurrencyBuyRate
                  })
                  this.dollarCurrencySaleRate = this.dataMap.UsdMap.UsdList.map(item => {
                    return item.CurrencySaleRate
                  })
              }else if(key === 'EurMap'){ // 歐元
                  this.eurCurrencyDate = this.dataMap.EurMap.EurList.map(item => {
                    return item.CurrencyDate
                  })
                  this.eurCurrencyBuyRate = this.dataMap.EurMap.EurList.map(item => {
                    return item.CurrencyBuyRate
                  })
                  this.eurCurrencySaleRate = this.dataMap.EurMap.EurList.map(item => {
                    return item.CurrencySaleRate
                  })
              }else if(key === 'JpyMap'){ // 日元
                  this.yenCurrencyDate = this.dataMap.JpyMap.JpyList.map(item => {
                    return item.CurrencyDate
                  })
                  this.yenCurrencyBuyRate = this.dataMap.JpyMap.JpyList.map(item => {
                    return item.CurrencyBuyRate
                  })
                  this.yenCurrencySaleRate = this.dataMap.JpyMap.JpyList.map(item => {
                    return item.CurrencySaleRate
                  })
              }else if(key === 'HkdMap'){ // 港幣
                  this.hkdCurrencyDate = this.dataMap.HkdMap.HkdList.map(item => {
                    return item.CurrencyDate
                  })
                  this.hkdCurrencyBuyRate = this.dataMap.HkdMap.HkdList.map(item => {
                    return item.CurrencyBuyRate
                  })
                  this.hkdCurrencySaleRate = this.dataMap.HkdMap.HkdList.map(item => {
                    return item.CurrencySaleRate
                  })
              }
          }
          // 美元
          let Data = this.dollarCurrencyDate
          let BuyRate = this.dollarCurrencyBuyRate.map(Number)
          let SaleRate = this.dollarCurrencySaleRate.map(Number)
          // this.setChart(Data,BuyRate,SaleRate)
          this.$nextTick(() => {
                this.setChart(Data,BuyRate,SaleRate)
           })
        }
      })
    },
   setChart(Data,BuyRate,SaleRate) {
      let dollarChart = this.$echarts.init(this.$refs.dollarChart)
      let eurChart = this.$echarts.init(this.$refs.eurChart)
      let yenChart = this.$echarts.init(this.$refs.yenChart)
      let hkdChart = this.$echarts.init(this.$refs.hkdChart)
      let dollarOption = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
          type: 'plain',
          left: 'left',
          data: ['買入?yún)R率', '賣出匯率']
        },
        xAxis: {
          type: 'category',
          axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。
            interval:0,
            rotate:"45"
          },
          data: Data
        },
        yAxis: {
          type: 'value',
          max : 6.7,
          min : 6.0,
          splitNumber : 7
        },
        series: [
          {
            name: '買入?yún)R率',
            data: BuyRate,
            type: 'line'
          },
          {
            name: '賣出匯率',
            data: SaleRate,
            type: 'line'
          }
        ]
      }
      let eurOption = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
          type: 'plain',
          left: 'left',
          data: ['買入?yún)R率', '賣出匯率']
        },
        xAxis: {
          type: 'category',
          axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。
            interval:0,
            rotate:"45"
          },
          data: this.eurCurrencyDate
        },
        yAxis: {
          type: 'value',
          max : 7.8,
          min : 7.4,
          splitNumber : 7
        },
        series: [
          {
            name: '買入?yún)R率',
            data: this.eurCurrencyBuyRate.map(Number),
            type: 'line'
          },
          {
            name: '賣出匯率',
            data: this.eurCurrencySaleRate.map(Number),
            type: 'line'
          }
        ]
      }
      let yenOption = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
          type: 'plain',
          left: 'left',
          data: ['買入?yún)R率', '賣出匯率']
        },
        xAxis: {
          type: 'category',
          axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。
            interval:0,
            rotate:"45"
          },
          data: this.yenCurrencyDate
        },
        yAxis: {
          type: 'value',
          max : 0.4,
          min :  0,
          splitNumber : 7
        },
        series: [
          {
            name: '買入?yún)R率',
            data: this.yenCurrencyBuyRate.map(Number),
            type: 'line'
          },
          {
            name: '賣出匯率',
            data: this.yenCurrencySaleRate.map(Number),
            type: 'line'
          }
        ]
      }
      let hkdOption = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
          type: 'plain',
          left: 'left',
          data: ['買入?yún)R率', '賣出匯率']
        },
        xAxis: {
          type: 'category',
          axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。
            interval:0,
            rotate:"45"
          },
          data: this.hkdCurrencyDate
        },
        yAxis: {
          type: 'value',
          max : 1.1,
          min : 0.7,
          splitNumber : 7
        },
        series: [
          {
            name: '買入?yún)R率',
            data: this.hkdCurrencyBuyRate.map(Number),
            type: 'line'
          },
          {
            name: '賣出匯率',
            data: this.hkdCurrencySaleRate.map(Number),
            type: 'line'
          }
        ]
      }
      dollarChart.setOption(dollarOption)
      eurChart.setOption(eurOption)
      yenChart.setOption(yenOption)
      hkdChart.setOption(hkdOption)
    },

  },
  
}
</script>

上述代碼在web端結(jié)合element的tab可以實(shí)現(xiàn)效果
但在手機(jī)端會(huì)出現(xiàn)問(wèn)題
具體如下
一 由于echarts的dom和數(shù)據(jù)是異步的,如果沒(méi)有使用nextTick會(huì)出現(xiàn)如下報(bào)錯(cuò)


image.png

解決辦法是使用nextTick讓數(shù)據(jù)回來(lái)后,等待下一次dom更新完畢后再渲染頁(yè)面
具體是在created階段使用nextTick
上述,將nextTick放在拿數(shù)據(jù)的方法里,依然報(bào)上述錯(cuò)誤

二 于是給了nextTick后,則報(bào)如下錯(cuò)誤


image.png

報(bào)錯(cuò) Error in nextTick: "TypeError: Cannot read property 'children' of undefined"

解決：加一個(gè)判斷 if (數(shù)據(jù)存在)，再執(zhí)行this.nextTick()方法

三 在setChart方法中,需要給echarts定義dom,這里由于一開(kāi)始只拿到了美元的div,其他div取不到,這樣會(huì)導(dǎo)致美元的圖也顯示不出來(lái)

     let dollarChart = this.$echarts.init(this.$refs.dollarChart)
   // 下面三個(gè)div獲取不到,導(dǎo)致后面流程走不了,因此美元也展示不了圖
      let eurChart = this.$echarts.init(this.$refs.eurChart)
      let yenChart = this.$echarts.init(this.$refs.yenChart)
      let hkdChart = this.$echarts.init(this.$refs.hkdChart)

一開(kāi)始,總是覺(jué)得nextTick沒(méi)有用對(duì)地方,導(dǎo)致數(shù)據(jù)回來(lái)dom沒(méi)更新(因?yàn)樵趙eb端這樣做是可行的),但沒(méi)想到是這里出現(xiàn)了關(guān)鍵的問(wèn)題,后面通過(guò)打印div才發(fā)現(xiàn)只拿到了一個(gè)div,length為1


image.png

這個(gè)關(guān)鍵問(wèn)題找出后,后面的問(wèn)題就迎刃而解!

解決思路
通過(guò)tab提供的click事件,點(diǎn)擊一次,則初始化一次dom元素,之后再拿數(shù)據(jù)去畫圖,這個(gè)時(shí)候還是要用到nextTick,以保證dom更新完畢后再把數(shù)據(jù)渲染上去(因?yàn)閿?shù)據(jù)在created就已經(jīng)拿到)

直接上代碼

// 在created()里使用this.$nextTick()可以等待dom生成以后再來(lái)獲取dom對(duì)象
 created () {  
     this.$nextTick(() => {
                 this.updateData();
     })
  },

 methods: {
   // tab的點(diǎn)擊事件
    onClick(name, title){
        if(title === '港幣'){
          this.$nextTick(()=>{
              let hkdChart = this.$echarts.init(this.$refs.hkdChart)
              let hkdOption = {
                  tooltip: {
                      trigger: 'axis'
                  },
                  legend: {
                    type: 'plain',
                    left: 'left',
                    top:'12px',
                    data: ['買入?yún)R率', '賣出匯率']
                  },
                  xAxis: {
                    type: 'category',
                    axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。
                      interval:0,
                      rotate:"45"
                    },
                    data: this.hkdCurrencyDate
                  },
                  yAxis: {
                    type: 'value',
                    max : 1.1,
                    min : 0.7,
                    splitNumber : 7
                  },
                  series: [
                    {
                      name: '買入?yún)R率',
                      data: this.hkdCurrencyBuyRate.map(Number),
                      type: 'line'
                    },
                    {
                      name: '賣出匯率',
                      data: this.hkdCurrencySaleRate.map(Number),
                      type: 'line'
                    }
                  ]
                }
               hkdChart.setOption(hkdOption)
          })
        }else if(title === '日元'){
          this.$nextTick(()=>{
              let yenChart = this.$echarts.init(this.$refs.yenChart)
              let yenOption = {
                  tooltip: {
                      trigger: 'axis'
                  },
                  legend: {
                    type: 'plain',
                    left: 'left',
                    top:'12px',
                    data: ['買入?yún)R率', '賣出匯率']
                  },
                  xAxis: {
                    type: 'category',
                    axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。
                      interval:0,
                      rotate:"45"
                    },
                    data: this.yenCurrencyDate
                  },
                  yAxis: {
                    type: 'value',
                    max : 0.4,
                    min :  0,
                    splitNumber : 7
                  },
                  series: [
                    {
                      name: '買入?yún)R率',
                      data: this.yenCurrencyBuyRate.map(Number),
                      type: 'line'
                    },
                    {
                      name: '賣出匯率',
                      data: this.yenCurrencySaleRate.map(Number),
                      type: 'line'
                    }
                  ]
                }
              yenChart.setOption(yenOption)
          })
        }else if(title === '歐元'){
          this.$nextTick(()=>{
              let eurChart = this.$echarts.init(this.$refs.eurChart)
              let eurOption = {
                  tooltip: {
                      trigger: 'axis'
                  },
                  legend: {
                    type: 'plain',
                    left: 'left',
                    top:'12px',
                    data: ['買入?yún)R率', '賣出匯率']
                  },
                  xAxis: {
                    type: 'category',
                    axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。
                      interval:0,
                      rotate:"45"
                    },
                    data: this.eurCurrencyDate
                  },
                  yAxis: {
                    type: 'value',
                    max : 7.8,
                    min : 7.4,
                    splitNumber : 7
                  },
                  series: [
                    {
                      name: '買入?yún)R率',
                      data: this.eurCurrencyBuyRate.map(Number),
                      type: 'line'
                    },
                    {
                      name: '賣出匯率',
                      data: this.eurCurrencySaleRate.map(Number),
                      type: 'line'
                    }
                  ]
                }
              eurChart.setOption(eurOption)
          })
        }
    },
    updateData() {
      this.$http.post('/pweb/pweb-transfer.MyForeignQry.do', {}).then(res=>{
        if( res._RejCode==='000000' ){
          this.dataMap = res.DataMap
          // 處理echarts數(shù)據(jù)
          for (let key of Object.keys(this.dataMap)){
              if(key === 'UsdMap'){ // 美元
                  this.dollarCurrencyDate = this.dataMap.UsdMap.UsdList.map(item => {
                    return item.CurrencyDate
                  })
                  this.dollarCurrencyBuyRate = this.dataMap.UsdMap.UsdList.map(item => {
                    return item.CurrencyBuyRate
                  })
                  this.dollarCurrencySaleRate = this.dataMap.UsdMap.UsdList.map(item => {
                    return item.CurrencySaleRate
                  })
              }else if(key === 'EurMap'){ // 歐元
                  this.eurCurrencyDate = this.dataMap.EurMap.EurList.map(item => {
                    return item.CurrencyDate
                  })
                  this.eurCurrencyBuyRate = this.dataMap.EurMap.EurList.map(item => {
                    return item.CurrencyBuyRate
                  })
                  this.eurCurrencySaleRate = this.dataMap.EurMap.EurList.map(item => {
                    return item.CurrencySaleRate
                  })
              }else if(key === 'JpyMap'){ // 日元
                  this.yenCurrencyDate = this.dataMap.JpyMap.JpyList.map(item => {
                    return item.CurrencyDate
                  })
                  this.yenCurrencyBuyRate = this.dataMap.JpyMap.JpyList.map(item => {
                    return item.CurrencyBuyRate
                  })
                  this.yenCurrencySaleRate = this.dataMap.JpyMap.JpyList.map(item => {
                    return item.CurrencySaleRate
                  })
              }else if(key === 'HkdMap'){ // 港幣
                  this.hkdCurrencyDate = this.dataMap.HkdMap.HkdList.map(item => {
                    return item.CurrencyDate
                  })
                  this.hkdCurrencyBuyRate = this.dataMap.HkdMap.HkdList.map(item => {
                    return item.CurrencyBuyRate
                  })
                  this.hkdCurrencySaleRate = this.dataMap.HkdMap.HkdList.map(item => {
                    return item.CurrencySaleRate
                  })
              }
          }
          // 美元
          let Data = this.dollarCurrencyDate
          let BuyRate = this.dollarCurrencyBuyRate.map(Number)
          let SaleRate = this.dollarCurrencySaleRate.map(Number)
          let this_ = this
          if(Data && BuyRate && SaleRate){   // 先判斷一下是否有數(shù)據(jù),否則會(huì)報(bào)nextTick的錯(cuò)誤
            this_.setChart(Data,BuyRate,SaleRate)
          }
        }
      })
    },
   setChart(Data,BuyRate,SaleRate) {
      let dollarChart = this.$echarts.init(this.$refs.dollarChart)
      let dollarOption = {
          tooltip: {
              trigger: 'axis'
          },
          legend: {
            type: 'plain',
            left: 'left',
            top:'12px',
            data: ['買入?yún)R率', '賣出匯率']
          },
          xAxis: {
            type: 'category',
            axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。
              interval:0,
              rotate:"45"
            },
            data: Data
          },
          yAxis: {
            type: 'value',
            max : 6.7,
            min : 6.3,
            splitNumber : 7
          },
          series: [
            {
              name: '買入?yún)R率',
              data: BuyRate,
              type: 'line'
            },
            {
              name: '賣出匯率',
              data: SaleRate,
              type: 'line'
            }
          ]
        }
      dollarChart.setOption(dollarOption)
    },
  },
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容