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

{
  "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": "采光好，客厅朝南"
    }
  ]
}

<script>
// 基本的script部分框架
import axios from 'axios';
export default {
    created() {
        axios.get('http://<ip>:9999/vote/api')
        .then((res) = > {
            console.log(res);
        })
    }
}
</script>    

{
    {
        "score": [
        {
            "HOUSE_ID": "00001",
            "HOUSE_VOTE": 5,
            "HOUSE_NAME": "盈翠华庭122A户型"
        },
        {
            "HOUSE_ID": "00002",
            "HOUSE_VOTE": 22,
            "HOUSE_NAME": "北海中心中间户"
        }
    ]}，
    // 略过不重要信息
}

[
    {
      "HOUSE_ID": "00001",
      "HOUSE_VOTE": 5,
      "HOUSE_NAME": "盈翠华庭122A户型"
    },
    {
      "HOUSE_ID": "00002",
      "HOUSE_VOTE": 22,
      "HOUSE_NAME": "北海中心中间户"
    }
]

<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>