vue实现v-chart绑定数据

前言

前两天,小编总结了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: '',//  人员积极程度mapcountlistmap: { '日期': '积极性' },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格式数组就可以

vue实现v-chart绑定数据相关推荐

vue中的v-model绑定数据深层次问题
vue有些赋值方式是非响应式的,页面不会刷新,可以参考下面(百度参考): Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = new ...
ajax绑值,vue.js使用ajax绑定数据之post方法
[HTML] 纯文本查看复制代码发送AJAX请求 window.οnlοad=function(){ new Vue({ el:'#itany', data:{ user:{ name:'alic ...
Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
Vue表格绑定数据、添加数据
数据库字段 Id (主键自增) Name (nvchar 200) Remark(nvchar 200) 视图 <div id="upp"><div>&l ...
【硬核技能】舒工自创bind绑定数据方法，类似angular和vue绑定数据原理
if ($g) {$g.$utils || ($g.$utils = {}); } else {var $g = {};$g.$utils = {}; } /*绑定数据神器*/ $g.$utils.b ...
vue绑定数据之前会看到源代码
http://blog.csdn.net/fengjingyu168/article/details/72915468 VUE绑定数据闪现问题问题描述如下: 1.在HTML中使用Vue为div绑定数 ...
vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
Vue.js render函数的数据双向绑定
在Vue.js render函数中数据双向绑定较为复杂.

vue实现v-chart绑定数据

前言

前端

后端

vue实现v-chart绑定数据相关推荐

最新文章

热门文章