百度Echarts入坑(柱状图正负显示)

上个项目中涉及到股票之类的折线图柱状图饼图等图表类的展示,因为时间紧迫,就没来得及多去研究,找了几个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