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 部分：

我们打印一下 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 部分获取，保存数据了。