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>