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

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

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！