使用第三方庫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就很容易知道。其他兩種就不多說了。都差不多類似了。之前網上找來找去都是一篇文章，然后放棄了，最后加了他們的群也沒給我整明白，還是得靠自己，反復的看demo終於讓我找到了這個問題所在。在此基礎上還可以做更多靈活的變通。希望可以幫到跟我遇到一樣問題的盆友。

最后附上我這個demo的地址，（里面我也沒寫啥注釋，哈哈，基本的屬性還是得看文檔和自己實踐才能印象深刻）