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

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

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

1

👨‍💻 说在前面

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

https://bbs.huaweicloud.com/blogs/336565，

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

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

文件目录：

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

一. 🐼 AppCude简介

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

  • 官方地址：https://www.huaweicloud.com/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.com/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.com/magno/render/DV534f17f72da8e5d_0000000000regIyykBZA/page3

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

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

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

评论（0）

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

全部回复

上滑加载中

设置昵称

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

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

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

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入