Vue+echart 展示后端获取的数据实现

时间:2023-02-03 JaydenChang 人气:0

最近在合作做一个前后端分离项目时，为了测试我写的后端部分获取数据的效果，自己也学了一下 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>

加载全部内容