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

Nodejs 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里面呢？


15 回复

目测 this，毕竟没写过前端


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

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

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

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

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

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

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

问题的重点不是 this 的问题，而是图画不出来…

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

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

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

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

修改绑定样式 :style

要在Node.js中使用Axios获取后端数据并将其填充到v-charts中，你需要进行以下几个步骤。假设你正在使用Vue.js框架和v-charts库来构建前端应用。

  1. 安装依赖： 确保你已经安装了axios和v-charts。如果没有，请使用npm或yarn进行安装：

    npm install axios v-charts

  2. 获取数据： 在你的Vue组件中，使用Axios获取后端数据。

    <script>
import axios from 'axios';

export default {
  data() {
    return {
      chartData: {}
    };
  },
  mounted() {
    axios.get('你的后端API地址')
      .then(response => {
        this.chartData = response.data;
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }
};
</script>

  3. 使用v-charts渲染图表： 将获取到的数据绑定到v-charts组件上。

    <template>
  <ve-line :data="chartData"></ve-line>
</template>

<script>
import VeLine from 'v-charts/lib/line.common';

export default {
  components: { VeLine }
};
</script>

注意：chartData的格式需要符合v-charts的要求。通常，这包括一个包含columns和rows的对象，其中columns表示列名，rows表示数据行。确保后端返回的数据格式与此匹配，或在前端进行适当的转换。

回到顶部