使用第三方库iOS-ECharts做柱状图的心得

最近的项目里面用到了饼图和条形统计图，饼图用的是PNChart来做的，这个库感觉用起来也简单，但是做条形统计图的时候就特别蛋疼（不知道是不是我姿势没对），反正就是各种问题，然后就想到换一种框架，最后选定了iOS-ECharts，ECharts是百度团队开发的。iOS-ECharts是Pluto Y封装的，蛋疼的是一句注释都没有，要对照着百度的文档来看，这个框架的效果倒是牛皮哄哄的，第一次加载会有点慢，要等一下，还有就是在配置PYOption的时候，属性特别的多，不管是用block还是创建对象来设置都看着比较多，没办法，还是得一个一个的设置好。我自己单独又封装了一遍，用起来变得稍微简单一些了。至少看着没那么大一堆的东西在那放着。不吐槽了。先看下demo的效果吧（只做了4个条形图哦）

暂时就做了这四种样式，感觉比较常用的，还有更复杂的要求的，可以参考Pluto Y写的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就很容易知道。其他两种就不多说了。都差不多类似了。之前网上找来找去都是一篇文章，然后放弃了，最后加了他们的群也没给我整明白，还是得靠自己，反复的看demo终于让我找到了这个问题所在。在此基础上还可以做更多灵活的变通。希望可以帮到跟我遇到一样问题的盆友。

最后附上我这个的地址，（里面我也没写啥注释，哈哈，基本的属性还是得看文档和自己实践才能印象深刻）