玩转AppCube应用魔方之可视化大屏动态展示你的博客知识 | 【玩转应用魔方】
AppCube应用魔方是华为云推出的轻松构建专业级应用，读者可以随心所欲创新构建自己的应用，其集成了高效易用的低代码aPaaS平台，强大的可视化技数据分析能力能够帮助初学者迅速实现所需功能，非常适合初学做。
作为一名编程技术分享者，十年来写了很多文章，文章主题各式各样，也积累了一定的阅读量和读者。那么，如何高效迅速的构建一个应用直观地展示我们的博客分享知识呢？毕竟每一篇文章都是我们分享者的心血，都是我们的知识结晶。这里非常推荐AppCube应用魔方，本文是一篇基础性文章，将带领大家简单搭建一个AppCube的应用，并实现作者“Eastmount”博客的大屏可视化呈现，读者也可以结合自己的兴趣，玩转AppCube应用。Let's go!!!
文章目录：
- 一.AppCube简介
- 二.创建应用
- 三.创建页面及核心编辑介绍
- 四.博客文本图谱展示
- 五.柱状图展示博客按月发布量
- 六.水位图展示博客读者比例
- 七.地图展示博客区域分布情况
- 八.AppCube总结
一.AppCube简介
应用魔方 AppCube是华为云为行业客户、合作伙伴、开发者量身打造的一款低码应用开发平台，通过AppCube可轻松构建专业级应用，创新随心所欲，敏捷超乎想象。AppCube 应用魔方是以应用为中心的开发平台。应用开发者可以在AppCube 开发界面上,通过拖拉拽的方式,并配合少量编码,迅速创建及开发的定制APP。目前，免费供大家使用，有需要课程作业或应用展示的读者不妨试试。
AppCube可以轻松构建应用，提供丰富的轻应用模板，包括办公管理、人事管理、项目管理、运营推广、培训赋能等领域，开发者可基于模板快速构建应用，加速企业数字化。其优势如下：
- 丰富的应用模板：预置多领域的应用模板，开箱即用
- 高效页面编排：丰富的UI组件库，易用的拖拽式页面构建体验
- 极简流程配置：极简式流程编排，流程配置百变随心
- 多屏融合：支持Web版和Mobile版本，一次开发，多屏使用
二.创建应用
华为云官方提供了详细的使用说明，初次使用应用魔方 AppCube的您，如果对AppCube还不太了解，不知道从何处入手，请仔细阅读该入门导读。通过入门导读可帮助您由浅入深的学习AppCube，轻松完成专业级应用的构建。当然，本文会言简意赅地创建第一个应用。
第一步，打开AppCube官网，点击“立即使用”按钮进入控制台。
https://www.huaweicloud.com/product/appcube.html第二步，点击“立即试用”=>“进入开发环境”。
第三步，点击“项目”后选择“业务大屏”。
第四步，点击“新建项目”并创建项目。
- 标签：博客可视化显示应用
- 名称：show_blog_knowledge
创建成功后如下图所示，接下来进入项目开发环境，进行后续设置操作。
三.创建页面及核心编辑介绍
第一步，点击左侧目录加号新建页面。
第二步，读者可以选择创建空白页或业务大屏模板，这里先创建空白页。
大屏模板如下图所示：
第三步，点击“创建空白页”后输入标题“home”创建。
生成如下图所示的页面，接着我们可以进行应用编辑。
第四步，在右边的“页面设置”栏目中选择“查看全部”，选择合适的背景图片。
如下图所示：
第五步，点击应用标题的下拉菜单可以弹出AppCube的编辑操作栏目，显示如下图所示。包括：
- 图表、媒体、地图、文本、装饰、仪表盘、导航、其他
(1) 图表功能
- 饼图、线状图、水位图、柱状图、散点图、雷达图
(2) 媒体功能
- flv视频、图片、视频、轮播
(3) 地图功能
- 智慧园区、通用地图
(4) 文本功能
(5) 装饰功能
- 文字装饰、底纹、分割线、步骤线、边框装饰、矩形装饰
(6) 仪表盘功能
(7) 导航功能
(8) 其它功能
四.博客文本图谱展示
第一步，添加天气控件和文本控件，并设置如下图所示。
设置文本空间为颜色、大小和内容。
天气控件可以右键点击“高级设置”，对其属性进行修改。
第二步，添加“词云”控件，并设置于左上角。
作者之前提取十年分享的600多篇博客标题，通过PyEcharts绘制词云图如下图所示。这里提取核心关键词及词频数量，并在AppCube中设置。
- 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": "系统"
}
]
}
]
}
]
}最终显示如下图所示:
第四步，将Gephi绘制的博客关键词关系图谱添加至AppCube应用中，表示作者博客分享的主题分布情况及关系紧密度。点击“媒体”=>“图片”即可。
选中图片右键“高级设置”，补充新图片并添加。
最终显示如下图所示：
社交网络分析常用于引文分析，文科领域有的称为文献知识图谱（和Google提出的知识图谱或本体有区别），它也是文献挖掘领域常用的技术手段。这里我们绘制社交网络关系图谱如下所示，主要利用Gephi软件，也推荐Neo4j或D3。可以看到作者十年的分享主要集中在四块内容，它们又相互联系，相辅相成。
- 网络安全
- Python
- 逆向分析
- 基础知识或编程技术
五.柱状图展示博客按月发布量
第一步，统计作者按星期发布博客的数量，通过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<len(list_date):
if key==list_date[k]:
list_dnum[k] = value
break
k = k + 1
print(list_date,list_dnum)
#------------------------------------------------------------------------------
#第三步 PyEcharts绘制柱状图
from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.charts import Line
from pyecharts.commons.utils import JsCode
bar=(
Bar()
.add_xaxis(list_date)
.add_yaxis("数量", list_dnum, color='pink')
.set_global_opts(title_opts=opts.TitleOpts(
title="Eastmount博客按星期分布", subtitle="week"))
)
bar.render('Eastmount博客按星期分布.html')第二步，在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 夜于武汉)
- 点赞
- 收藏
- 关注作者
评论（0）