产品需求设计稿：
刚看到这个设计稿，就开始想怎么去实现这个分数表盘，所以先抛出几点需要实现的技术点：
1. 文字对应的弧线位置（文字或根据中间表芯倾斜）
2.注意表盘上的刻度，并不均匀（几种状态等分180deg，但是刻度数值不等分）
3.下方的数值对应当前表盘的状态（颜色，数值，当前指数类型，倾斜状态）
现在抛出问题，大家看到这个这需求后，头脑中觉得有哪些方式，比较好去实现当前表盘的功能？
大家可以先头脑风暴一下，如果现在的你，第一眼看到这个设计搞，你们会怎么去解决？
常见的解决方式，为了加快项目的开发进度，大家可能会按照一下解决方式依次尝试（排序方式可能会根据个人能力不同，出现不同的优先级或者其他选项，以下我就列举几种比较常见的解决方法）
-
直接用搜索引擎 百*，goog* ，搜索下，网上有没有相同案例的需求，如果能直接拿过来用，当然是最省开发成本的（缺点例子的demo可能不一定找得到）
-
使用过图表框架的同学可能脑海中现在会想到，看看echarts或则hightcharts里面的仪表盘，能不能个性化定制下，自定义成现在需求的样子和功能（已附上链接，大家可以查找下相对应框架的api） echarts :
hightcharts :
- 能力稍微强点的同学，可能更有兴趣直接手动去实现这个功能（不去借助于图表框架）
以上基本是大多数同学处理问题的解决方式（也并非绝对），我也是初略的查了对应图表框架的api后，从2直接过渡到3（如果直接能使用方法2的话，可能会更加节省开发成本）
先看看实现的效果：
下面会详细讲解需求的个人实现过程，有不同见解或者更好的处理方式的同学，欢迎私信，一起学习交流：
拆分表盘
仔细看的同学会发现，表盘上包括了
- 外则文字
- 颜色表框
- 阴影表面
- 数字刻度 下面是依次实现步骤：
1.样式部分布局
- 文字，颜色表框实现：通过几个不同的矩形，调整角度，拼接成办个表盘
- 表盘内侧灰色半圆实现：
- 表盘指针和表盘圆心：指针和圆心居中，旋转当前透明矩形来实现指针移动
2.表盘数据模型
3.html文本模型
- 遍历当前表盘数据模型
- 渲染单个数据模型对应的样式
- 圆心和指针的定位
4.获取当前分数的颜色
- 从数据模型筛选出当前分数对应的颜色
5.计算指针偏移角度
- 1.找到当前分数对应的区间：例如 scoreNum = 30 应该在数据 25-46 表盘刻度这个区间
- 2.由于半个表盘是五等分，所以一个色块的角度是36deg
- 3.判断指针在这个表盘区间内（25-46）的偏移量百分比 应该就是（30-25)/(46-25)
- 4.实际指针偏移角度 = 色块区间个数角度 + 区间内百分比角度
以上就是具体实现的步骤，需要源码的胖友可以私信，如果胖友们有更好的解决思路，欢迎私信或者在评论区讨论，期待你们的分享~
