【注意，此章节完全是css的二次开发，理解难度极高，且极易出错，大家可以直接复制本文末尾的源码来跳过此章节】
本节课要承接上节课的内容，继续解决这个扇形统计图的 外层和内指针的角度动画问题：
我们上节课说后端会给一个 含有四个元素的列表来作为求出角度
这个复杂的计算我期望在 后端完成，最后给前端的时候 直接就是 现成的角度。这样我们便可以直接绕过复杂的js，而直接把数据给到 home_tj.html顶部的全局样式中 用{{ }} 来占位替换。
我们回到views.py中，先写好需要的统计数据
- 实际的数据 ，如：
2.计算百分比，我们可以用他们当前数量级的最大数作为分母，来求出百分比
新下页面就可以看到打印结果：
如图，已经成功计算出了角度。
3. 给到前端：
我修改了前端的展示数据样式，不显示百分比，而是实际数据。
注意，是分成了四个变量给过去，每个变量都有实际数据和百分比角度
4. 展示实际数据：
看看效果：
注意看到，他们的实际数据已经展示成功了，并且动画增长依旧给力。
5. 角度变量替换到顶部head中的loading- 各个里
其中2和6是一组，3和7是一组，4和8是一组，5和9是一组
(注意 loading-1 是初始不要碰不要改)
2345管着外圈角度， 6789管着内圈指针
但是实际测试角度和效果的时候，我又发现新的问题！
就是角度并不是那么简单的 显示的。
首先第一个问题
- 内圈指针角度（6、7、8、9） 原作者是分了俩段，即先一半时间到什么角度，全部时间到什么角度。
也就是loading-6 /7/8/9 这些50%的 部分全部删除 即可简单化！
改成后顺便带入我们的变量，6789如下：
然后是第二个 更复杂的问题：
就是外圈的度数，经过测试发现，并不是简单的根据度数增长。而是分为了左右俩部分。
看来是用 俩部分的圆弧 遮挡效果 实现的。
也就是说：loading-1 是控制所有圆环右侧半圆，而laoding-2/3/4/5分别控制左侧半圆。
但是原作者 却把loading-1给写死了180度 ，所以我先要在这里暗自抱怨一下了，这作者完成的手段属实不咋样。 我们的度数不够180的时候，依然会至少有180度在，作者的效果图中也很巧妙的没有截图低于180度的情况。
这里要额外说一下，所有的-webkit-transform: 都可以删掉，暂时不用。
也就是说，整个圆弧是分为 左右俩部分来实现的，我仔细看了下css ，发现的确如此：
以上俩个图，可以不难的发现，作者把右侧部分写死在了公共部分，把左侧部分分别放进了 四段来实现可以定制。
