我要评论最近在合作做一个前后端分离项目时，为了测试我写的后端部分获取数据的效果，自己也学了一下 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>到此这篇关于vue+echart 展示后端获取的数据实现的文章就介绍到这了,更多相关vue echart 展示后端数据内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论