使用vue构建一个可视化大数据平台

本文涉及的产品
云原生大数据计算服务MaxCompute,500CU*H 100GB 3个月
简介: 使用vue构建一个可视化大数据平台

使用vue全家桶以及v-charts和datav实现一个github可视化大数据界面展示,没有设计搞的原因,只能忽略设计编写一下界面,

  • 用户只需要登录的时候填写自己github用户名。就可以看到数据展示
  • 在登录的时候,可能会存在登录失败,可能造成的原因是网络不稳定,
  • 最终界面展示效果

在这里插入图片描述

功能实现

-  用户登录以及个人信息展示
-  粉丝数量以及粉丝展示
-  仓库 Stars 详情
-  仓库语言详情

接口数据

  • 在这个项目中所需要用到的接口,其实github提供的接口不值这些,如果想访问更多接口的话,地址传送门:https://developer.github.com/v3查询多有的API接口

    • 请求个人信息接口 https://api.github.com/users/用户名
  • 请求粉丝接口 https://api.github.com/users/用户名/followers
  • 仓库信息 https://api.github.com/users/用户名/repos

    • 这个接口里面包含个人仓库所有信息
  • 包含提交信息 https://api.github.com/users/用户名/events

登录页面设计

  • 在登录页面中,对input做一下校验,不能为空,并封装了一个弹出框,通过弹出框,点击确定触发接口请求数据

在这里插入图片描述

  • 表单提交完之后,点击确定,用户输入完用户名之后,就会跳转到首页
  • 其中userName就是用户要输入的用户名,
onLogin () {
      this.$axios
        .get(`https://api.github.com/users/${this.userName}`)
        .then(res => {
          const { data } = res;
          sessionStorage.setItem("userkey", data.login);
          localStorage.setItem("userkey", data.login);
          this.$router.push({
            name: "Home",
            query: { user: data.login }
          });
        });
    }
  • 登录成功之后,把用户名存储到sessionStorage,方便在首页的时候用到

首页效果

  • 当一进到首页的时候,会有一个加载效果,知道数据加载完成。
  • 从页面当中,把页面分为左中右三个部分
左边数据展示
  • 在左边的内容中展示的主要是自己gitub中开源仓库数量,个人粉丝以及跟随效果
仓库数据展示

在这里插入图片描述

  • 在这个有分为上下两部分
  • 在上面可以看到个人仓库点赞数量,以及仓库所需要的语言
  • 仓库Starts中,需要对数据进行处理,后台给我们返回的不是我们想要的格式,需要自己手动处理,按照插件需要的格式进行显示,因为这里我们只需要用到仓库名称点赞量
  • 在这里插入图片描述
