




已阅读5页,还剩4页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
iOS - ECharts 使用(折线图, 柱状图)前言App中使用折线图, 柱状图有很多方法框架, 但是却很少有公司级的产品供iOS开发者使用, 百度团队有一款 ECharts 产品, 如果对JS使用熟练完全可以在项目中集成使用. 如果对JS语言不熟, Pluto-Y 对百度ECharts进行封装为 iOS-Echarts , 可以供开发者使用, 作者今天就聊一聊 iOS-Echarts 的使用一 举例说明1 折线图0. 说明该视图底层是用 webview 加载 JS. 有些部分为了实现效果需要进行修改1. cocoaPods 配置 : *pod iOS-Echarts2. 引入头文件#import PYEchartsView.h#import PYOption.h#import PYZoomEchartsView.h3.定义属性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 = #20BCFC, #ff6347; / 图标背景色 / option.backgroundColor = PYColor alloc initWithColor:UIColor orangeColor;/* 提示框 */ PYTooltip *tooltip = PYTooltip alloc init; / 触发类型 默认数据触发 tooltip.trigger = axis; / 竖线宽度 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 = category; / 起始和结束两端空白 xAxis.boundaryGap = (YES); / 分隔线 xAxis.splitLine.show = NO; / 坐标轴线 xAxis.axisLine.show = NO; / X轴坐标数据 xAxis.data = 1月, 2月, 3月, 4月, 5月, 6月, 7月, 8月, 9月, 10月, 11月, 12月 ; / 坐标轴小标记 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; / 纵轴默认为数值型(就是坐标系统生成), 改为 category 会有问题, 读者可以自行尝试 yAxis.type = value; / 分割段数,默认为5 yAxis.splitNumber = 4; / 分割线类型 / yAxis.splitLine.lineStyle.type = dashed; /solid | dotted | dashed 虚线类型 / 添加到图标选择中 ( y轴更多设置, 自行查看官方文档) option.yAxis = NSMutableArray alloc initWithObjects:yAxis, nil;/* 定义坐标点数组 */ NSMutableArray *seriesArr = NSMutableArray array;/* 第一条折线设置 */ PYCartesianSeries *series1 = PYCartesianSeries alloc init; = 挂牌价; / 类型为折线 series1.type = line; / 坐标点大小 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 = 7566, 7619, 7571, 7670, 7528, 7640, 7472, 7800, 8058, 7972, 7606, 7710; seriesArr addObject:series1;/* 第二条折线设置 */ PYCartesianSeries *series2 = PYCartesianSeries alloc init; = 成交价; series2.type = line; 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 = 7066, 7119, 7471, 7470, 7228, 7340, 7402, 7600, 7858, 7772, 7506, 7310; seriesArr addObject:series2; option setSeries:seriesArr;/* 初始化图表 */ self.kEchartView = PYZoomEchartsView alloc initWithFrame:CGRectMake(0, 0, self.view.frame.size.width * 2 , 300); / 添加到 scrollView 上 self.scrollView addSubview:self.kEchartView; / 图表选项添加到图表上 self.kEchartView setOption:option;/ 调用- (void)viewDidLoad self creatScrollView; self showLineDem; self.kEchartView loadEcharts;6. 修改如果你 复制了上述代码 , 你会发现视图不能横向滑动, 那是因为 Pluto-Y 封装时添加的一个手势 影响了 横滑效果 , 需要在Pods文件夹中进行如下修改PYZoomEchartsView.m 中-(instancetype)initWithFrame:(CGRect)frame ; 方法中将下面两句话注掉/ UIPanGestureRecognizer *panGesture = UIPanGestureRecognizer alloc initWithTarget:self action:selector(panHandle:);/ self addGestureRecognizer:panGesture;最终效果如下:7. 网络数据如果你 使用网络数据了, 你会发现, 加载数据完成 图表才显示出来, 加载过程中, 页面是空白的, 如何获取加载完成事件 ?开篇作者说过 :0. 说明该视图底层是用 webview 加载 JS. 有些部分为了实现效果需要进行修改所以, 需要继续在Pods文件夹中进行如下修改在 PYEchartsView.m 中(void)webViewDidFinishLoad:(UIWebView *)webView 方法中, 作者使用b
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 呼和浩特市人民医院副主任护师晋升资格预审
- 秦皇岛市人民医院亚低温治疗技术考核
- 阳泉市中医院检验仪器操作规范考核
- 保定市人民医院超声探头选择与应用考核
- 如何设计女性尿接裤输尿管项目可行性研究报告评审方案2025年
- 邯郸市人民医院医务部副主任主任竞聘述职报告与答辩题库
- 2025中医院血管介入引导考核
- 长治市中医院呼吸科危重症患者院内转运风险评估考核
- 2025年中国碳捕集项目投资计划书
- 晋中市人民医院激光脱毛技术考核
- 3.5画角【知识精练+应用拓展】四年级数学上册课后分层作业(人教版)
- 2023年08月广东海珠区工商联雇员1人笔试历年高频考点试题含答案带详解
- 临床各类引流管的固定及规范管理
- 【面部除皱术】SMAS技术和FAME除皱术
- 【课件】蛋白质是生命活动的主要承担者说课课件高一上学期生物人教版必修1
- GB/T 35370-2017潜水呼吸器检测方法
- 发展经济学 马工程课件 1.第一章 发展中国家与发展经济学
- 沟通心理学之有效沟通技巧
- 公共艺术设计-课件
- 人工智能技术介绍完整版人工智能概述、围棋课件
- 人教版八年级下册英语全册教案完整版教学设计含教学反思
评论
0/150
提交评论