本节课我们继续优化首页【注意！想简单请直接跳转到第13章内容】
注意我们当前做的平台是数据构造平台，既然是数据，那么首页我们要弄成什么样呢？ 最好就是 各种统计图 那种吧，看着还高大上~
但是我们不能为了统计而统计，好看不如实用，所以我们还是要先思考下，我们首页的第一个统计图： 【各个工具的使用次数统计】
也就是说，我们的平台不止会有一个工具，而是可以任意添加无限多个工具的状态。
当然，每个工具被使用的时候，我们都要在统计表中记录好它被使用的次数，这样才能更加刺激其他同学在平台上创造数据构造小工具。
目前的设计主要会有四大模块：
- 大型数据工具 模块，此模块负责构造过程非常复杂且繁多，需要调用各种支撑服务的超大数据构造。
- 小工具类模块，此模块负责较小的脚本、数据构造、小工具等的模块。
- 设置管理模块，包括平台的各种设置，架构等等。
- 首页统计模块，方便使用者对当前整体有个概念 和力量展示。
所以我们来引入一个简单的统计图组件：
我依然是在JQ之家中找到的，地址如下：
http://www.htmleaf.com/Demo/20141101353.html
下载后解压，并移动到项目内的static文件夹下：
我打开 它的index.html， 这是它的例子，我们现在直接从中 拿走我们需要的 三部分，放在我们的home.html中即可。
具体三分部：
- 顶部JS/CSS等静态文件，这个移动后要修改路径:/static开头
- 中部元素标签，也就是具体的部分，如果有路径的也要修改成/static开头
3.结尾的script等js/css 代码，如果没有则忽略，同样需要修改路径成/static开头
注意，如果是外链则不用修改，就是http开头的则不用。
好了具体需要拿走的部分在此html的部分如下：
移动到home.html中
看看效果：
可以看到，已经成功进去了，但是貌似位置 比较靠左上，所以我们可以给他位置稍微移动下，并且 好像柱子有点粗。我们稍微调一下：
调节的方法很简单，有俩条思路：
- 直接给它加上外部style，更改样式，不过这种很可能失效或者引起 它已经引用的class的冲突。
- 直接修改它引用的内部class样式。
现在开始动手，我先给它位置往右侧移动了一点：
见效很快。
然后前端打开调试，在element内，选中这个柱子，就可以看到它的一切样式了。（点那个小箭头，然后选具体柱子，右侧就可以看到样式了）
看到样式后，我们就可以直接动手在右侧修改样式，这里修改后可以直接预览的效果，直至修改满意后，如下：
注意，改成之后，实际上并没有让它真的生效，你还需要去真正的这个css文件内修改这里成现在的样子才行，那么怎么找呢？鼠标放在右侧文案，就可以弹出它的位置和行数了，
截图无法截取到这个浮出的，大家自行实验即可。
然后我去 这个文件内找到，并修改：
这时候，你刷新页面才发现 这个修改才能永久化的成功。
同理，在对该文件的第203行:的 width进行修改
对187行的width进行修改：
效果如下：
可以看到已经成功瘦身，但是他们间距还是比较大的，所以我们再去搞定这个间距和其他美化：
还是刚这个CSS文件，第6行的函数：修改旗下margin 为10px 0 0 10px
继续优化：
修改第167行：
好，再看看效果：
顶部的这些按钮 也都暂时保留，可以点击切换样式和 不同的统计图的，动画效果也很nice
好本节内容到此结束，大家是不是一下就会了去借鉴网上的第三方样式组件了呢？
下节课我们用vue和该统计图连接起来，控制它的展示数据等等。
