玩转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小时内删除侵权内容。
相关文章推荐
立即开启你的数字化管理
用心为每一位用户提供专业的数字化解决方案及业务咨询