这里列举下我返回的 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>