数据工厂平台-8：首页统计功能

数据工厂平台-8：首页统计功能

2024-11-04 03:05 浏览:117

本节课我们继续优化首页【注意！想简单请直接跳转到第13章内容】

数据工厂平台-8：首页统计功能

注意我们当前做的平台是数据构造平台，既然是数据，那么首页我们要弄成什么样呢？最好就是各种统计图那种吧，看着还高大上~

但是我们不能为了统计而统计，好看不如实用，所以我们还是要先思考下，我们首页的第一个统计图：【各个工具的使用次数统计】

也就是说，我们的平台不止会有一个工具，而是可以任意添加无限多个工具的状态。

当然，每个工具被使用的时候，我们都要在统计表中记录好它被使用的次数，这样才能更加刺激其他同学在平台上创造数据构造小工具。

目前的设计主要会有四大模块：

所以我们来引入一个简单的统计图组件：

我依然是在JQ之家中找到的，地址如下：

http://www.htmleaf.com/Demo/20141101353.html

下载后解压，并移动到项目内的static文件夹下：

我打开它的index.html，这是它的例子，我们现在直接从中拿走我们需要的三部分，放在我们的home.html中即可。

具体三分部：

注意，如果是外链则不用修改，就是http开头的则不用。

好了具体需要拿走的部分在此html的部分如下：

移动到home.html中

看看效果：

可以看到，已经成功进去了，但是貌似位置比较靠左上，所以我们可以给他位置稍微移动下，并且好像柱子有点粗。我们稍微调一下：

调节的方法很简单，有俩条思路：

现在开始动手，我先给它位置往右侧移动了一点：

见效很快。

然后前端打开调试，在element内，选中这个柱子，就可以看到它的一切样式了。（点那个小箭头，然后选具体柱子，右侧就可以看到样式了）

看到样式后，我们就可以直接动手在右侧修改样式，这里修改后可以直接预览的效果，直至修改满意后，如下：

注意，改成之后，实际上并没有让它真的生效，你还需要去真正的这个css文件内修改这里成现在的样子才行，那么怎么找呢？鼠标放在右侧文案，就可以弹出它的位置和行数了，

截图无法截取到这个浮出的，大家自行实验即可。

然后我去这个文件内找到，并修改：

这时候，你刷新页面才发现这个修改才能永久化的成功。

同理，在对该文件的第203行:的 width进行修改

对187行的width进行修改：

效果如下：

可以看到已经成功瘦身，但是他们间距还是比较大的，所以我们再去搞定这个间距和其他美化：

还是刚这个CSS文件，第6行的函数：修改旗下margin 为10px 0 0 10px

继续优化：

修改第167行：

好，再看看效果：

这样就很紧凑了哈。

顶部的这些按钮也都暂时保留，可以点击切换样式和不同的统计图的，动画效果也很nice