玩转AppCude应用魔方之商业报表大屏进行展示【AppCube X WeLink双剑合璧】

举报
龙哥手记 发表于 2022/03/19 00:49:25 2022/03/19
【摘要】 活动作品

【摘要】本文详细解析玩转AppCude应用魔方实战知识,通过其中AppCude可视化大屏动态展示报表知识,希望你也能自己动手做下,相信你能够很熟练在公司展示你独特的魅力,说不定能勾搭下你身边爱慕的她。

1

👨‍💻 说在前面

假如你对基础还模棱两可,没有关系我现在还能给你隆重介绍下这么牛皮低代码构建平台,不需要任何任何编程基础,不需要任何需熟练任何语言与框架。当然基本的En必须晓得,高中3500单词差不多,总之一句话还不懂看我第一篇瞧瞧

https://bbs.huaweicloud.cn/blogs/336565,

里面对一些容易忽略问题说下,还带你做下脚本实验,有啥用?用了之后能实现自动数据导入模板就是非常爽,相信我手把手教你完成你坑定,不是肯定能完成。

作为一名反复被社恐折磨的卑微打工人,最讨厌的是在全同事面前搞一个月报总结汇报,平时代码出现bug也不少为什么还要做这个业务相关的,没办法这个总和俺绩效挂钩,就会影响工资条奖金,跟你说千万不要跟钱过不去啊,对不对还是忍一忍,建议我推荐使用这种AppCude应用魔方的大屏总结汇报,显逼格显专业更显你的态度,你可能说没有大屏这个把你工位电脑拿上,投在PPT也是可以。本文是一篇基础性文件,将带你实现下流程,读者也可以和自己兴趣搭配,玩转AppCudey应用,快上车啊!

文件目录:

  • 一 AppCude简介
  • 二 创建应用
  • 三 创建页面及核心编辑介绍
  • 四 报表图谱展示
  • 五 柱状图展示
  • 六 水位图展示
  • 七 地图展示
  • 八 AppCude总结下

一. 🐼 AppCude简介

它是华为云为行业客户、合作伙伴、开发者量身打造的一款低码应用开发平台,通过AppCube可轻松构建专业级应用,创新随心所欲,敏捷超乎想象。AppCube 应用魔方是以应用为中心的开发平台。应用开发者可以在 AppCube 开发界面上,通过拖拉拽的方式,并配合少量编码,迅速创建及开发的定制APP。目前,免费供大家使用,有需要课程作业或应用展示的读者不妨试试。

  • 官方地址:https://www.huaweicloud.cn/product/appcube.html
    1
    AppCube可以轻松构建应用,提供丰富的轻应用模板,包括办公管理、人事管理、项目管理、运营推广、培训赋能等领域,开发者可基于模板快速构建应用,加速企业数字化。其优势如下:
  • 丰富的应用模板:预置多领域的应用模板,开箱即用
  • 高效页面编排:丰富的UI组件库,易用的拖拽式页面构建体验
  • 极简流程配置:极简式流程编排,流程配置百变随心
  • 多屏融合:支持Web版和Mobile版本,一次开发,多屏使用
    2

二. 🧢 创建应用

玩转AppCube应用魔方之可视化大屏动态展示你的博客知识 | 【玩转应用魔方】
eastmount 发表于 2021/11/14 21:56:40 5.7k+ 2 3
【摘要】 本文详细介绍玩转AppCube应用魔方基础知识,通过AppCube可视化大屏动态展示博客知识,希望对您有所帮助。
AppCube应用魔方是华为云推出的轻松构建专业级应用,读者可以随心所欲创新构建自己的应用,其集成了高效易用的低代码aPaaS平台,强大的可视化技数据分析能力能够帮助初学者迅速实现所需功能,非常适合初学做。

作为一名编程技术分享者,十年来写了很多文章,文章主题各式各样,也积累了一定的阅读量和读者。那么,如何高效迅速的构建一个应用直观地展示我们的博客分享知识呢?毕竟每一篇文章都是我们分享者的心血,都是我们的知识结晶。这里非常推荐AppCube应用魔方,本文是一篇基础性文章,将带领大家简单搭建一个AppCube的应用,并实现作者“Eastmount”博客的大屏可视化呈现,读者也可以结合自己的兴趣,玩转AppCube应用。Let’s go!!!

