玩转AppCube应用魔方之可视化大屏动态展示你的博客知识 | 【玩转应用魔方】

AppCube应用魔方是华为云推出的轻松构建专业级应用，读者可以随心所欲创新构建自己的应用，其集成了高效易用的低代码aPaaS平台，强大的可视化技数据分析能力能够帮助初学者迅速实现所需功能，非常适合初学做。

文章目录：

一.AppCube简介

二.创建应用

三.创建页面及核心编辑介绍

四.博客文本图谱展示

五.柱状图展示博客按月发布量

六.水位图展示博客读者比例

七.地图展示博客区域分布情况

八.AppCube总结

一.AppCube简介

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

官方地址：https://www.huaweicloud.com/product/appcube.html

AppCube可以轻松构建应用，提供丰富的轻应用模板，包括办公管理、人事管理、项目管理、运营推广、培训赋能等领域，开发者可基于模板快速构建应用，加速企业数字化。其优势如下：

丰富的应用模板：预置多领域的应用模板，开箱即用

高效页面编排：丰富的UI组件库，易用的拖拽式页面构建体验

极简流程配置：极简式流程编排，流程配置百变随心

多屏融合：支持Web版和Mobile版本，一次开发，多屏使用

二.创建应用

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

https://support.huaweicloud.com/qs-appcube/appcube_02_0011.html

第一步，打开AppCube官网，点击“立即使用”按钮进入控制台。

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

第二步，点击“立即试用”=>“进入开发环境”。

第三步，点击“项目”后选择“业务大屏”。

第四步，点击“新建项目”并创建项目。

标签：博客可视化显示应用

名称：show_blog_knowledge

创建成功后如下图所示，接下来进入项目开发环境，进行后续设置操作。

三.创建页面及核心编辑介绍

第一步，点击左侧目录加号新建页面。

第二步，读者可以选择创建空白页或业务大屏模板，这里先创建空白页。

大屏模板如下图所示：

第三步，点击“创建空白页”后输入标题“home”创建。

生成如下图所示的页面，接着我们可以进行应用编辑。

第四步，在右边的“页面设置”栏目中选择“查看全部”，选择合适的背景图片。

如下图所示：

第五步，点击应用标题的下拉菜单可以弹出AppCube的编辑操作栏目，显示如下图所示。包括：

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

(1) 图表功能

饼图、线状图、水位图、柱状图、散点图、雷达图

(2) 媒体功能

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

(3) 地图功能

智慧园区、通用地图

(4) 文本功能

(5) 装饰功能

文字装饰、底纹、分割线、步骤线、边框装饰、矩形装饰

(6) 仪表盘功能

(7) 导航功能

(8) 其它功能

四.博客文本图谱展示

第一步，添加天气控件和文本控件，并设置如下图所示。

设置文本空间为颜色、大小和内容。

天气控件可以右键点击“高级设置”，对其属性进行修改。

第二步，添加“词云”控件，并设置于左上角。

Python、网络安全、人工智能、数据挖掘、图像处理、数据库、实现、详解、C#

词云可视化Python代码如下：

from pyecharts import options as opts from pyecharts.charts import WordCloud from pyecharts.globals import SymbolType # 生成数据 word = [('A',10), ('B',9), ('C',8)] 列表+Tuple words = [] for (k,v) in c.most_common(200): words.append((k,v)) # 渲染图 def wordcloud_base() -> WordCloud: c = ( WordCloud() .add("", words, word_size_range=[20, 40], shape='diamond') #shape=SymbolType.ROUND_RECT .set_global_opts(title_opts=opts.TitleOpts(title='Eastmount十年博客词云图')) ) return c # 生成图 wordcloud_base().render('Eastmount十年博客词云图.html')

第三步，设置词云内容。点击“数据”->“桥接器实例”选择“词云数据桥接器”，然后补充词云内容。

设置内容如下：

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "热词词云图", "value": [ { "value": 1200, "name": "Python" }, { "value": 1000, "name": "网络安全" }, { "value": 900, "name": "人工智能" }, { "value": 950, "name": "数据挖掘" }, { "value": 760, "name": "图像处理" }, { "value": 640, "name": "数据库" }, { "value": 555, "name": "实现" }, { "value": 560, "name": "详解" }, { "value": 510, "name": "Java" }, { "value": 410, "name": "C#" }, { "value": 310, "name": "C++" }, { "value": 200, "name": "算法" }, { "value": 110, "name": "系统" } ] } ] } ] }

最终显示如下图所示:

选中图片右键“高级设置”，补充新图片并添加。

最终显示如下图所示：

网络安全

Python

逆向分析

基础知识或编程技术

五.柱状图展示博客按月发布量

Python代码如下：

# encoding:utf-8 import re import time import csv import pandas as pd import numpy as np import datetime #定义星期函数 def get_week_day(date): week_day_dict = { 0 : '星期一', 1 : '星期二', 2 : '星期三', 3 : '星期四', 4 : '星期五', 5 : '星期六', 6 : '星期天' } day = date.weekday() return week_day_dict[day] #------------------------------------------------------------------------------ #第一步 读取数据 dd = [] #日期 tt = [] #时间 ww = [] #星期 with open("data.csv", "r", encoding="utf8") as csvfile: csv_reader = csv.reader(csvfile) k = 0 for row in csv_reader: if k==0: #跳过标题 k = k + 1 continue #获取数据 2021-04-08 21:52:21 value_date = row[4] value_time = row[5] hour = value_time.split(":")[0] #获取小时 hour = int(hour) month = value_date[:7] #获取月份 dd.append(month) tt.append(hour) #获取星期 date = datetime.datetime.strptime(value_date, '%Y-%m-%d').date() week = get_week_day(date) ww.append(week) #print(date,week) k = k + 1 print(len(tt),len(dd),len(ww)) print(dd) print(tt) print(ww) #------------------------------------------------------------------------------ #第二步 统计不同日期的个数 from collections import Counter cnt = Counter(ww) print(cnt.items()) #dict_items #字典按键排序 list_date = ['星期一','星期二','星期三','星期四','星期五','星期六','星期天'] list_dnum = [0,0,0,0,0,0,0] for key,value in cnt.items(): k = 0 while k

第二步，在AppCube中添加“水平基本柱状图”。

添加数据如下：

{ "dataX": [ "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日" ], "dataValue": [ { "title": "发文总数", "value": [ 98, 92, 95, 85, 77, 64, 87 ] } ] }

最终显示如下图所示：

六.水位图展示博客读者比例

第一步，添加两个水位图，一个用于表示男生比例，一个用于表示学生比例。

第二步，选中水位图右键高级，设置“带标题模板”，设置水波颜色。

第三步，设置数据如下图所示，假设男生占60%，学生占81%。

七.地图展示博客区域分布情况

地图区域分析也是重要的功能，比如微信公众号显示如下图所示。

AppCube提供了非常完美的地图显示功能供大屏形式，具体步骤如下：

第一步，插入地图，选择“中国地图”。

第二步，设置静态数据和高级设置，然后对地图进行布局。

第三步，增加仪表盘，可以设置量、阅读量、文章量等统计。

第四步，增加装饰，比如分割线或者蒙板。

八.AppCube总结

第一步，点击发布按钮。

显示如下图所示：

https://appcube.cn-north-4.huaweicloud.com/magno/render/DVshow_blog_knowledge17d1e1e9bd9_0000000000oez9dES1wG/page1

第二步，点击预览。

最终效果如下图所示：

感恩能与大家在华为云遇见！

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

(By:娜璋之家 Eastmount 2021-11-14 夜于武汉)

应用魔方 AppCube

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除侵权内容。