数据工厂平台11：首页收尾

我在这里给大家继续更新下数据工厂章节。

接着来做这个首页的收尾部分。按照上节课的结尾,我们需要进行新导入组件的三个本地化配置。

1. 调整大小位置样式等

2. 尝试解决或绕过console报错

3. 数据生效

别嫌麻烦，想肆意的设计，想做出各种各样随心所欲的ui 就是要经历这些麻烦，否则都用现成框架比如element，bootstrap，那么做出的东西永远的千篇一律，毫无新意，甚至复杂点的交互就完全不知道怎么做了。

这里想起了一句话：

【吃的苦中苦 方为人上人】 其实应该反过来说，是成为人上人的过程一定是很艰苦的。而不是说你吃了苦就一定能成为人上人，所以选对方法，选对路线很重要，基础技术也很重要。

所以我们先对这个扇形图进行大小和位置的调整。

先看看目前的样子：

很显然不太正常，我们先给它 缩小，然后移动。记住一定要先调整大小，再移动。

修改的方法之前章节已经讲过，这里不再赘述，基本就是找到这些控件的原始的前端宽度 高度等，然后去对应的js文件中修改：

这里给大家直接说修改的各处结果吧：

1. 外圈大小：home_tj.html顶部的 css里，页面15，16行，width和height修改成100px

1. 指针长短：home_tj.html顶部的css里，页面第91行，95行，把height修改成30px，把top修改成-30px

1. 缩小间距，间距是由于每个扇图的宽度所撑，所以要修改的其实是扇形图的div母体的宽度。 每个扇形图都用了bootstrap3的 固定样式 col-md-3，这个太大了，我们改成2号 ：col-md-2。4个图全都改好如下：

4. 位置调整，直接在他们的母体div 内增加style属性，外上边距50px

好的，调整到了这里，我们来看效果图：

怎么样，是不是觉得还可以。然后我们想在它们各自的下面插入文案，来告诉这个扇形图是统计什么的，但是很明显下面空间不够了。所以我们干脆把顶部标题：欢迎访问首页 给干掉，这样就可以余留出大片高度了。这个标题放在这很难看，早晚都要移动走的。

回到home.html，删掉

现在效果：

可以看到已经空出来大片高度，我们现在可以考虑加上统计图的说明文案了，因为在原始的第三方组件中，作者并没有给加上文案，所以这里我们要自己进行二次补丁开发。

我的办法很简单，在每个扇形图的div内，内部的最下面空间，塞入一个div，div设置样式为居中，外上边距5px，夹着文案即可：

效果图：

好了。这样他们的外观基本搞定了。

接下来我们去看看有没有console报错，按理说，不会有，但是也很有可能会有些问题，因我们调换了文件位置，所以难免漏掉一下资源文件的路径忘记修改导致404的问题，然后看一下修复成本高不高，影响大不大即可。

现在就发现了俩个：

虽然目前我们并没有感受到这俩个报错影响到什么，但是总归摆在这里不好看，所以时间足够的话，还是解决下比较好。

经排查，是这个组件文件最底部的 js 引入 报错，所以删除掉这两行引入即可

现在报错问题解决了：

那么我们还剩最后一个 也就是最难的问题，即如何让数据生效？

这个问题老实话说，我有把握，但是现在还不知道怎么做，这是正常的，因为没人知道这个组件原作者是怎么想的，或许他只是为了吸引我们下载，把样式做的很漂亮，但是并没有提供可以直接控制图形数据的js方法入口。这四个扇形图的角度效果 也大概率试试写死在顶部的css样式中了。所以要怎么去控制这些，就需要我们自己去动手改造，这个对js的要求水平极高。

大家跟住我的思路，不要打滑~

1.先确定修改文案数据，是否可以影响图像角度变化

把最后一个改成了15%结果发现指针图像依然朝着原来85%的角度去了。

事情开始朝着不利于我们的方向进展了。

2.检查页面有无可以直接操控的js函数

页面底部发现一个js函数，但是经过我简单阅读，发现这只是文案的变化函数，也就是你写个15% ，它的动画效果会从0%一直飞速增长到15%，对指针图像角度来说 并无影响。斗大的汗珠开始从博主额头滚下~

3.检查顶部css，找到影响指针图像角度的代码部分

经过排查，发现顶部针对这四个图都有具体的样式设计，而且每个扇形图都分为外圈和内指针俩个角度影响的部分，外圈图像分别指向 loading-1 / 2/ 3 /4

内圈指针分别指向 loading - 5/6/7/8

我们来看下 loding-1/2/3/4/5/6/7/8 都是什么玩意。

可以看到，果然如我们所料，是控制着角度。对这个作者感到无语，不过还好，我们有办法控制。

说下我的思路，我们可以写个js函数，来从后端接收数据列表。比如我们这4个统计图，我们从后端拿到数据[85,29,59,13],然后通过计算，得出角度。

具体角度方法， i / 100 * 360 即角度。然后通过jq/js ，强行更改这个loading-的样式内容数据，即可达到效果。

(所以我说大家学好js，这是万能的，一般测开工程师，很少有人研究前端研究到这个地步，不过这也做出的平台效果也会完爆那些千篇一律的内部平台了。)

具体怎么实现，下节课分享。