文章目录:

一.AppCube简介
二.创建应用
三.创建页面及核心编辑描述
四.办公报表图谱展示
五.柱状图展示博客按月发布量
六.水位图展示博客读者比例
七.地图展示博客区域分布情况
八.AppCube总结
一.AppCube简介
应用魔方 AppCube是华为云为行业客户、合作伙伴、开发者量身打造的一款低码应用开发平台,通过AppCube可轻松构建专业级应用,创新随心所欲,敏捷超乎想象。AppCube 应用魔方是以应用为中心的开发平台。应用开发者可以在AppCube 开发界面上,通过拖拉拽的方式,并配合少量编码,迅速创建及开发的定制APP。目前,免费供大家使用,有需要课程作业或应用展示的读者不妨试试。

  • 官方地址:https://www.huaweicloud.cn/product/appcube.html
    AppCube可以轻松构建应用,提供丰富的轻应用模板,包括办公管理、人事管理、项目管理、运营推广、培训赋能等领域,开发者可基于模板快速构建应用,加速企业数字化。其优势如下:
  • 丰富的应用模板:预置多领域的应用模板,开箱即用
  • 高效页面编排:丰富的UI组件库,易用的拖拽式页面构建体验
  • 极简流程配置:极简式流程编排,流程配置百变随心
  • 多屏融合:支持Web版和Mobile版本,一次开发,多屏使用

二. 🧣 创建应用

华为云官方提供了详细的使用说明,初次使用应用魔方 AppCube的您,如果对AppCube还不太了解,不知道从何处入手,请仔细阅读该入门导读。通过入门导读可帮助您由浅入深的学习AppCube,轻松完成专业级应用的构建。当然,本文会言简意赅地创建第一个应用。


https://www.huaweicloud.com/product/appcube.html

第二步,点击“立即试用”=>“进入开发环境”。
3
第三步,点击“项目”后选择“业务大屏”。
4
第四步,点击“新建项目”并创建项目。

  • 标签:协同办公应用
  • 名称:协同办公
    创建成功后如下图所示,接下来进入项目开发环境,进行后续设置操作。
    5
    创建成功后点击如下图US哦是,接下来进入项目开发环境,进行后面设置操作。

三 🐆.创建页面及核心编辑描述

第一步,点击左侧目录加号新建页面
6
第二步,读者可以选择创建空白页或业务大屏模板,这里我们先不用着急先创建空白页。
7
大屏模板如下图所示:

8
第三步,点击“创建空白页”后输入标题“report”创建。
9
生成如下图所示的页面,接着我们可以进行应用进一步编辑。
11
第四步,在右边的“页面设置”栏目中选择“查看全部”,选择合适的背景图片,。
10
如果你想让你的总结汇报报告花哨,招人看点选择本地图片,如果不是就选老实人的系统预置吧嘿嘿
12
第五步,点击应用标题的下拉菜单可以弹出AppCube的编辑操作栏目,显示如下图所示。包括:
(1)图表功能

  • 图表、媒体、地图、文本、装饰、仪表盘、导航、其他
    13

(2) 媒体功能

  • flv视频、图片、视频、轮播
    14

(3) 地图功能

  • 中国地图、地图
    15

(4) 文本功能

  • LOT监控,LOT命令下发,通用表格,词云,翻牌器等

16

(5) 装饰功能

  • 文字装饰、底纹、分割线、步骤线、边框装饰、矩形装饰
    17
    (6) 仪表盘功能
    18

四 🌾.办公报表图谱展示

第一步,添加通用表格和词云,并设置如下图所示,我们先不忙改数据。
19
设置JSON对象的自定义内容,需选择静态数据,进行输入预览最后进行保存;
20
**第二步,然后是点击词云控件选择“数据”,并设置位置与右上角。
22
进入后设置“桥接器连接”,选择静态数据,刷新周期不变,然后预览后最后进行修改保存
21
作者根据互联网比较熟知词语,以及小伙伴比较关心话题绘制词云如下图所示,这里提取核心关键词及词频数量,并在AppCude中设置

  • 八股文,资金倒挂,公积金,职场PUA,云计算,裁员风波,租房,35岁焦虑

