Vue+echart 展示後端獲取的資料

JaydenChang發表於2023-01-17
Vue後端

最近在合作做一個前後端分離專案時，為了測試我寫的後端部分獲取資料的效果，自己也學了一下 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>

相關文章