处理饼图难以绑定调用接口后的数据（then作用域外使用其中的数据）

一、说下我们这个pie（饼图坑爹之处）

它有两种data绑定方式

• 直接绑定到data里

<my-chart-pie :data="pieData" style="height:330px" >

data() {
    return {
      pieData: {
        columns: ['渠道', '访问量'],
        rows: [
          ['直接访问', 320],
          ['邮件营销', 302],
          ['联盟广告', 334],
          ['视频广告', 390],
          ['搜索引擎', 330]
        ]
      },
      rows: [] // 后面要用到
    }
  }

• 然后，修改它的rows

直接绑定在data时思路：
1、直接this.pieData.rows =（无效）
2、this.$set(pieData, 'rows', 获取到的数据)（无效，这个获取到数据这个位置，如果是静态即自己直接写的才行，调接口后就设置值，图都画完了，！坑爹就在它画完图后修改数据，图无法改变，难受┭┮﹏┭┮）

二、绑定methods中函数（即return返回的数据）

<my-chart-pie :data="getData()" :extend="extend"  style="height:330px" >

先看一个错的绑定（这里十分之坑！作用域的问题{无法直接使用then里的数据}）

getData() {
let rows = [] 
//
      this.countByType().then(res => {
        for (const e of res) {
          rows.push([e.count,  e.modelType])
        }
        console.warn('rows', rows)//可以看到，有值
      })
      console.warn('rows', rows)//没有值
      return {
                   columns: ['模型', '数量'],
                  rows
                  }

    }

• 说实话，那时候拍脑袋还试了下axios原生调接口（结果没啥用~~亏我期待o(╥﹏╥)o）

来吧最后，处理解决的代码（很简单，但是当时居然没想起来【以前还用过，真的坑┭┮﹏┭┮】）

• 最后想起，加一步、把数据给data，然后再去调用data中的，就可以在then外面使用了

created() {
//这个方法不能写到getData()中，它是监听绑定返回值，写在里面，会一直调用接口！！
this.countByType().then(res => {
        const rows = []
        for (const e of res) {
          rows.push([e.count,  e.modelType])
        }
        this.rows = rows// 最后想起了
      })
}

methods: {
getData() {
      
      return {
                   columns: ['模型', '数量'],
                  rows: this.rows
                  }

    }
}

解决！！！撒花✿✿ヽ(°▽°)ノ✿