iOS 使用百度图表插件Echarts
2015-10-06 10:15
681 查看
最近开发的iOS应用使用了百度的图表插件echarts，在这里做下记录
echarts 官网：http://echarts.baidu.com/
步骤就是首先在iOS里建几个常用的图表模板：柱状图、饼图、折线图，如果用到其他可以去官网看例子；
以柱状图为例,我的命名是chart_bar.html：
title:是标题，ocData:是X轴的名称，ocValueData:是具体是数值
然后在oc代码里创建UIWebView ，加载chart_bar.html，并且传值title，ocData，ocValueData三个的值
LoadWebViewController.h
LoadWebViewController.m
运行项目，出现柱状图：
echarts 官网：http://echarts.baidu.com/
步骤就是首先在iOS里建几个常用的图表模板：柱状图、饼图、折线图，如果用到其他可以去官网看例子；
以柱状图为例,我的命名是chart_bar.html：
title:是标题，ocData:是X轴的名称，ocValueData:是具体是数值
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:260px;width: 100%;"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
var title = "";
var ocData;
var ocValueData;
function setData(ocvalue){
ocData = ocvalue;
}
function setValueData(ocvalue){
ocValueData = ocvalue;
}
function setTitle(str){
title = str;
}
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:[title]
},
xAxis : [
{
type : 'category',
data : ocData
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":title,
"type":"bar",
"data":ocValueData
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>然后在oc代码里创建UIWebView ，加载chart_bar.html，并且传值title，ocData，ocValueData三个的值
LoadWebViewController.h
#import <UIKit/UIKit.h> @interface LoadWebViewController : UIViewController<UIWebViewDelegate> @end
LoadWebViewController.m
#import "LoadWebViewController.h"
@interface LoadWebViewController ()
{
UIWebView *_webView;
}
@end
@implementation LoadWebViewController
-(void)viewDidLoad{
[super viewDidLoad];
_webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width,260)];
_webView.backgroundColor = [UIColor redColor];
_webView.delegate = self;
[self.view addSubview:_webView];
NSString *filePath = [[NSBundle mainBundle]pathForResource:@"chart_bar" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[_webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:filePath]];
}
//webview加载完成后加载图表数据
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
//传值标题
<p class="p1"><span class="s1"> NSString</span><span class="s2"> *setTitle = </span><span class="s3">@"setTitle('</span><span class="s4">数量（吨）</span><span class="s3">')"</span><span class="s2">;</span></p> [_webView stringByEvaluatingJavaScriptFromString:setTitle];
//传值X轴
[_webView stringByEvaluatingJavaScriptFromString:@"setData(['桔子','香蕉','苹果','西瓜'])"];
//柱状图
NSString *setValueData = [NSString stringWithFormat:@"setValueData([%@,%@,%@,%@])",@"200",@"100",@"260",@"400"];
//传值Y轴数据
[_webView stringByEvaluatingJavaScriptFromString:setValueData];
}
@end运行项目，出现柱状图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 