前言

前两天,小编总结了vue数据图表,但是不能绑定数据,今天为大家分享,vue中v-chart如何绑定数据,实现动态变化的数据分析

前端

<template>
   <div>
  <ve-bar :data="chartData"
  ></ve-bar>
   </div>
</template>

<script>
import Vue from 'vue';
import VCharts from 'v-charts';
import axios from 'axios';
Vue.use(VCharts);
export default {
  data () {
    return {

      chartData: {
        columns: [],
        rows: []
      },

      // 参加活动次数
      countList: '',
      
      //  人员积极程度map
      countlistmap: { '日期': '积极性' },
      countlistArray: [],
      activetitle: ['日期']

    };
  },

  components: {},

  computed: {},

  mounted: {},

  methods: {
    load () {
      this.selectCountActive();
    },

    // 查询某人参加活动的次数
    selectCountActive () {
      let vm = this;
      let tempUrl = process.env.VUE_APP_URL;
      const url = tempUrl + 'activePerson/selectCountActive?id=1137705964137394178';//接口
      axios.get(url).then(function (response) {
        if (response.data.code === '0000') {
          // vm.chartData.rows={'积极性': "积极性", '参加活动次数':response.data.data, '邀请人人数': 1, '博客被推荐数': 2 }
          vm.countList = response.data.data;//变量接收后端数据
          console.log(vm.countList);
           
           //循环遍历,将穿回来的list转换为chart需要的键值对形式
          for (let index = 0; index < vm.countList.length; index++) {
            if (vm.countList[index].active !== null && vm.countList[index].sum !== null) {
              vm.countlistmap[vm.countList[index].active] = vm.countList[index].sum;
              vm.activetitle.push(vm.countList[index].active);
            }
          }
          //将键值对形式加到array数组里
          vm.countlistArray.push(vm.countlistmap);
          //将行和列分别赋值给chartdata的行和列
          vm.chartData.rows = vm.countlistArray;
          vm.chartData.columns = vm.activetitle;
        }
      });
    }

  },

  created () {
    this.load();
  }

};
</script>

后端

就像平常一样传过来json格式数组就可以