getStats () {
      this.$axios.get(`https://api.github.com/users/${this.userName}/repos`).then((res) => {
        let data = res.data;
        // 仓库和仓库star 只有star大于0的时候展示
        for (var i = 0; i < data.length; i++) {
          if (data[i].stargazers_count > 0) {
            this.chartDatas.rows.push({
              '名称': data[i].name,
              'star数量': data[i].stargazers_count
            })
          }
        }
    }
  • 在这个table表格中展示的效果

在这里插入图片描述
在datav提供的数据格式为

export default {
  header: ['列1', '列2', '列3'],
  data: [
    ['行1列1', '行1列2', '行1列3'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3']
  ]
}

需要我们处理成他们那样,从接口中,获取到需要的数据,遍历循环,在接口中需要拿到用户名

getEvents () {
      this.$axios.get(`https://api.github.com/users/${this.userName}/events`).then(res => {
        let { data } = res;
        let dataAry = [];
        if (data) {
          for (let i = 0; i < data.length; i++) {
            let date = data[i].created_at.split('T')[0]
            if (data[i].payload.commits) {
              data[i].payload.commits.forEach(ele => {
                dataAry.push([date, data[i].type, data[i].repo.name, ele.message])
              })
            }
          }
        }

        this.config = {
          header: ['操作时间', '类型', '操作的仓库', '备注'],
          data: dataAry
        }
      })
    }
右边个人数据展示
  • 其实在右边数据展示,没有太多复杂行,从接口读取数据,直接渲染就行了

在这里插入图片描述
https://api.github.com/users/用户名请求接口就可以拿到了

  • 个人粉丝

在这里插入图片描述
通过接口数据userName登录用户名,就可以拿到个人所有粉丝,一开始我就下让展示9个,剩下的需要点击查看更多会把所有的粉丝都列举出来

getFans () {
      // 获取粉丝
      this.$axios.get(`https://api.github.com/users/${this.userName}/followers`).then((res) => {
        let { data } = res
        if (data.length > 0) {
          this.fans = data
        }
      })
    },

最后

到这里所有的工作都已接近尾声,剩下的就是在优化优化细节,项目已经上传到github源码仓库,需要的可以取github下载,如果感觉可以的话,求Star一下,一次鼓励

相关实践学习
基于MaxCompute的热门话题分析
Apsara Clouder大数据专项技能认证配套课程:基于MaxCompute的热门话题分析
目录
相关文章
|
2月前
|
机器学习/深度学习 算法 大数据
构建数据中台,为什么“湖仓一体”成了大厂标配?
在大数据时代,数据湖与数据仓库各具优势,但单一架构难以应对复杂业务需求。湖仓一体通过融合数据湖的灵活性与数据仓的规范性,实现数据分层治理、统一调度,既能承载海量多源数据,又能支撑高效分析决策,成为企业构建数据中台、推动智能化转型的关键路径。
|
5月前
|
SQL 分布式计算 大数据
大数据新视界 --大数据大厂之Hive与大数据融合:构建强大数据仓库实战指南
本文深入介绍 Hive 与大数据融合构建强大数据仓库的实战指南。涵盖 Hive 简介、优势、安装配置、数据处理、性能优化及安全管理等内容,并通过互联网广告和物流行业案例分析,展示其实际应用。具有专业性、可操作性和参考价值。
大数据新视界 --大数据大厂之Hive与大数据融合:构建强大数据仓库实战指南
|
2月前
|
存储 供应链 数据可视化
Java 大视界 -- 基于 Java 的大数据可视化在企业供应链风险预警与决策支持中的应用(204)
本篇文章探讨了基于 Java 的大数据可视化技术在企业供应链风险预警与决策支持中的深度应用。文章系统介绍了从数据采集、存储、处理到可视化呈现的完整技术方案,结合供应链风险预警与决策支持的实际案例,展示了 Java 大数据技术如何助力企业实现高效、智能的供应链管理。
|
3月前
|
存储 数据采集 数据可视化
Java 大视界 -- 基于 Java 的大数据可视化在城市交通拥堵溯源与治理策略展示中的应用(191)
本项目探索了基于Java的大数据可视化技术在城市交通拥堵溯源与治理策略中的应用。通过整合多源交通数据,利用Java生态中的大数据处理与可视化工具,构建了交通拥堵分析模型,并实现了拥堵成因的直观展示与治理效果的可视化评估。该方案为城市交通管理提供了科学、高效的决策支持,助力智慧城市建设。
|
3月前
|
存储 SQL 分布式计算
MaxCompute x 聚水潭:基于近实时数仓解决方案构建统一增全量一体化数据链路
聚水潭作为中国领先的电商SaaS ERP服务商,致力于为88,400+客户提供全链路数字化解决方案。其核心ERP产品助力企业实现数据驱动的智能决策。为应对业务扩展带来的数据处理挑战,聚水潭采用MaxCompute近实时数仓Delta Table方案,有效提升数据新鲜度和计算效率,提效比例超200%,资源消耗显著降低。未来,聚水潭将进一步优化数据链路,结合MaxQA实现实时分析,赋能商家快速响应市场变化。
138 0
|
4月前
|
存储 数据采集 数据可视化
Java 大视界 -- 基于 Java 的大数据可视化在城市地下管网管理与风险预警中的应用(275)
本文系统阐述 Java 与大数据可视化技术在城市地下管网管理中的应用,涵盖数据采集、三维建模、风险预警及性能优化,结合真实案例提供可落地的技术方案。
|
数据可视化 Java 大数据
Java 大视界 -- 基于 Java 的大数据可视化在城市规划决策支持中的交互设计与应用案例(164)
本文围绕基于 Java 的大数据可视化在城市规划决策支持中的应用展开,分析决策支持现状与挑战,阐述技术应用方法,结合实际案例和代码,提供实操性强的技术方案。
|
8月前
|
存储 分布式计算 物联网
美的楼宇科技基于阿里云 EMR Serverless Spark 构建 LakeHouse 湖仓数据平台
美的楼宇科技基于阿里云 EMR Serverless Spark 建设 IoT 数据平台,实现了数据与 AI 技术的有效融合,解决了美的楼宇科技设备数据量庞大且持续增长、数据半结构化、数据价值缺乏深度挖掘的痛点问题。并结合 EMR Serverless StarRocks 搭建了 Lakehouse 平台,最终实现不同场景下整体性能提升50%以上,同时综合成本下降30%。
611 58
|
6月前
|
数据采集 数据可视化 数据挖掘
基于Python的App流量大数据分析与可视化方案
基于Python的App流量大数据分析与可视化方案

热门文章

最新文章

  • 1
    人工智能平台PAI产品使用合集之如何在odps上启动独立的任务
    185
  • 2
    DataWorks操作报错合集之出现报错“odps-0123055:用户脚本异常-Traceback(最后一次调用)”,如何解决
    431
  • 3
    人工智能平台PAI操作报错合集之在ODPS的xxx_dev项目空间调用easyrec训练,需要访问yyy项目空间的OSS,出现报错,是什么导致的
    139
  • 4
    MaxCompute操作报错合集之创建oss外部表时出现了报错:"Semantic analysis exception - external table checking failure, error message:,该怎么办
    413
  • 5
    MaxCompute操作报错合集之在本地用tunnel命令上传excel表格到mc遇到报错: tunnel upload C:\Users***\Desktop\a.xlsx mc里的非分区表名 -s false;该怎么办
    169
  • 6
    DataWorks操作报错合集之数据源同步时,使用脚本模式采集mysql数据到odps中,使用querySql方式采集数据,在脚本中删除了Reader中的column,但是datax还是报错OriginalConfPretreatmentUtil - 您的配置有误。如何解决
    379
  • 7
    MaxCompute操作报错合集之通过UDF调用异常(其他使用http调用正常)。报错:java.lang.NoSuchMethodError:是什么导致的
    178
  • 8
    MaxCompute操作报错合集之查询外部表insert到内部表报错,两表字段一致,是什么原因
    163
  • 9
    MaxCompute操作报错合集之出现报错:invalid dynamic partition value: \ufffd\ufffd\ufffd\ufffd\ufffd\ufffd是什么原因
    369
  • 10
    MaxCompute产品使用合集之如何设置每次返回超过10000行记录
    191