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_ID00001

在搞清楚返回的 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>
本文转载于网络 如有侵权请联系删除

相关文章

  • lucene.net 应用资料

    Lucene.Net系列一本文介绍了什么是Lucene,Lucene能做什么.如何从一个文件夹下的所有txt文件中查找特定的词?本文将围绕该个实例介绍了lucene.net的索引的建立以及如何针对索引进行搜索.最后还将给出源代码供大家学习.源代码下载What’sLucene Lucene是一个信息检索的函数库(Library),利用它你可以为你的应用加上索引和搜索的功能.Lucene的使用者不需要深入了解有关全文检索的知识,仅仅学会使用库中的一个类,你就为你的应用实现全文检索的功能.不过千万别以为Lucene是一个象google那样的搜索引擎,Lucene甚至不是一个应用程序,它仅仅是一个工具,一个Library.你也可以把它理解为一个将索引,搜索功能封装的很好的一套简单易用的API.利用这套API你可以做很多有关搜索的事情,而且很方便.WhatCanLuceneDoLucene可以对任何的数据做索引和搜索.Lucene不管数据源是什么格式,只要它能被转化为文字的形式,就可以被Lucene所分析利用.也就是说不管是MSword,Html,pdf还是其他什么形式的文件只要你可以从中抽取出

  • 【TcaplusDB知识库】TcaplusDB查看进程状态介绍

    【TcaplusDB知识库】TcaplusDB查看进程状态介绍命令:Check...其中,...指进程的进程id,比如1.2.2.2,1.2.1.2等,也支持简单的正则表达式,比如Check1.2.2.*,那么只要匹配到1.2.2的进程id都会输出当前进程存活状态;同时还支持输出一台机器上的所有进程存活状态,如下图所示:https://tcaplusdb-img-1301716906.cos.ap-nanjing.myqcloud.com/image/3301.jpg)更多信息请关注TcaplusDB微信公众号,风里雨里,我们一直在等你!TcaplusDB是腾讯出品的分布式NoSQL数据库,存储和调度的代码完全自研。具备缓存+落地融合架构、PB级存储、毫秒级时延、无损水平扩展和复杂数据结构等特性。同时具备丰富的生态、便捷的迁移、极低的运维成本和五个九高可用等特点。客户覆盖游戏、互联网、政务、金融、制造和物联网等领域。

  • 模式识别工具箱安装及使用

    模式识别工具箱是学习模式识别基本原理、灵活应用既有的模式识别方法、开发研制新的识别方法、提高学生分析和解决问题能力的一个良好平台。本文采用的模式识别工具箱是由EladYom-Tov,HilitSerby和DavidG.Storka等人开发的。 掌握安装模式识别工具箱的技巧,能熟练使用工具箱中的各项功能;熟练使用最小错误率贝叶斯决策器对样本分类;熟练使用感知准则对样本分类;熟练使用最小平方误差准则对样本分类;了解近邻法的分类过程,了解参数K值对分类性能的影响;了解不同的特征提取方法对分类性能的影响。 1安装模式识别工具箱首先将工具箱文件拷贝至指定文件夹里,然后在MATLAB环境下将该文件夹设置成“currentdirectory”(即当前文件夹);最后在MATLAB命令行状态下,键入Classifier并按回车键;则可得到如图1-2示主界面。在该主界面上,可以装入样本文件(见界面“Filename”处),可以选择特征提取方式(见界面“preprocessing”处),可以选择不同的模式识别方法(见界面“algorithms”处),识别结果(识别错误率)显示在界面“classificati

  • Android实现动态添加标签及其点击事件

    在做Android开发的时候,会遇到动态添加标签让用户选择的功能,所以自己写了个例子,运行效果图如下。标签可以左右滑动进行选择,点击的时候,会弹出toast提示选择或者取消选择了哪个标签。通过动态添加TextView作为标签,并给TextView设置背景,通过selector选择器改变其背景颜色,来确定是否处于选中状态。代码如下所示:1、标签的布局文件,我在标签里只设置了一个TextView<?xmlversion="1.0"encoding="utf-8"? <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" <TextView android:id=

  • Redis持久化详解

    持久化先看下redis的工作流程1、写操作客户端向服务端发送写操作(数据在客户端的内存中)数据库服务端接收到写请求的数据(数据在服务端的内存中)服务端调用write(2)这个系统调用,将数据往磁盘上写(数据在系统内存的缓冲区中)操作系统将缓冲区中的数据转移到磁盘控制器上(数据在磁盘缓存中)磁盘控制器将数据写到磁盘的物理介质中(数据真正落到磁盘上)可知只有当第五步完成以后数据才会写到磁盘上。2、持久化介绍持久化:将数据放到断电后数据不会丢失的设备中,也就是我们通常理解的硬盘上。持久化操作分为两种形式RDB  RDB持久化可以在指定时间间隔内生成数据集的时间点快照AOF  AOF持久化记录服务器执行的所有写操作命令,并在服务器启动时,通过重新执行这些命令来还原数据3、详细介绍RDB优点:RDB是一个非常紧凑的文件,它保存了redis在某个时间点上的数据集,这种文件非常适合用于备份,灾难恢复RDB可以最大化redis的性能,父进程在保存RDB文件时唯一要做的就是fork出一个子进程,然后这个子进程就会处理接下来的所有保存工作,父进程无需执行任何磁盘I/O操作RDB在恢复大数据集时速度比AOF

  • 国标GB28181摄像头直播视频流媒体服务器获取视频流失败问题分析

    国标28181协议全称为GB/T28181《安全防范视频监控联网系统信息传输、交换、控制技术要求》,是由公安部科技信息化局提出,由全国安全防范报警系统标准化技术委员会(SAC/TC100)归口,公安部一所等多家单位共同起草的一部国家标准(以下简称28181)。28181协议在全国平安城市、交通、道路等监控中广泛采用,若想做统一的大监控平台,则支持28181协议接入是必不可少的。如今很多客户都是想在之前使用的28181平台的基础上进行拓展。最近有用户跟我说使用国标流媒体服务器的时候,打算观看视频直播,但是打开却发现获取不到视频流,随即他准备获取RTMP的URl来进行视频播放,但是同样的也没办法正常播放视频。我为客户远程处理的时候,首先考虑了编码格式的问题,目前我们的国标流媒体服务器还没有办法支持H.265编码视频的播放(目前Easy系列中想要播放H.265编码视频可以通过EasyPlayer流媒体播放器来进行二次集成),所以首先要排查一下是否是编码的问题,可以在此处进行修改成H.264编码:如果修改了编码格式,还是不能正常播放视频,就有可能是因为公网Ip的问题,我们就需要到国标流媒体服务

  • 十一:字体文件处理

    在自己的项目中引入中意的字体样式,是让自己舒坦的重要方式:) 源码地址如下:>>>本节课源码>>>所有课程源码0.课程介绍和资料>>>本节课源码>>>所有课程源码本节课的代码目录如下:本节课的package.json内容如下:{ "devDependencies":{ "css-loader":"^1.0.0", "extract-text-webpack-plugin":"^4.0.0-beta.0", "file-loader":"^1.1.11", "style-loader":"^0.21.0", "url-loader":"^1.0.1", "webpack":"^4.16.1" } }复制1.准备字体文件和样式如上面的代码目录所示,字体文件和样式都

  • 意念控制成现实:不开口,不动手,“瘫着”就能打游戏

    十三发自凹非寺 量子位报道|公众号QbitAI懒癌们的终极福音来了!连玩游戏都可以“瘫着”来。这个项目是由一名33岁瘫痪研究人员(NathanCopeland,因15年前的一场车祸)和匹兹堡大学的同事共同合作完成。只要简单“想想”,就能玩《最终幻想14》。他在大脑中植入了4组电极阵列,并通过长期训练,最终完成了“脑子会了手不会”的千古难题。视频自发布以来便得到了大量的关注,外网播放量高达11万多次,点赞数也超过3千。网友惊呼这是他迄今为止见到最酷的东西,还有网友力荐作者联系厂商抓紧生产。不得不说,脑机接口技术再次带来了别样的惊喜。如何用意念玩转《最终幻想14》?Nathan的大脑信号会发送到一台带有键盘模拟器的电脑中,但与此同时,他也做了一些光标的控制。我要通过看电脑来控制我想操纵的东西,像机器人、光标等。当它移动到指定位置后,我会继续考虑接下来将向哪个方向移动。 当我决定好最终的移动方式时,电脑会观察我的哪个神经元被激活,并最终知晓我想要做什么动作。而控制系统往往不需要非常费劲的去做思考。Nathan也表示,若是他的注意力越集中,所控制的角色的表现会越好。 不过,Nathan也承认这

  • Spring源码分析:Spring IOC容器初始化

     概述:Spring对于Java开发来说,以及算得上非常基础并且核心的框架了,在有一定开发经验后,阅读源码能更好的提高我们的编码能力并且让我们对其更加理解。俗话说知己知彼,百战不殆。当你对Spring掌握熟透之后,也就没什么能过阻拦你在开发路上前进了。IOC总体来说有两处地方最重要,一个是创建Bean容器,一个是初始化。在本文中,主要为大家讲解了IOCBean容器创建过程。后续将会补上初始化部分的知识。为了保持文章的严谨性,如果读者发现我哪里说错了请一定不吝指出,非常希望可以听到读者的声音。同时能过纠正自己的误解。本文主要采用了ClassPathXmlApplication作为SpringIOC容器,从ClassPathXmlApplication分析容器创建的过程,首先来看一下ClassPathXmlApplication的依赖关系:首先我们先来观察一下核心主干:我们可以通过对ClassPathXmlApplicationContext的父类名称,了解其主要功能:DefaultResourceLoader:提供获取配置文件方法getResource(),返回资源信息ResourceA

  • 泊松分布和指数分布:10分钟教程

    大学时,我一直觉得统计学很难,还差点挂科。工作以后才发现,难的不是统计学,而是我们的教材写得不好。比起高等数学,统计概念其实容易理解多了。我举一个例子,什么是泊松分布和指数分布?恐怕大多数人都说不清楚。我可以在10分钟内,让你毫不费力地理解这两个概念。一、泊松分布日常生活中,大量事件是有固定频率的。某医院平均每小时出生3个婴儿某公司平均每10分钟接到1个电话某超市平均每天销售4包xx牌奶粉某网站平均每分钟有2次访问它们的特点就是,我们可以预估这些事件的总数,但是没法知道具体的发生时间。已知平均每小时出生3个婴儿,请问下一个小时,会出生几个?有可能一下子出生6个,也有可能一个都不出生。这是我们没法知道的。泊松分布就是描述某段时间内,事件具体的发生概率。上面就是泊松分布的公式。等号的左边,P表示概率,N表示某种函数关系,t表示时间,n表示数量,1小时内出生3个婴儿的概率,就表示为P(N(1)=3)。等号的右边,λ表示事件的频率。接下来两个小时,一个婴儿都不出生的概率是0.25%,基本不可能发生。接下来一个小时,至少出生两个婴儿的概率是80%。泊松分布的图形大概是下面的样子。可以看到,在频率

  • chrome工具分析

      前端开发切图技巧总结 Chrome渲染分析之Timeline工具的使用 Chrome控制台不完全指南 Chrome开发工具Javascript调试技巧 Chrome开发者工具之JavaScript内存分析   Chrome开发者工具不完全指南(一、基础功能篇) Chrome开发者工具不完全指南(二、进阶篇) Chrome开发者工具不完全指南:(三、性能篇) Chrome开发者工具不完全指南(四、性能进阶篇) Chrome开发者工具不完全指南(五、移动篇) Chrome开发者工具不完全指南(六、插件篇)

  • SpringIOC容器-使用注解配置Bean-自动装配

    在Spring注解配置Bean中,如果bean的属性也是一个Bean,那么我们可能就需要用到自动装配了 一般需要在属性上加入 @Autowire @Resource @Inject 3个注解中的任何一个都可以 可以参考: annotation之@Autowired、@Inject、@Resource三者区别 注意:如果自动装配的是一个接口,此接口超过1个实现类,那么我们可能需要用到另外2个注解来表示 @Primary:标识在实现类上,表示优先注入 @Qualifier("指定的bean"):标识在@Autowire后面,表示指定bean注入 可以参考: @Qualifier和@Primary的区别  

  • 解决android模拟器太大,小屏幕无法完全显示的问题

    http://hi.baidu.com/conanx/blog/item/05479befd6534d03fdfa3cbb.html   安装上Android模拟器之后,开启一个Android2.2的模拟器,发现屏幕太大了,模拟器最下面的导航按键根本就显示不出来,还是百度一下,找到了解决的办法如下: 打开Eclipse-->Run-->RunConfiguration...-->Target标签页最下面AdditionalEmulatorCommandLineOptions下面的输入框中输入:-scale0.8   之后点击Apply。 这条命令的意思是把Android的模拟器缩放到80%的大小,你现在就可以点击Run按钮试试看,是不是舒服多了?

  • 找中间素数

    //寻找两个整数之间的所有素数(包括这两个整数),把结果保存在数组bb中,函数返回素数的个数。 //例如,输入6和21,则输出为:711131719。 #include<stdio.h> #include<stdlib.h> #defineN1000 intfun(intn,intm,intbb[N]){ inti,j,k=0,flag; for(j=n;j<=m;j++){ flag=1; for(i=2;i<j;i++) if(j%i==0){ flag=0; break; } if(flag==1) bb[k++]=j; } returnk; } intmain(){ intn=0,m=0,i,k,bb[N]; scanf("%d",&n); scanf("%d",&m); for(i=0;i<m-n;i++) bb[i]=0; k=fun(n,m,bb); for(i=0;i<k;i++) printf("%4d",bb[i]); system("pause"); return0; }复制 &n

  • git&amp;gerrit学习——安装配置

    1.  安装客户端:git(windows版本,MsysGIT)和tortoiseGit 安装Git-2.9.0-64-bit.exe       安装完成之后在“开始”里可以看到如下内容:     2.  生成public-key 在gitbash中执行C:\ProgramFiles(x86)\Get\usr\bin\ssh-keygen.exe-trsa 如下: ssh-keygen-trsa 然后一直enter     然后到目录C:\Users\weiyy\.ssh下打开密钥查看     拷贝id_rsa.pub公钥里的全部内容到浏览器页面的settings里     3.  配置环境 运行以下命令: gitconfig--globaluser.name<your_user_name> gitconfig--globaluser.email<your_email> gitconf

  • 关于树状数组的一些思考

    关于一类问题,给出一个长度为\(n\)的序列,并且\(m\)个查询(无修改) 查询都是在\([l,r]\)的区间中的某一个值 类似CDQ的思想 将所有查询按r排序,r相同的按l排序,可以使一维搞成线性 然后问题就变成了 在一个长度为r的序列中,\([l,r]\)中的值 变量其实只有\(l\)一个,用树状数组(或线段树)第i个位置存第i个位置的答案,查询其实就是查询\(l\) 以上是从[SDOI2009]HH的项链中得到的一些思考 只要有想见的人,就不是孤身一人了。

  • python学习之yummain模块

    定义:`yum`的命令行接口。 yummain.main(args) Runtheyumprogramfromacommandlineinterface. yummain.hotshot(func,*args,**kwargs) Profilethegivenfunctionusingthehotshotprofiler. Parameters: func–thefunctiontoprofile Returns: thereturncodegivenbythehotshotprofiler yummain.cprof(func,*args,**kwargs) Profilethegivenfunctionusingthecprofprofiler. Parameters: func–thefunctiontoprofile Returns: thereturncodegivenbythecprofprofiler yummain.print_stats(stats) PrintoutinformationfromaStatsobject. Paramete

  • JVM-java虚拟机空间模型

      了解JVM,不仅是在面试时增加几率,更是在开发过程进行优化调整时了解内存溢出等,因此需要知道这个是什么东东,有什么卵用?     朋友,看20分钟的呗,了解下?(有木有发传单的赶脚?嘻嘻~~)     正好前段时间看了《深入理解Java虚拟机:JVM高级特性与最佳实践(第2版)》这本书,而且在腾讯课堂听了某位大大的讲解,所以本篇记录下,一是自己了解并笔记,二能帮助他人就更好了。(就是下面这本书...看的自己有点怀疑人生...)      java发展?     学习java的朋友都清楚java的特性,”writeOnce,RunAnywhere”,而支持其此特性最大的一点就是java虚拟机(JVM)。     1. 从1996年Sun公司发布JDK1.0时,其中内置的虚拟机是ClassicVM,它是第一款商用的虚拟机,这款虚拟机只能使用纯解释器方式来执行java代码,每一方法,每一行代码都必须进行编译,编译耗时非常高,这就造成了业界对Java语言运行很慢的印象。但是其可以使用外挂JIT编译器(JustInTime),但此时的即时编译与纯解释编译不可以同

  • Mybatis下@Select注解下使用like模糊查询

    Mybatis下@Select注解使用模糊查询要使用concat方法拼接%百分号和关键词,案例如下: packagecom.xzit.mapper; importcom.xzit.entity.Emp; importorg.apache.ibatis.annotations.*; importjava.util.List; @Mapper publicinterfaceEmpMapper{ /*按给定地址查询员工*/ @Select("select*fromempwhereaddrlikeconcat('%',#{addr},'%')") List<Emp>selectListByAddr(Stringaddr); /*按照给定地址查询员工*/ @Select("select*fromempwhereaddrlikeconcat('%',#{addr},'%')") List<Emp>selectAddr(Stringaddr); }复制 参考文章: https://wenku.baidu.com/view/1ce7023cfc00bed5b9f3f

  • IDMC制造业ERP业务场景测试之一——硅钢片制造业务流程测试

    一、测试地址 硅钢片业务测试数据库地址为:http://www.bonawifi.com,测试数据库名字为SiliconSteelSheet,测试账号:用户名demo,密码demo   二、业务说明 根据客户提供的信息,产品分类及业务过程大致如下:    生产过程中,每种不同规格的窄卷,均由一组窄卷组合在同一母卷开料生成,本部分需要进一步开发,以便实现自动的排料优化组合,和对母卷补货需求的合并操作。 三、测试步骤 1、登陆系统 使用业务测试账号登陆系统后,将看到如下页面,此页面为库存操作仪表板,是整个ERP系统的业务中心:    2、创建销售订单 所有业务的起点从录入销售报价单开始:    点击页面中的销售,打开销售仪表板后,再打开2位置的报价单:    看到报价单列表页面。已经做了一个报价单,第一次测试,打开这个报价单,点击确认销售:    重复测试时,快捷的创建报价单的方法,是直接复制这个报价单:   3、运行调度 根据产品本身特点,设置了成品和开料之后的半成品执

  • 2-18_运动员和教练案例代码实现

    1packageInterfacePlayerAndCoach; 2 3publicabstractclassPerson{ 4privateStringname; 5privateintage; 6 7publicPerson(){ 8} 9 10publicPerson(Stringname,intage){ 11this.name=name; 12this.age=age; 13} 14 15publicStringgetName(){ 16returnname; 17} 18 19publicvoidsetName(Stringname){ 20this.name=name; 21} 22 23publicintgetAge(){ 24returnage; 25} 26 27publicvoidsetAge(intage){ 28this.age=age; 29} 30 31publicabstractvoideat(); 32}复制 packageInterfacePlayerAndCoach; publicabstractclassCoachextendsPerson

相关推荐

推荐阅读