1. 效果圖
用戶點(diǎn)擊紅色按鈕匠童，即顯示扇形圖
oc調(diào)用echarts.png
2. 設(shè)計(jì)思路
2.1 創(chuàng)建一個(gè)index.html，引入echarts庫文件。編寫js測(cè)試函數(shù)test1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="./echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height: 800px;background-color: azure"></div>
<script type="text/javascript">
function test1(option)
{
// 基于準(zhǔn)備好的dom撰茎，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
}
</script>
</body>
</html>
2.2 在OC界面打洼，需要使用wkwebView去訪問html資源龄糊，并和步驟1創(chuàng)建的js函數(shù)進(jìn)行交互
懶加載一個(gè)wkwebView對(duì)象
- (WKWebView *)webView{
if (_webView == nil) {
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
_webView = [[WKWebView alloc]initWithFrame:CGRectMake(0,0,200,200) configuration:config];
_webView.allowsBackForwardNavigationGestures = YES;
_webView.UIDelegate = self;
_webView.navigationDelegate = self;
_webView.center = self.view.center;
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
NSString *htmlStr = [[NSString alloc]initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[_webView loadHTMLString:htmlStr baseURL:[[NSBundle mainBundle] bundleURL]];
[self.view addSubview:_webView];
}
return _webView;
}
懶加載一個(gè)button
- (UIButton *)button{
if (_button == nil) {
_button = [[UIButton alloc]initWithFrame:CGRectMake(30,30,200,40)];
_button.backgroundColor = [UIColor redColor];
[_button setTitle:@"顯示簡(jiǎn)單的扇形圖" forState:UIControlStateNormal];
[_button setTintColor:UIColor.whiteColor];
_button.center = CGPointMake(self.view.center.x, 150);
[_button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:_button];
}
return _button;
}
響應(yīng)button的點(diǎn)擊事件逆粹，當(dāng)button被點(diǎn)擊時(shí)，創(chuàng)建一個(gè)json字符串炫惩，傳遞給html頁面僻弹，這樣就可以完成echarts圖形的繪制
//OC中調(diào)用js代碼
-(void)buttonClicked:(UIButton *)button{
//準(zhǔn)備數(shù)據(jù)源
NSArray *values = @[@1212,@2332,@1919];
NSArray *nameValues = @[@"A",@"B",@"C"];
NSMutableArray *arrayM = [NSMutableArray array];
for (int i=0; i<values.count; i++) {
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
[dict setValue:values[i] forKey:@"value"];
[dict setValue:nameValues[i] forKey:@"name"];
[arrayM addObject:dict];
}
NSDictionary *optionDict = @{
@"series" : @{
@"type" : @"pie",
@"data" : arrayM
}
};
//字典數(shù)據(jù)轉(zhuǎn)化為json字符串，并調(diào)用html中js的函數(shù)test1（params）
NSString *ocToJs = [NSString stringWithFormat:@"test1(%@)",[self dictToJson:optionDict]];
//執(zhí)行json字符串他嚷，這里會(huì)進(jìn)行與html中js的進(jìn)行交互
[self.webView evaluateJavaScript:ocToJs completionHandler:^(id _Nullable name, NSError * _Nullable error) {
NSLog(@"方法調(diào)用完成回調(diào)");
}];
}
-(NSString *)dictToJson:(NSDictionary *)dict{
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:dict options:NSJSONWritingPrettyPrinted error:nil];
NSString *jsonStr = [[NSString alloc]initWithData:jsonData encoding:NSUTF8StringEncoding];
return jsonStr;
}
3. 完整代碼
//
// ViewController.m
// 08-wkwebView
//
// Created by EVAN YANG on 2020/5/11.
// Copyright ? 2020 EVAN YANG. All rights reserved.
//
#import "ViewController.h"
#import <WebKit/WebKit.h>
@interface ViewController ()<WKUIDelegate,WKNavigationDelegate>
@property(nonatomic,strong)WKWebView *webView;
@property(nonatomic,strong) UIButton *button;
@end
@implementation ViewController
- (UIButton *)button{
if (_button == nil) {
_button = [[UIButton alloc]initWithFrame:CGRectMake(30,30,200,40)];
_button.backgroundColor = [UIColor redColor];
[_button setTitle:@"顯示簡(jiǎn)單的扇形圖" forState:UIControlStateNormal];
[_button setTintColor:UIColor.whiteColor];
_button.center = CGPointMake(self.view.center.x, 150);
[_button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:_button];
}
return _button;
}
- (WKWebView *)webView{
if (_webView == nil) {
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
_webView = [[WKWebView alloc]initWithFrame:CGRectMake(0,0,200,200) configuration:config];
_webView.backgroundColor = UIColor.lightGrayColor;
_webView.allowsBackForwardNavigationGestures = YES;
_webView.UIDelegate = self;
_webView.navigationDelegate = self;
_webView.center = self.view.center;
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
NSString *htmlStr = [[NSString alloc]initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[_webView loadHTMLString:htmlStr baseURL:[[NSBundle mainBundle] bundleURL]];
[self.view addSubview:_webView];
}
return _webView;
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
[self webView];
[self button];
}
//OC中調(diào)用js代碼
-(void)buttonClicked:(UIButton *)button{
NSArray *values = @[@1212,@2332,@1919];
NSArray *nameValues = @[@"A",@"B",@"C"];
NSMutableArray *arrayM = [NSMutableArray array];
for (int i=0; i<values.count; i++) {
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
[dict setValue:values[i] forKey:@"value"];
[dict setValue:nameValues[i] forKey:@"name"];
[arrayM addObject:dict];
}
NSDictionary *optionDict = @{
@"series" : @{
@"type" : @"pie",
@"data" : arrayM
}
};
NSString *ocToJs = [NSString stringWithFormat:@"test1(%@)",[self dictToJson:optionDict]];
[self.webView evaluateJavaScript:ocToJs completionHandler:^(id _Nullable name, NSError * _Nullable error) {
NSLog(@"方法調(diào)用完成回調(diào)");
}];
}
//字典轉(zhuǎn)json字符串
-(NSString *)dictToJson:(NSDictionary *)dict{
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:dict options:NSJSONWritingPrettyPrinted error:nil];
NSString *jsonStr = [[NSString alloc]initWithData:jsonData encoding:NSUTF8StringEncoding];
return jsonStr;
}
//開始加載
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{
NSLog(@"didStartProvisionalNavigation");
}
//正在加載
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{
NSLog(@"didCommitNavigation");
}
//加載完成
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
NSLog(@"didFinishNavigation");
// NSString *ocToJs = @"test1()";
// [self.webView evaluateJavaScript:ocToJs completionHandler:^(id _Nullable name, NSError * _Nullable error) {
// NSLog(@"方法調(diào)用完成回調(diào)");
// }];
}
@end
