最近在合作做一个前后端分离项目时,为了测试我写的后端部分获取数据的效果,自己也学了一下 vue 的知识,在获取 json 信息这里也踩了很多坑。
这里列举下我返回的 json 部分信息:
{
"house_basic": [
{
"HOUSE_ID": "00001",
"HOUSE_NAME": "盈翠华庭122A户型",
"HOUSE_AREA": "122",
"HOUSE_STATE": 0,
"HOUSE_SPECIAL": "采光好,南北通透"
},
{
"HOUSE_ID": "00002",
"HOUSE_NAME": "北海中心中间户",
"HOUSE_AREA": "92",
"HOUSE_STATE": 0,
"HOUSE_SPECIAL": "采光好,客厅朝南"
}
]
}
vue 的 script 部分:
<script>
// 基本的script部分框架
import axios from 'axios';
export default {
created() {
axios.get('http://<ip>:9999/vote/api')
.then((res) = > {
console.log(res);
})
}
}
</script>
我们打印一下 res.data
,得到的是:
{
{
"score": [
{
"HOUSE_ID": "00001",
"HOUSE_VOTE": 5,
"HOUSE_NAME": "盈翠华庭122A户型"
},
{
"HOUSE_ID": "00002",
"HOUSE_VOTE": 22,
"HOUSE_NAME": "北海中心中间户"
}
]},
// 略过不重要信息
}
我们再打印 res.data.score
,这才得到了我们想要的数组:
[
{
"HOUSE_ID": "00001",
"HOUSE_VOTE": 5,
"HOUSE_NAME": "盈翠华庭122A户型"
},
{
"HOUSE_ID": "00002",
"HOUSE_VOTE": 22,
"HOUSE_NAME": "北海中心中间户"
}
]
输出其中一条的子条目看看 res.data.score[0].HOUSE_ID
:00001
。
在搞清楚返回的 data 后,就可以来写 script 部分获取,保存数据了。
<template>
<div id='main'></div>
</template>
<script>
// BarChart.vue
import axios from 'axios';
export default {
name: 'barChart',
methods :{
initChart() {
var echarts = require('echarts');
let myChart = echarts.init(document.getElementBuId('main'));
// 这里需要一个id为main的空div标签,注意,必须是空标签
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
}
},
xAxis: {
type: 'category',
name: 'id', //x轴的名称
data: this.idData,
},
yAxis: {
type: 'value',
name: 'vote',
// data: this.voteData,
// y轴好像不放data也没多大影响
},
series: [{
data: this.voteData,
type: 'bar',
}]
}
myChart.setOption(option); // 设置图标样式
}
},
created() {
// 这里拿投票数接口来举例
axios.get('http://<ip>:9999/vote/api')
.then((res) => {
this.idData = [];
this.voteData = [];
if (res.status == 200) {
let temp = res.data.score;
for (let i in temp) {
this.idData.push(temp[i].HOUSE_ID);
this.voteData.push(temp[i].HOUSE_VOTE);
}
}
this.initChart();
})
},
mounted() {
this.initChart();
}
}
</script>