在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、待补充其他的

posted on 2020-08-16 15:35  人鱼之森  阅读(1608)  评论(0编辑  收藏  举报