综合技术

拿来即用——报表画图(饼图,速率图,表格图,柱状图)

微信扫一扫,分享到朋友圈

拿来即用——报表画图(饼图,速率图,表格图,柱状图)
0

前言

因为项目需求,需要画一些报表图。如果项目中涉及到布局复杂,数据多变,动效堆积的页面,一般都是推荐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的封装,还为了日后上层捉摸不透的想法而产生的改动。

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

阅读原文...


微信扫一扫,分享到朋友圈

拿来即用——报表画图(饼图,速率图,表格图,柱状图)
0

CocoaChina

走心母亲节营销,原来都藏着这两样秘密武器!

上一篇

融资致死,欠钱不还,你不要再忽悠我了!

下一篇

评论已经被关闭。

插入图片

热门分类

拿来即用——报表画图(饼图,速率图,表格图,柱状图)

长按储存图像,分享给朋友