欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-05-28 12:38:11
最近的项目里面用到了饼图和条形统计图,饼图用的是PNChart来做的,这个库感觉用起来也简单,但是做条形统计图的时候就特别蛋疼(不知道是不是我姿势没对),反正就是各种问题,然后就想到换一种框架,最后选定了iOS-ECharts,ECharts是百度团队开发的。iOS-ECharts是Pluto Y封 ......

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

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

暂时就做了这四种样式,感觉比较常用的,还有更复杂的要求的,可以参考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终于让我找到了这个问题所在。在此基础上还可以做更多灵活的变通。希望可以帮到跟我遇到一样问题的盆友。

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