接口测试平台代码实现番外：主页改版-6
本节我们来实现下那三个饼形图的后台逻辑，不过我这里只做其中一个的，其他俩个留着日后再用。
也就是用户的 资源占平台总的比。资源暂时定为项目数比 接口数比 用例数 。
这里大家可以自行设计，本教程只演示如何实现这个流程。
首先我们打开Home.html：
我们需要想办法 给这三个饼 写上注释。
1.给css文件修改下，继续变小。留出位置给文字。
2. Home.html中上移，准备把文字写在下面：
现在的效果如下了：
我们准备在红圈内写上相关文案。
Home.html中的代码如下：
效果如下：
我们现在要做的去后台，搞定这个{{ ziyuan }}的具体数即可：
打开views.py 找到child_json：
对上节的代码进行修改，参数化了个人的几个数量值 减少计算次数。
# 个人数据看板
count_project = len(user_projects)
count_api = sum([ len(DB_apis.objects.filter(project_id=i.id)) for i in user_projects])
count_case = sum([len(DB_cases.objects.filter(project_id=i.id)) for i in user_projects] )
ziyuan_all = len(DB_project.objects.all())+len(DB_apis.objects.all())+len(DB_cases.objects.all())
ziyuan_user = count_project+count_api+count_case
ziyuan = ziyuan_user/ziyuan_all *100
new_res = {
"count_project":count_project ,
"count_api": count_api,
"count_case": count_case,
"count_report": '',
"ziyuan":ziyuan,
}重启服务刷新页面后效果如下：
这个60%就是我的资源占比。
接下来是榜一大哥提供的一个额外功能，就是根据这个百分比数值来显示不同的文案.....
首先修改css文件中的大小，默认的3px太小，改成4px:
然后找到我们的js文件：
添加如下三句inner_text:
然后刷新页面 可以看到 效果：
到这里 这个小功能算是结束了
下节课我们继续去设计主页的功能，欢迎关注。
看看现在首页的样子，是不是步入正轨了呢？
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-02-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
腾讯云 BI
腾讯云 BI（Business Intelligence，BI）提供从数据源接入、数据建模到数据可视化分析全流程的BI能力，帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计，使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程，并支持报表的分享、推送等企业协作场景。
腾讯云开发者
