Vue+echart?展示后端獲取的數(shù)據(jù)實(shí)現(xiàn)

更新時(shí)間：2023年01月18日 08:23:19 作者：JaydenChang

本文主要介紹了Vue+echart?展示后端獲取的數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近在合作做一個(gè)前后端分離項(xiàng)目時(shí)，為了測試我寫的后端部分獲取數(shù)據(jù)的效果，自己也學(xué)了一下 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，這才得到了我們想要的數(shù)組：

[
    {
      "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 部分獲取，保存數(shù)據(jù)了。

<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'));
            // 這里需要一個(gè)id為main的空div標(biāo)簽，注意，必須是空標(biāo)簽
            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); // 設(shè)置圖標(biāo)樣式
        }
    },
    created() {
        // 這里拿投票數(shù)接口來舉例
        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>

到此這篇關(guān)于Vue+echart 展示后端獲取的數(shù)據(jù)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue echart 展示后端數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: