前言
前两天,小编总结了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格式数组就可以