词云可视化Python代码如下:


{
  "resCode": "0",
  "resMsg": "成功",
  "result": [
    {
      "dataValue": [
        {
          "name": "热词词云图",
          "value": [
            {
              "value": 1200,
              "name": "打工人"
            },
            {
              "value": 1000,
              "name": "职场PUA"
            },
            {
              "value": 900,
              "name": "狼性文化"
            },
            {
              "value": 950,
              "name": "996"
            },
            {
              "value": 760,
              "name": "35岁焦虑"
            },
            {
              "value": 640,
              "name": "裁员风波"
            },
            {
              "value": 555,
              "name": "低代码"
            },
            {
              "value": 560,
              "name": "云计算"
            },
            {
              "value": 510,
              "name": "408"
            },
            {
              "value": 410,
              "name": "八股文"
            },
            {
              "value": 310,
              "name": "资金倒挂"
            },
            {
              "value": 200,
              "name": "租房"
            },
            {
              "value": 110,
              "name": "公积金"
            }
          ]
        }
      ]
    }
  ]
}

最终显示如下图所示
23
第三步,我们设置业绩占比反映当月的完成情况,先在所有组件里点击“实心圆饼图”,然后选择桥接器设置,然后把桥接器数据类型设置为静态数据,然后设置如下JSON数据源,在右侧预览后进行保存,刷新周还是为0,表示下:
27
JSON数据源所示:


{
  "dataValue": [
    {
      "name": "业绩占比",
      "value": [
        {
          "value": 335,
          "name": "解决bug数"
        },
        {
        "value": [
          {
          "value":430,
          "name":"提交的问题",
        },
        {
          "value": 150,
          "name": "任务",
        }
      ]
    }
  ]
}
  ]
}

最终效果展示如图所示:
26

第四步设置本月Github提交次数的折线柱状图,目的想让同事们看下有没有偷懒,还有想其他研发小伙伴共同监督好完成下个月得到需求工作,提高效率啊争取周末不加班就可以完成,先找到图标中折线柱状图,如下所示:
30
当然需要你自己本月的具体提交情况来决定是否下个月的分配需求,然后先设置下宽与高的比例首先你得先解锁;然后点击数据,在数据配置选静态数据,然后更具自己提交情况输入,最后是在确认后在进行保存;
32

输入JSON数据源


{
  "dataX": [
    "星期天",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
  ],
  "dataValue": [
    {
      "title": "单日总提交次数",
      "value": [
        311,
        465,
        927,
        630,
        659,
        800,
        500
      ]
    },
    {
      "title": "平均单日提交数",
      "value": [
        36,
        26,
        46,
        32,
        42,
        36,
        30
      ]
    }
  ]
}

第五步设置下报表装饰,让它更现在比起来要美观好多,怎么办,我们选择“边框装饰”,然后点击配置,接着解锁宽高比选择适合你自己的报表宽高,并且还能设置,更多操作设置层级,最好设置到最后一层,然后最后一定要把层级进行锁定哦;28
29
第六步是我们的最后一步就是给我们各个表格图形,设置一个比较舒服的文字,需要给设置每日业绩统计表,还有饼状图,词云分布图以及提交次数趋势图,需要设置不同的字体颜色,还有不同边距特效等;
34
我们为了假如后面在工作中还能用到,只是更改其中的数据即可,还有具体的自己工作总结,选择发布页面模板如下。
35
如果说你还是不满足的话,平台也是能支持资源扩展,你还可以在项目设置里面新建资源,这里详细名称,它对应库标识,作者与描述来进行操作与删除动作更加丰富,最后保存。
36

最后效果展示:
https://appcube.cn-north-4.huaweicloud.cn/magno/render/DV534f17f72da8e5d_0000000000regIyykBZA/page3

感恩能与大家在华为云遇见!
希望能与大家一起在华为云社区共同成长。【玩转应用魔方】有奖征文火热进行中:https://bbs.huaweicloud.cn/blogs/306271

(By:龙哥手记 Eastmount 2022-3-16 夜于成都)

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。