cahrt框架 ios_iOS开发之使用第三方库iOS-ECharts做柱状图的心得

最近的项目里面用到了饼图和条形统计图，饼图用的是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[0].nameEqual(@"水果").dataEqual(@[@"100", @"200", @"-", @"-", @"-"]);

self.option.series[1].nameEqual(@"肉类").data = @[@"-", @"-", @"500", @"-", @"-"].mutableCopy;

self.option.series[2].nameEqual(@"蛋类").data = @[@"-", @"-", @"-", @"300", @"900"].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[0].nameEqual(@"水果").dataEqual(@[@"100", @"200", @"200", @"450", @"870"]);

self.option.series[1].nameEqual(@"肉类").data = @[@"400", @"500", @"500", @"340", @"210"].mutableCopy;

self.option.series[2].nameEqual(@"蛋类").data = @[@"500", @"140", @"320", @"300", @"900"].mutableCopy;

[self.echartsView setOption:self.option];

[self.echartsView loadEcharts];

大的类型依旧不变，stack的值都互不相同，将x轴的数据变成按月来做统计，然后数据不补位，如此便得到了图三的效果，这个是比较容易的，看大神的demo就很容易知道。其他两种就不多说了。都差不多类似了。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之IOS频道！