上个项目中涉及到股票之类的折线图柱状图饼图等图表类的展示,因为时间紧迫,就没来得及多去研究,找了几个demo用了一下,

始终没有时间去过多的研究,最近接手的一个项目又使用到了柱状图图表,需要正负柱状图,

查看了多个柱状图的demo,都是各种bug和不合适,在使用该demo的同时还要去修复bug,

太头疼了,无奈选择了难研究的百度Echarts,接下来说下简单的入坑

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