2016-07-06 11:54:02 tuwanli125 阅读数 10182

最近做图表的时候也是很头疼,自己技术不到家没能自给动手画,别人有封装的不错的但是又不是太符合需求,

后来在网上看到了Echarts的使用,简单方便,就大概记录下吧,看了别人封装好的ios-ECharts感觉不错,可以直接拿来用

将ios-ECharts集成到项目里面,cocoapods进行导入:pod 'iOS-Echarts'
修改一些参数,效果图

demo 地址:https://github.com/tuwanli/Chartdemo


其中类似控件颜色、控件的显示,都可以修改,先看一下,比较全面的功能样式,包括查看不能数据展示、可以保存图像、可以重置数据,修改数据等功能

也许你不需要这么多,可以根据参数进行控制


感兴趣的话可以查看文档http://echarts.baidu.com/api.html#action.tooltip.showTip

下面这个是非常全面的图表


各种柱状图、折线图、饼状图、散点图都有噢!!

github:https://github.com/tuwanli/iOS-Echarts这个是拷贝的原文章博主的git工程

原文地址http://www.pluto-y.com/ios-echarts-github/


2019-06-05 20:08:32 weixin_43774460 阅读数 953

刚开始接到需求说一个H5页面要嵌入Android/ios端,从没接触过.所以这是我第一次接触.
我是用react框架写的H5页面内有用react-for-echarts图标.
然后ios端和android端会把webview(系统中内置了一款高性能 webkit 内核浏览器,)方法发给你来调用,从而可以获取到APP的登录信息,然后根据获取的登录信息来发才能请求接口.上代码!
在这里插入图片描述

首先在react钩子中判断是ios/Android

Android

根据Android提供的方法同步可以获取到用户信息,前面用逻辑短路更严谨的判断下,以防报错

IOS

IOS比较麻烦点,首先IOS端会提供方法后在调用全局的函数(注意是全局函数),所以使用window点什么来定义,通过形参就可以接受到用户信息

问题一

联调APP

因为是要获取到APP用户的信息才能访问数据的,所以一开始不知道怎么联调.
一开始是用手机连着电脑的APP开发软件,然后在我的js代码中alert出数据来联调的,真的太麻烦了.后面看到一个工具 vconsole就方便很多了

vconsole

我们在写webapp或者移动端网页需要嵌入到app时候,尤其是在APP内置的webView上加载我们的页面,想要查看手机浏览器信息是非常困难的事,当出现问题的时候,你又不能查看日志,一般会连接本地测试环境,然后在alert来打印日志(这种做法太蠢了),然后一遍一遍的定位bug,修改代码。

问题二

打包上传后没问题,后面发现在测试中发现有些手机从APP端点进去就白屏了这个问题一直很难定位,APP端也一直在找问题点,后面只能代码一段一段的屏蔽打包上传测试,发现是echarts表格出问题了,估计是适配不了echarts-for-react,所以又定位到图表,后面采用了echarts原生写法,写在react上,问题解决.

####效果如图
在这里插入图片描述

2015-07-22 20:56:23 jwzhangjie 阅读数 8536

最近项目中要做图表功能,为了减少开发量采用的是H5+ECharts来做,这里说一下IOS中如何使用ECharts以及遇到的问题。

网络模块化单文件引入

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>IOS使用Charts</title>
	
