image.png
需求驱动开发。
因项目需求，需要在app中搞大量的表格。当然相如什么charts，pncharts等原生插件也可以用，之前也用过，但是因为他们可以说没有什么文档，当时踩过不少坑，纯靠猜属性是什么意思。所以，决定选择echarts来实现。
但是如何使用echarts才能让其达到跟原生一样的体验，不会出现白屏，不会加载缓慢？
so，继续往下看。
首先我们肯定知道，html css js什么的放到本地，加载的速度肯定比下载的快，毕竟一个echarts.conmmon.min.js文件都有0.5M大小。
还有webview的选型，选择的wkwebview，虽然wkwebview肯定是有不少坑，但是，毕竟快啊。
最后一点，对于数据的获取，如果是通用的图表，会让服务器来拼数据。如果不是通用的图表，我选择在本地model中拼option，直接拿来用。
置于传值什么的，直接走js 交互，还是很简单的。
第一步
首先自定义了一个BaseWKWebView
-(WKWebView *)webView{
if (!_webView) {
// self.userInteractionEnabled= NO;
self.userInteractionEnabled = true;
WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc]init];
configuration.preferences.javaScriptEnabled = YES;//打开js交互
_webConfiguration = configuration;
// _jsHandler = [[XLJSHandler alloc]initWithViewController:self configuration:configuration];
_webView = [[WKWebView alloc]initWithFrame:self.bounds configuration:configuration];
[_webView setOpaque:NO];
_webView.scrollView.backgroundColor = [UIColor clearColor];
_webView.scrollView.scrollEnabled = false;
_webView.navigationDelegate = self;
_webView.backgroundColor = [UIColor clearColor];
// _webView.allowsBackForwardNavigationGestures =YES;//打开网页间的 滑动返回
_webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
// //监控进度
// [_webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
[self addSubview:_webView];
}
return _webView;
}
然后就开始遇到坑了,看下面这两个方法，就是坑所在的地方，刚开始一直用第一个方法，然后总是取不到css和js的路径，最后发现是没搞根目录，也就是第二个方法。
-(void)setLocalUrl:(NSString *)localUrl{
NSURL * url = [[NSBundle mainBundle] URLForResource:localUrl withExtension:@"html"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];
}
-(void)setLocalUrl:(NSString *)localUrl subdirectory:(NSString *)subdirectory {
NSURL * url = [[NSBundle mainBundle] URLForResource:localUrl withExtension:@"html" subdirectory:subdirectory];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];
}
第二步
在这里先看下服务器返回的格式 数据格式
然后根据数据格式抽了一个model出来。
@property (nonatomic, retain) NSMutableArray * target_source; // 按钮数据源
@property (nonatomic, retain) NSMutableArray * timeAxis; // 横坐标
@property (nonatomic, retain) NSMutableArray * source; // 数据
在这里我们从baseWKwebView里抽个代理方法出来。然后在app中的wkwebview加载完毕的时候把数据通过js交互注入进去。
#pragma mark -- BaseWkWebViewDelegate
- (void)baseWkWebView:(BaseWKWebView *)baseWkWebView didFinishNavigation:(WKNavigation *)navigation {
[self loadBaseWKWebview:self.chartModel];
}
// 监测数据是否取到，未取到数据隔0.4秒获取一次
- (void)loadBaseWKWebview:(QuotesChartModel *)data {
if (!data) {
[self performSelector:@selector(loadBaseWKWebview:) withObject:self.chartModel afterDelay:0.4];
return;
}
NSString * jsonStr = [[data mj_keyValues] mj_JSONString];
[self.chartView jsFuncationName:@"setData" params:@[jsonStr]];
}
下面的是webview调用js的方法。
/**
* webview调用JS方法
*/
-(void)jsFuncationName:(NSString *)funcation params:(NSArray *)params {
NSString * params_str = [params componentsJoinedByString:@","];
NSString * js = [NSString stringWithFormat:@"%@(%@)",funcation,params_str];
[self.webView evaluateJavaScript:js completionHandler:nil];
}
第三步
image.png
该来看看放在本地的html里都是写的什么了。
//引入css
Document
//引入js文件
下面是具体效果。
QQ20181010-161525-HD.gif
不管是从加载速度还是响应速度都跟原生相差无几。
当遇到需要定制化的图的时候，可以在本地拼接option，同样走交互传到html中
/**
* model转chartOption
*/
- (NSDictionary *)chartOptionByModel{
NSDictionary * option = [NSDictionary dictionary];
NSMutableArray * out_arr = [NSMutableArray array];
for (id value in self.outAxis) {
NSInteger v = 0 - [value doubleValue];
[out_arr addObject:[NSNumber numberWithInteger:v]];
};
option = @{
@"dataZoom":@{
@"type":@"inside"
},
@"tooltip":@{
@"trigger":@"axis",
@"axisPointer":@{
@"type":@"line",
}
},
@"grid":@[@{
@"left":@"0px",
@"right":@"0px",
@"bottom":@"30px",
@"top":@"0px",
}],
@"xAxis":@{@"axisLabel": @{@"color":@"#fff"},
@"data":self.timeAxis,
@"axisLine":@{@"show":[NSNumber numberWithBool:false]},
@"axisTick":@{@"show":[NSNumber numberWithBool:false]},
@"fontSize":@"9"},
@"yAxis":@[@{
@"show":[NSNumber numberWithBool:false],
@"inverse": @0,
},
@{
@"show":[NSNumber numberWithBool:false],
}],
@"series":@[@{
@"type":@"bar",
@"name": @"In",
@"stack": @"one",
@"barMaxWidth": @"60px",
@"data":self.inAxis,
@"itemStyle":@{
@"normal": @{
@"color": @"#FA5452"
},
}
},
@{
@"type":@"bar",
@"name": @"Out",
@"stack": @"one",
@"barMaxWidth": @"60px",
@"data":out_arr,
@"itemStyle":@{
@"normal": @{
@"color": @"#3CC28C"
},
}
}]
};
return option;
}
深坑更新中。。
为了实现这个效果
image.png
image.png
首先是push是把数组后面添加元素，unshift是往首位添加元素。
如果不用unshift的话就会面临，series_obj['yAxisIndex'] 对不上的情况。