在vue的移動端項目中使用vue-echarts


1、看官網,按照官網的步驟來

2、關於移動端的自適應問題

     用到的是echarts中的resize()方法,具體步驟如下

    由與vue-echarts中用到的是v-chart標簽,所以使用方法與echarts中的使用又有點兒不同

    

// 結構
<div style="height:300px;width:100%;padding-top:40px;"> <!-- <v-chart :options="polar" /> --> <!-- 折線圖 --> <v-chart ref="mypolar" :options="line" id="myLine" /> <!-- 柱狀圖 --> <!-- <v-chart :options="bar" /> --> </div>

  

// 在methods中 
resizeChart() {
      if (this.$refs.myline) {
        this.$refs.myline.resize()
        console.log('1111')
      }
      if (this.$refs.mypolar) {
        this.$refs.mypolar.resize()
        console.log('222')
      }
    }

  

// 在mounted中調用
mounted() {
    window.addEventListener('resize', this.resizeChart)
    // this.drawLine()
  }

3、待補充其他的


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM