axios 如何将后端返回的数据填充 v-charts 里面呢？

[SlipStupig]

被折磨一天了，用 axios 请求的数据死活不能填充到 v-charts 里面，代码如下：

<template>
  <el-contaner>
    <el-header>
      <TopBar></TopBar>
    </el-header>
    <el-main>
      <div class="dashbraod">
        <ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
      </div>
    </el-main>
  </el-contaner>
</template>

<style>
  .dashbraod{
    position: relative;

  }
</style>

<script>
  import TopBar from './Navbar'
  import axios from 'axios'
  import { Message } from 'element-ui'

  export default {
    name: 'Console',
    data () {
      return {
        chartData: {
          rows: [],
          columns: ['id', 'total']
        },
        chartSettings: {
          dimension: 'id',
          metrics: 'total'
        }
      }
    },
    components: {
      TopBar
    },
    method: {
    },
    created: function () {
      alert('Be mounted')
      axios.get('http://localhost/data/Statistic').then(function (res) {
        for (let i = 0; i < res.data.length; i++) {
          this.chartData.rows.push(res.data[i])
        }
      }).catch(function (res) {
        Message.error(res.toString())
      })
      alert(this.chartData.rows)
    }
  }
</script>

请教各位，怎么改才能将 axios 的数据填充到chartData.rows里面呢？

终于解决了，首先来说axios，必须用"=>"来推导值，然后再data ()函数过程中写入相关的值。

代码示例：

data () {
      return {
/* 这里申明模板数据属性*/
        chartData: {
          columns: ['id', 'sum'],
          rows: []
        }
      }
    }

第二部分在created生命周期里面写入请求函数

    created () {
      // let ctx = this.loadData()
      axios.get('http://localhost:8088/g').then(response => {
        let res = response.data
//请注意这里不能直接赋值，需要将数据依次插入到数据对象里面，不然会出现数据类型不正确
        for (let i = 0; i < res.msg.length; i++) {
          this.chartData.rows.push(res.msg[i])
        }
      })
      this.chartSettings = {
        dimension: 'id',
        metrics: 'sum'
      }
    }

[zhoulouzi]

目测 this，毕竟没写过前端

[wwqgtxx]

把 then 后面的 function 换成剪头函数，而且我记得在 created 中是不能修改数据的，要在 mounted 之后

[TimRChen]

没找到你用的 v-chart...不过我认为此处可以把 v-bind:data=""改成 v-modal=""

[TimRChen]

@wwqgtxx 此处写不写箭头函数有影响吗？不过第二句话说得对。

[SlipStupig]

@wwqgtxx 我其实只是想填充一下数据画一个“饼图”，但是似乎只要动态填充就不行 !=_=

[SlipStupig]

@TimRChen https://github.com/ElemeFE/v-charts，就是这个

[TimRChen]

this 指向问题 http://blog.csdn.net/qq_30378229/article/details/78429374

[TimRChen]

const _self = this;
应该可解决问题

[SlipStupig]

@TimRChen 问题的重点不是 this 的问题，而是图画不出来.....

[wwqgtxx]

@TimRChen 写箭头函数就是间接的改变了 this 的指向呀

[TimRChen]

@SlipStupig 在 axios 里的回调函数中 this 值为 undefined，但此程序明显是想把数据存储存储到 chartData.row 中，但此时你的 this 指向的并不是 vue 实例，所以 chartData.row 也是 undefined，也就是说，你的数据传递发生了问题。

[TimRChen]

我倒是建议你先尝试下在生命周期函数中先把 this 存入一个变量中，然后操作这个变量看下结果

[l12ab]

说句题外话，el-main 在 ie11 下只显示一点点的高度，如何解决的

[SlipStupig]

@l12ab 修改绑定样式 :style