~ read.

iOS-Echarts------定制性高的图表控件

我是前言

最近遇到一个非常严于自律的UI，那酸爽-------几个像素都要求的非常以及相当的严格。为此本王差点都跟她打起来了(开玩笑的，我这么绅士怎么可能打女生呢)。而在App中需要显示数据趋势什么的，那UI对界面要求，线条粗细，字体，字体大小，颜色，透明度各种各种。那时候我内心是崩溃的！ 崩溃图

以我对她的了解来说如果她不满意随时都可能对图表进行改动她所谓的小改动。于是我开始踏山涉水，走亲访友寻觅着我的梦中图表。可是走了一全我感觉定制性都不够啊。 没办法，最后找来找去可能只能通过H5的画出来的图表效果什么的可能会好一点。最后将目光锁定在百度的Echarts的控件上来。

Echarts

关于这个H5的图表有多可控我就不进行累述的，具体的内容大家可以参考Echart官网进行查看。其实选这个还有一个目的就是，这个整体的空间还有一家大公司来维护，总感觉爽爽的。 然后我今开始了我的封装之旅，经过了几百年的封装，终于弄出了一个稍微可以用的控件，又兴趣的童鞋可以拿来用用或者研究下。不过还有好多内容还有没有封装好。具体的下载地址可以通过Github上来下载:https://github.com/Pluto-Y/iOS-Echarts

如何使用

有两种方法可以使用：

  • 通过cocoapods进行导入：pod 'iOS-Echarts'
  • 将项目下的iOS-Echarts目录拷贝到项目中

在需要使用的地方引入PYEchartsView.h和PYOption.h。 最后只需通过对图表的属性进行配置即可。

至于其中的参数与文档可以参考上方的Echart官网进行查看与配置。

举个栗子

像我们的话一般来说就是一套UI对应一套对应的折线图、柱状图以及饼图。所以一般我只需在更换UI的情况下进行修改这个控件的初始化即可。比如这个版本里面我们对于界面需求就只需通过下面的代码进行对折线图进行初始化即可：

#pragma mark 初始化图表
-(void)initEchartOption {
    option = [[PYOption alloc] init];
    option.calculable = NO;
    option.toolbox = [[PYToolbox alloc] init];
    // 坐标轴属性
    PYGrid *grid = [[PYGrid alloc] init];
    grid.x = @(-2);
    grid.y = @(0);
    grid.x2 = @(0);
    grid.y2 = @(30);
    grid.borderWidth = @(0);
    option.grid = grid;
    // X轴的属性
    xAxis = [[PYAxis alloc] init];
    xAxis.show = YES;
    xAxis.type = @"category";
    xAxis.boundaryGap = @(YES);
    xAxis.splitLine = [[PYSplitLine alloc] init];
    xAxis.splitLine.show = NO;
    xAxis.axisTick = [[PYAxisTick alloc] init];
    xAxis.axisTick.show = NO;
    xAxis.axisLine = [[PYAxisLine alloc] init];
    xAxis.axisLine.show = NO;
    xAxis.axisLabel = [[PYAxisLabel alloc] init];
    xAxis.axisLabel.textStyle = [[PYTextStyle alloc] init];
    xAxis.axisLabel.textStyle.color = PYRGBA(255, 255, 255, 1);
    option.xAxis = [[NSMutableArray alloc] initWithObjects:xAxis, nil];
    // Y轴的属性
    yAxis = [[PYAxis alloc] init];
    yAxis.type = @"value";
    yAxis.show = NO;
    yAxis.splitLine = [[PYSplitLine alloc] init];
    yAxis.splitLine.show = NO;
    yAxis.axisLine.show = NO;
    yAxis.axisTick = [[PYAxisTick alloc] init];
    yAxis.axisTick.show = NO;
    option.yAxis = [[NSMutableArray alloc] initWithObjects:yAxis, nil];
    // 折线图的线的属性
    NSMutableArray *serieses = [[NSMutableArray alloc] init];
    series = [[PYCartesianSeries alloc] init];
    series.symbol = @"image://trend_dot@3x.png";
    series.symbolSize = @(4);
    series.type = @"line";
    series.smooth = YES;
    series.showAllSymbol = YES;
    series.itemStyle = [[PYItemStyle alloc] init];
    series.itemStyle.normal = [[PYItemStyleProp alloc] init];
    series.itemStyle.normal.lineStyle = [[PYLineStyle alloc] init];
    series.itemStyle.normal.lineStyle.color = PYRGBA(255, 255, 255, 1);
    series.itemStyle.normal.lineStyle.width = @(1);
    int barWidth = [UIScreen mainScreen].bounds.size.width / 10;
    series.barWidth = @(barWidth);
    [serieses addObject:series];
    [option setSeries:serieses];
}

这里是针对对于折线图进行大体来说进行属性和展示的初始化。对于其中的数据的具体显示的属性，可以根据具体动态的情况下进行不同的情况进行不同的展示。比如展示的最大值、最小值的特别标示，比如平均的辅助线以及点击事件等等等。具体可以根据具体需求进行实现。而我项目中的实现效果如下：

效果图

打个广告

由于还有好多内容没有封装，最近也有点忙，想说有没有人希望一起来封装的。有兴趣的童鞋可以微博联系我(@叫什么都不如叫Pluto-Y)，大家一起成长起来。

comments powered by Disqus