脚本宝典收集整理的这篇文章主要介绍了Vue+echart 展示后端获取的数据实现，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
最近在合作做一个前后端分离项目时，为了测试我写的后端部分获取数据的效果，自己也学了一下 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 展示后端数据内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的Vue+echart 展示后端获取的数据实现全部内容，希望文章能够帮你解决Vue+echart 展示后端获取的数据实现所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。