最近的项目里面用到了饼图和条形统计图,饼图用的是PNChart来做的,这个库感觉用起来也简单,但是做条形统计图的时候就特别蛋疼(不知道是不是我姿势没对),反正就是各种问题,然后就想到换一种框架,最后选定了iOS-ECharts,ECharts是百度团队开发的。iOS-ECharts是Pluto Y封装的,蛋疼的是一句注释都没有,要对照着百度的文档来看,这个框架的效果倒是牛皮哄哄的,第一次加载会有点慢,要等一下,还有就是在配置PYOption的时候,属性特别的多,不管是用block还是创建对象来设置都看着比较多,没办法,还是得一个一个的设置好。我自己单独又封装了一遍,用起来变得稍微简单一些了。至少看着没那么大一堆的东西在那放着。不吐槽了。先看下demo的效果吧(只做了4个条形图哦)
暂时就做了这四种样式,感觉比较常用的,还有更复杂的要求的,可以参考Pluto Y写的Demo,demo链接在此,各个参数的参考手册在此
最后一张图是我要用到的效果,看着挺简单的,绕了我好久才知道怎么做。原因是忽略了一个属性,在PYCartesianSeries里面有个属性是stack,这个属性是用来做堆积图的,就好像图二这种,当你添加了多个series的时候,并且把stack值设置成一致,就会堆积起来,如果不一致就会变成图三,变成类似于分组的展示,当然这些bar的宽度都是可调的,还能放大缩小(暂时没做这个功能,可以参考大神demo),然后就是颜色的问题,在配置PYOption的时候,这个东西里面有一个color,类型为id,实际就是传一个数组就好了,每种颜色对应一个类别legend.data,当颜色个数没类别多时就会循环利用颜色值。调用代码如下:
self.option = [XBZPYOptionManager configOptionWithStack:@[@"common", @"common", @"common"]];
self.option.color = @[@"#FF0000", @"#00FF00", @"#0000FF"];
self.option.legend.data = @[@"水果", @"肉类", @"蛋类"].mutableCopy;
self.option.xAxis.firstObject.data = @[@"苹果", @"香蕉", @"鸡肉", @"鸭蛋", @"恐龙蛋"].mutableCopy;
self.option.series[].nameEqual(@"水果").dataEqual(@[@"", @"", @"-", @"-", @"-"]);
self.option.series[].nameEqual(@"肉类").data = @[@"-", @"-", @"", @"-", @"-"].mutableCopy;
self.option.series[].nameEqual(@"蛋类").data = @[@"-", @"-", @"-", @"", @""].mutableCopy; [self.echartsView setOption:self.option];
[self.echartsView loadEcharts];
XBZPYOptionManager这个类是我自己封装了一遍(里面预先设置了一些通用的属性,后面就根据不同的要求修改数据源就好了),根据传入的stack个数来创建相应个数的series,也就是类别legend对应的数据源设置类,我将他们的stack都设置成一致,然后不同类别的
数据都使用@"-"进行补位,本来应该叠加到一起的三种柱状图就此变成了一种(机智如我),然后就实现了图四的样子,再来看看stack不同的时候:
self.option = [XBZPYOptionManager configOptionWithStack:@[@"one", @"two", @"three"]];
self.option.color = @[@"#AA0000", @"#00AA00", @"#0000AA"];
self.option.legend.data = @[@"水果", @"肉类", @"蛋类"].mutableCopy;
self.option.xAxis.firstObject.data = @[@"一月份", @"二月份", @"三月份", @"四月份", @"五月份"].mutableCopy;
self.option.series[].nameEqual(@"水果").dataEqual(@[@"", @"", @"", @"", @""]);
self.option.series[].nameEqual(@"肉类").data = @[@"", @"", @"", @"", @""].mutableCopy;
self.option.series[].nameEqual(@"蛋类").data = @[@"", @"", @"", @"", @""].mutableCopy; [self.echartsView setOption:self.option];
[self.echartsView loadEcharts];
大的类型依旧不变,stack的值都互不相同,将x轴的数据变成按月来做统计,然后数据不补位,如此便得到了图三的效果,这个是比较容易的,看大神的demo就很容易知道。其他两种就不多说了。都差不多类似了。之前网上找来找去都是一篇文章,然后放弃了,最后加了他们的群也没给我整明白,还是得靠自己,反复的看demo终于让我找到了这个问题所在。在此基础上还可以做更多灵活的变通。希望可以帮到跟我遇到一样问题的盆友。
最后附上我这个demo的地址,(里面我也没写啥注释,哈哈,基本的属性还是得看文档和自己实践才能印象深刻)