欢迎关注
最酷最in的云资讯

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

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

前言

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

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

1.ECharts都是swift语言写的,而项目采用的是OC,语言不统一,代码强迫症不能忍

2.ECharts提供的样式非常多,很大部分项目中都用不到,导致很多代码无用

3.为了代码稳定性,能不用第三方就不用第三方

4.改动量多,学习成本大

5.懒

所以就产生了这个玩意:

demo


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

image.png

它们分别是:

饼图(速率图)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) 打赏
未经允许不得转载:云微资讯 » 拿来即用——报表画图(饼图,速率图,表格图,柱状图)
分享到: 更多 (0)

云微资讯 科技新媒体资讯平台

关于我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