</head>
<body>
	<div id="main" class="main" style="height:400px;" ></div>
	<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
	<script type="text/javascript">
		require.config({
        	paths: {
            	echarts: 'http://echarts.baidu.com/build/dist'
        	}
    	});
    	require(
		        [
		            'echarts',
		            'echarts/chart/line',
		            'echarts/chart/bar'
		        ],
		        function (ec) {
	                var myChart = ec.init(document.getElementById('main'));
	                var option = {
	                    title : {
					        text: '世界人口总量',
					        subtext: '数据来自网络'
					    },
					    tooltip : {
					        trigger: 'axis'
					    },
					    legend: {
					        data:['2011年', '2012年']
					    },
					    toolbox: {
					        show : true,
					        feature : {
					            mark : {show: true},
					            dataView : {show: true, readOnly: false},
					            magicType: {show: true, type: ['line', 'bar']},
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
					    calculable : true,
					    xAxis : [
					        {
					            type : 'value',
					            boundaryGap : [0, 0.01]
					        }
					    ],
					    yAxis : [
					        {
					            type : 'category',
					            data : ['巴西','印尼','美国','印度','中国','世界人口(万)']
					        }
					    ],
					    series : [
					        {
					            name:'2011年',
					            type:'bar',
					            data:[18203, 23489, 29034, 104970, 131744, 630230]
					        },
					        {
					            name:'2012年',
					            type:'bar',
					            data:[19325, 23438, 31000, 121594, 134141, 681807]
					        }
					    ]
					}
                	myChart.setOption(option);
            	}
    	);
	</script>
</body>
</html>

标签式单文件引入

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>IOS使用Charts</title>
	
</head>
<body>
	<div id="main" class="main" style="height:400px;" ></div>
	<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
	<script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading({//用来在加载网络数据时显示
			text: '正在努力的读取数据中...',    //loading话术
		});
        var option = {
            title : {
		        text: '世界人口总量',
		        subtext: '数据来自网络'
		    },
		    tooltip : {
		        trigger: 'axis'
		    },
		    legend: {
		        data:['2011年', '2012年']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            dataView : {show: true, readOnly: false},
		            magicType: {show: true, type: ['line', 'bar']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    xAxis : [
		        {
		            type : 'value',
		            boundaryGap : [0, 0.01]
		        }
		    ],
		    yAxis : [
		        {
		            type : 'category',
		            data : ['巴西','印尼','美国','印度','中国','世界人口(万)']
		        }
		    ],
		    series : [
		        {
		            name:'2011年',
		            type:'bar',
		            data:[18203, 23489, 29034, 104970, 131744, 630230]
		        },
		        {
		            name:'2012年',
		            type:'bar',
		            data:[19325, 23438, 31000, 121594, 134141, 681807]
		        }
		    ]
		}
    	myChart.setOption(option);
    	myChart.hideLoading();//实际请求结束后调用
	</script>
</body>
</html>

注意:

1、模块化单文件引入方式是官方推荐的,上面之所以写网络是因为使用的js是官方服务器的,而如果使用本地下载好点的需要注意路径,默认情况下Xcode的文件夹是黄色的(group),里面的文件实际上是在同一个目录下面的,要使用蓝色(folder)的文件夹。


2、使用本地的echarts.js的时候可以根据项目需要什么形状的图形,从http://ecomfe.github.io/echarts-builder-web/ 进行在线构建工具,把多余的内容去掉。


2015-10-06 10:15:59 Ma_Yingjiao 阅读数 5040

最近开发的iOS应用使用了百度的图表插件echarts,在这里做下记录

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

运行项目,出现柱状图:




2017-08-04 10:58:01 u012869130 阅读数 712

Ionic2 Angularjs2 使用echarts时IOS App 图形抖动


在使用echarts后,打包成ios app后下拉图形出现闪屏的情况,只需要在echarts的option中添加 showDelay: 200 即可

 tooltip: {
        trigger: 'axis',
        // formatter:  function (params,ticket,callback) {
        //     console.log(params)
        //     var res = '<div (click)="show()">' + params[0].name;
        //     for (var i = 0, l = params.length; i < l; i++) {
        //         res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
        //     }
        //     res =res+'</div>'
        //     setTimeout(function (){
        //         // 仅为了模拟异步回调
        //         callback(ticket, res);
        //     }, 1000)
        //     return 'loading';
        // },
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        },
        showDelay: 200  //防止抖动
      },
      legend: {
        data: ['星期一','星期二']
      },
      xAxis: [
      {
        type: 'category',
        data: xdata,
        axisPointer: { type: 'shadow' },
        axisLabel: { interval:0,rotate:40 },
      }
      ],
      yAxis: [
      {
        type: 'value',
        name: yname,
        axisLabel: { formatter: '{value}' },
        splitLine:{ show: false }
        }
      ],
      series: series
    }