发布时间 : 星期一 文章iOS- ECharts 使用（折线图， 柱状图）更新完毕开始阅读2a98a9f4a8114431b80dd887
iOS - ECharts 使用(折线图, 柱状图)
前言
App中使用折线图, 柱状图有很多方法框架, 但是却很少有公司级的产品供iOS开发者使用, 百度团队有一款 ECharts 产品, 如果对JS使用熟练完全可以在项目中集成使用. 如果对JS语言不熟, Pluto-Y 对百度ECharts进行封装为 iOS-Echarts , 可以供开发者使用, 作者今天就聊一聊 iOS-Echarts 的使用
一 举例说明 1 折线图 0. 说明
该视图底层是用 webview 加载 JS. 有些部分为了实现效果需要进行修改 1. cocoaPods 配置 : *pod 'iOS-Echarts' 2. 引入头文件
#import \#import \
#import \ 3.定义属性
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) PYZoomEchartsView *kEchartView; 4. 创建 ScrollView
为了让手机屏幕显示更多数据, 并且数据之间不拥挤有横向滑动效果, 需要将webview添加在 ScrollView上
- (void)creatScrollView{
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width , 300)]; [self.view addSubview:self.scrollView]; self.scrollView.delegate = self; self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width * 2, 0);
self.scrollView.showsHorizontalScrollIndicator = NO;
}
5. 创建 Echarts
-(void)showLineDemo {
/** 图表选项 */
PYOption *option = [[PYOption alloc] init]; //是否启用拖拽重计算特性，默认关闭 option.calculable = NO;
//数值系列的颜色列表(折线颜色)
option.color = @[@\ // 图标背景色
// option.backgroundColor = [[PYColor alloc] initWithColor:[UIColor orangeColor]];
/** 提示框 */
PYTooltip *tooltip = [[PYTooltip alloc] init]; // 触发类型 默认数据触发 tooltip.trigger = @\ // 竖线宽度
tooltip.axisPointer.lineStyle.width = @1; // 提示框 文字样式设置
tooltip.textStyle = [[PYTextStyle alloc] init]; tooltip.textStyle.fontSize = @12;
// 添加到图标选择中
option.tooltip = tooltip;
/** 图例 */
PYLegend *legend = [[PYLegend alloc] init]; // 设置数据
legend.data = @[@\挂牌价\成交价\
// 添加到图标选择中 option.legend = legend;
/** 直角坐标系内绘图网格, 说明见下图 */ PYGrid *grid = [[PYGrid alloc] init]; // 左上角位置 grid.x = @(45);
grid.y = @(20); // 右下角位置 grid.x2 = @(20); grid.y2 = @(30);
grid.borderWidth = @(0);
// 添加到图标选择中 option.grid = grid;
/** X轴设置 */
PYAxis *xAxis = [[PYAxis alloc] init]; //横轴默认为类目型(就是坐标自己设置) xAxis.type = @\ // 起始和结束两端空白
xAxis.boundaryGap = @(YES); // 分隔线
xAxis.splitLine.show = NO; // 坐标轴线
xAxis.axisLine.show = NO; // X轴坐标数据 xAxis.data = @[@\月\@\月\@\月\@\月\@\月\@\月\@\月\月\月\月\月\月\ // 坐标轴小标记
xAxis.axisTick = [[PYAxisTick alloc] init]; xAxis.axisTick.show = YES;
// 添加到图标选择中
option.xAxis = [[NSMutableArray alloc] initWithObjects:xAxis, nil];
/** Y轴设置 */
PYAxis *yAxis = [[PYAxis alloc] init]; yAxis.axisLine.show = NO;
// 纵轴默认为数值型(就是坐标系统生成), 改为 @\会有问题, 读者可以自行尝试
yAxis.type = @\ // 分割段数，默认为5 yAxis.splitNumber = @4; // 分割线类型
// yAxis.splitLine.lineStyle.type = @\ //'solid' | 'dotted' | 'dashed' 虚线类型
// 添加到图标选择中 ( y轴更多设置, 自行查看官方文档)
option.yAxis = [[NSMutableArray alloc] initWithObjects:yAxis, nil];
/** 定义坐标点数组 */
NSMutableArray *seriesArr = [NSMutableArray array];
/** 第一条折线设置 */
PYCartesianSeries *series1 = [[PYCartesianSeries alloc] init]; series1.name = @\挂牌价\ // 类型为折线
series1.type = @\ // 坐标点大小
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 轴数据
series1.data = @[@\@\@\@\@\@\
[seriesArr addObject:series1];
/** 第二条折线设置 */
PYCartesianSeries *series2 = [[PYCartesianSeries alloc] init]; series2.name = @\成交价\ series2.type = @\
series2.symbolSize = @(1.5);
series2.itemStyle = [[PYItemStyle alloc] init];
series2.itemStyle.normal = [[PYItemStyleProp alloc] init];
series2.itemStyle.normal.lineStyle = [[PYLineStyle alloc] init]; series2.itemStyle.normal.lineStyle.width = @(1.5);
series2.data = @[@\@\@\@\@\@\ [seriesArr addObject:series2];
[option setSeries:seriesArr];
/** 初始化图表 */ self.kEchartView = [[PYZoomEchartsView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width * 2 , 300)]; // 添加到 scrollView 上