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

被折磨一天了，用 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里面呢？