使用第三方库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的地址，（里面我也没写啥注释，哈哈，基本的属性还是得看文档和自己实践才能印象深刻）

转载于:https://www.cnblogs.com/BigKingBlog/p/9268656.html

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

jsp用Echarts做柱状图
jsp用Echarts做扇形图(静态) 注:本文主要讲述静态数据如果想要动态获取数据可以使用ajax获取数据赋值给data中value即可第一步:去echarts官方下载最新的js; 官方地址 : ...
iOS 开发的非常有用第三方库
ios中那些好用的第三方库 ios 里面有很多很多好用的第三方框架,有许多是项目中必用的,本文主要来写一些常用的ios第三方库的使用 (一)Masonry Masonry是一个轻量级的布局框架拥有自 ...
python三方库打包项目中_python项目生成及导入依赖的第三方库
mac下的应用程序发布及打包(Python写的脚本,可打包第三方库) 其实这个问题在网上能搜到大把的解决方案.大家的统一答案都是 otool -L yourapp.app/Contents/Mac ...
jsp用Echarts做扇形图
jsp用Echarts做柱状图(静态) 注:本文主要讲述静态数据如果想要动态获取数据可以使用ajax获取数据赋值给data中value即可第一步:去echarts官方下载最新的js; 官方地址 : ...
iOS 常用第三方库及插件
//菜单切换 https://github.com/pujiaxin33/JXCategoryView //各种导航栏样式 https://github.com/rickytan/RTRootNavi ...
iOS之常用第三方库的介绍
因为iOS SDK相对比较底层,所以开发者就得受累多做一些体力活.不过幸运的是,有很多第三方的类库可以用来简化很多不必要的工作. (1)AFNetworking 目前比较推荐的iOS网络请求组件,默认 ...
iOS常用第三方库大全，史上最全第三方库收集
下拉刷新 EGOTableViewPullRefresh – 最早的下拉刷新控件. SVPullToRefresh – 下拉刷新控件. MJRefresh – 仅需一行代码就可以为UITableVie ...
IOS常用第三方库《转》
UI 动画网络相关 Model 其他数据库缓存处理 PDF 图像浏览及处理摄像照相视频音频处理响应式框架消息相关版本新API的Demo 代码安全与密码测试及调试 AppleWatch ...
iOS 开发第三方库全集
下拉刷新 EGOTableViewPullRefresh – 最早的下拉刷新控件. SVPullToRefresh – 下拉刷新控件. MJRefresh – 仅需一行代码就可以为UITableVie ...
iOS实用的600个第三方库秒搜藏
图像: 1.图片浏览控件MWPhotoBrowser 实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网络下载图片并进行缓存.可对图片进行缩放 ...

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

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

最新文章

热门文章