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

最近在合作做一个前 后端 分离项目时，为了测试我写的后端部分获取数据的效果，自己也学了一下 vue 的知识，在获取 JSON 信息这里也踩了很多坑。

这里列举下我返回的 json 部分信息：

{
  "house_basic": [
    {
      "HOUSE_ID": "00001",
      "HOUSE_N am E": "盈翠华庭122A户型",
      "HOUSE_AREA": "122",
      "HOUSE_ stat E": 0,
      "HOUSE_S PE CIAL": "采光好，南北通透"
    },
    {
      "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='m ai n'></div>
</template>
<script>
// B Arch art.vue
import axios f rom  'axios';
e xp ort default {
    name: 'barChart',
    methods :{
        in IT Chart() {
             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();
        })
    },
     mount ed() {
        this.initChart();
    }
}
</script>

到此这篇关于Vue+echart 展示后端获取的数据实现的 文章 就介绍到这了,更多相关Vue echart 展示后端数据内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: vue3 ts编写echart是tooltip无法展示的解决 Vue ECharts实现机舱座位选择展示功能代码详解 Vue联动Echarts实现数据大屏展示 vue echarts实现柱状图动态展示 基于vue+echarts数据可视化大屏展示的实现 vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能 Vue中使用Echarts仪表盘展示实时数据的实现 基于vue+echarts 数据可视化大屏展示的方法示例

总结

以上是 为你收集整理的 Vue+echart 展示后端获取的数据实现 全部内容，希望文章能够帮你解决 Vue+echart 展示后端获取的数据实现 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue+echart 展示后端获取的数据实现的详细内容...