上个项目中涉及到股票之类的折线图柱状图饼图等图表类的展示,因为时间紧迫,就没来得及多去研究,找了几个demo用了一下,
始终没有时间去过多的研究,最近接手的一个项目又使用到了柱状图图表,需要正负柱状图,
查看了多个柱状图的demo,都是各种bug和不合适,在使用该demo的同时还要去修复bug,
太头疼了,无奈选择了难研究的百度Echarts,接下来说下简单的入坑
[iOS-Echarts]demo下载 : https://github.com/Pluto-Y/iOS-Echarts
ECharts官网 : http://echarts.baidu.com/echarts2/index.html
1.使用cocoapods导入项目
pod 'iOS-Echarts’
2.导入成功之后,导入头文件
#import "iOS-Echarts.h"
3.使用图表
-(void)showBar
{
//坐标值
_xValues = [NSMutableArray arrayWithArray:@[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月"@"7月",@"8月",@"9月",@"10月",@"11月",@"12月"]];
_yValues = [NSMutableArray arrayWithArray:@[@"1",@"200",@"333",@"444",@"999",@"44",@"-22",@"300",@"9",@"-222",@"-888",@"2000"]];
//项目中因为需要Y坐标根据内容自适应,所以,取了Y轴的最大值作为y轴的宽度
CGFloat maxWidth = 0;
for (int i = 0; i < _yValues.count; i ++) {
NSString *str = _yValues[i];
CGFloat width = [self widthForTitle:str];
if (width > maxWidth) {
maxWidth = width;
}
}
PYOption *option = [[PYOption alloc] init];
/** 直角坐标系内绘图网格, 说明见下图 */
PYGrid *grid = [[PYGrid alloc] init];
// 左上角位置
grid.x = @(maxWidth);
grid.y = @(30);
// 右下角位置
grid.x2 = @(20);
grid.y2 = @(100);
grid.borderWidth = @(0);
// 添加到图标选择中
option.grid = grid;
//柱状图颜色(暂时还未找到设置正负柱状图颜色不同的方法,回头再研究一下)
option.color = @[@"#E40082"];
/** X轴设置 */
PYAxis *xAxis = [[PYAxis alloc] init];
//横轴默认为类目型(就是坐标自己设置)
xAxis.type = @"category";
// 起始和结束两端空白
xAxis.boundaryGap = @(YES);
// 分隔线
xAxis.splitLine.show = YES;
xAxis.splitLine.onGap = YES;//设置为YES柱状图在格子中间,为NO的话坐标线在柱状图的中间,可自行设置一下看效果(前提是xAxis.splitLine.show 设置为YES)
// 坐标轴线
xAxis.axisLine.show = YES;
// X轴坐标数据
xAxis.data = _xValues;
// 坐标轴小标记
xAxis.axisTick = [[PYAxisTick alloc] init];
xAxis.axisTick.show = NO;
// 添加到图标选择中
option.xAxis = [[NSMutableArray alloc] initWithObjects:xAxis, nil];
/** Y轴设置 */
PYAxis *yAxis = [[PYAxis alloc] init];
yAxis.axisLine.show = YES;
// 纵轴默认为数值型(就是坐标系统生成), 改为 @"category" 会有问题, 读者可以自行尝试
yAxis.type = @"value";
// 分割段数，默认为5
yAxis.splitNumber = @5;
// 分割线类型
// yAxis.splitLine.lineStyle.type = @"dashed"; //'solid' | 'dotted' | 'dashed' 虚线类型
//单位设置, 设置最大值, 最小值
// yAxis.axisLabel.formatter = @"{value} k";
// yAxis.max = @1000;
// yAxis.min = @-100;
// 添加到图标选择中 ( y轴更多设置, 自行查看官方文档)
option.yAxis = [[NSMutableArray alloc] initWithObjects:yAxis, nil];
NSMutableArray *seriesArr = [NSMutableArray array];
/** 第一条数据设置 */
PYCartesianSeries *series1 = [[PYCartesianSeries alloc] init];
series1.barWidth = @15;
// 类型为柱状图 如果要改为折线图 可将bar改为line等等,多种类型
series1.type = @"bar";
// 坐标点大小
series1.symbolSize = @(1.5);
// 坐标点样式, 设置连线的宽度
series1.itemStyle = [[PYItemStyle alloc] init];
series1.itemStyle.normal = [[PYItemStyleProp alloc] init];
series1.itemStyle.normal.lineStyle = [[PYLineStyle alloc] init];
series1.itemStyle.normal.lineStyle.width = @(1.5);
// 添加坐标点 y 轴数据 ( 如果某一点 无数据, 可以传 @"-" 断开连线 如 : @[@"7566", @"-", @"7571"] )
series1.data = _yValues;
[seriesArr addObject:series1];
[option setSeries:seriesArr];
self.barView = [[PYEchartsView alloc]initWithFrame:CGRectMake(0, 0, self.width , self.cellHeight)];
self.barView.backgroundColor = [UIColor whiteColor];
[self.scrollView addSubview:self.barView];
[_barView setOption:option];
[_barView loadEcharts];
[_barView refreshEcharts];//如果不添加这个刷新,首次加载图表完之后图表不显示
}
//获取y轴的宽度
- (CGFloat)widthForTitle:(NSString *)title {
NSDictionary *attributes = @{NSFontAttributeName : [UIFont systemFontOfSize:14]};
CGSize size = [title boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, 35) options:NSStringDrawingUsesLineFragmentOrigin attributes:attributes context:nil].size;
size.width = ceil(size.width)+10;
return size.width;
}
如果柱状图上的数字不显示,可以找到 PYItemStyleProp 这个类,查看初始化,_label.position = @"outer",如果是这个,改为@"top",就可以了
因为项目中多条数据需要左右滑动,无奈只好在下面加了一个UIScrollView,但是这样的话Y轴就随着一起左右滑动了,至今没有找到合适的方法,如果有做过的,还望能请教下.
效果图(数据源是我随便添加的,可自行设置)
Bar.gif
