拿来即用——报表画图（饼图，速率图，表格图，柱状图）

前言

因为项目需求，需要画一些报表图。如果项目中涉及到布局复杂，数据多变，动效堆积的页面，一般都是推荐H5来写。我一开始是拒绝这个需求的，但是人微言轻，我的腰包并不足以支撑我顶风尿三丈这股魄力。

然后就在网上找相关的第三方，比如熟知的iOS-ECharts。但是最终没有采用，主要原因就是：

1.ECharts都是swift语言写的，而项目采用的是OC，语言不统一，代码强迫症不能忍
2.ECharts提供的样式非常多，很大部分项目中都用不到，导致很多代码无用
3.为了代码稳定性，能不用第三方就不用第三方
4.改动量多，学习成本大
5.懒

所以就产生了这个玩意：

demo

大家只需要导入下面这个文件夹就好了：

它们分别是：

饼图(速率图)0

饼图(速率图)1

表格图

单柱图

双柱图

使用非常简单，我们就拿最简单的饼图(速率图)说说吧。

- (void)initTLChartRateView0{
    
    self.rateView = [TLChartRateView new];
    self.rateView.frame = CGRectMake((TLDeviceWidth -RateViewWidth)/2, 150 +NavBarHeight, RateViewWidth, RateViewHeight);
    [self.view addSubview:self.rateView];
}

你看是不是非常简单。

考虑到每个人项目情况不一样，所以很多UI属性我一开始就设置为公开的，扩展性强，同时添加了注释方便大家修改。同样我们拿最简单的饼图(速率图)说说吧。

@property (nonatomic, assign) CGFloat        needleRadius;//针头的半径
@property (nonatomic, strong) UIColor       *needleColor;//针的颜色

@property (nonatomic, assign) CGFloat        lineWidth;//底部虚线宽度
@property (nonatomic, strong) UIColor       *lineColor;//底部虚线颜色

@property (nonatomic, copy  ) NSString      *title;//title数据
@property (nonatomic, assign) CGFloat        titleFont;//title字号
@property (nonatomic, strong) UIColor       *titleColor;//title字色

@property (nonatomic, assign) CGFloat        arcWidth;//环形宽度
@property (nonatomic, copy  ) NSString      *arcData;//环形比例数据
@property (nonatomic, strong) UIColor       *arcColor0;//环形色
@property (nonatomic, strong) UIColor       *arcColor1;//环形默认色

@property (nonatomic, strong) NSArray       *defaultTextArr;//环形里面数据
@property (nonatomic, assign) CGFloat        defaultTextFont;//环形里面字号
@property (nonatomic, strong) UIColor       *defaultTextColor;//环形里面字色

哇，真的很简单呢。

而且调用reloadData方法还可以刷新数据，另外还给表格，柱状图添加了点击事件，详情可以下载demo看看代码。

大家可能不理解为什么我要写两个饼图(速率图)，你们观察最上面的GIF就知道第一个没有动画，第二个是有的。

为什么会这样呢？

因为第一个饼图(速率图)我只创建了一个图层CALayer，所有的画线都在这一个图层处理的，这样会导致创建/刷新时候动画的种类，复杂度，酷炫程度都会大打折扣。而第二个饼图(速率图)我则进行了优化，创建一个容器图层，上面再渲染其他的图层，我们在做动画处理的时候只需要在相应的图层上添加动画就行了。

如果对于动画部分，需要进一步了解其中的差别，还可以看看表格图和单柱图。这两个也是在一个图层上面进行了所有的画线处理，但他们的动画采用了取巧的方式。总之，要么为了美观而增加代码量，要么就像个直男一样简单干脆。

当然，我个人推荐是饼图(速率图)1这种方式的，不光光是为了动效，还为了图层CALayer的封装，还为了日后上层捉摸不透的想法而产生的改动。

如果大家有什么疑问或者能帮忙改进的地方，欢迎评论。