近期项目中要做图表功能，为了降低开发量採用的是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是官方server的，而假设使用本地下载好点的须要注意路径。默认情况下Xcode的目录是黄色的(group)，里面的文件实际上是在同一个目录以下的，要使用蓝色(folder)的目录。

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

IOS使用Charts的更多相关文章

  1. iOS 使用Charts框架 折线,柱状,K线,饼状,雷达全攻略

    我是前言: 大约几个月前我在某平台写了一篇文章, 文中简单地介绍了Charts两种图表的样式的使用, 不过有种意犹未尽的感觉, 利用周末的空闲时间再次看了看, 有了新的收获, 今天发出来,分享给大家, ...

  2. iOS使用Charts框架绘制—柱形图

    首先看一下最终要实现的效果: 最终效果 一.初始化barChartView 绘制柱形图需要用到BarChartView这个类,下面是初始化代码: self.barChartView = [[BarCh ...

  3. iOS - Quartz 2D 第三方框架 Charts 绘制图表

    1.Charts 简介 使用第三方框架 Charts 绘制 iOS 图表.GitHub 源码 Charts Charts 是一款用于绘制图表的框架,可以绘制柱状图.折线图.K线图.饼状图等.Chart ...

  4. iOS图表库Charts集成与使用

    Charts是一个很优秀的图表库,它支持Android.iOS.tvOS和macOS,这样使用起来,可以节省学习成本,可以从GitHub上了解更多信息.本文记录在iOS项目上的集成与使用. Chart ...

  5. 如何在 Swift 语言下使用 iOS Charts API 制作漂亮图表？

    [编者按]本文作者 Joyce Echessa 是渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.文中作者通过示例介绍用 ios-charts 库创建简易美观的 ...

  6. iOS 图表工具charts之CombinedChartView

    关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...

  7. iOS 图表工具charts之CandleStickChartView(K线)

    关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...

  8. iOS 图表工具charts之PieChartView

    关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...

  9. iOS 图表工具charts之BarChartView

    关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...

随机推荐

  1. minishift的本地代码构建

    看文档说支持,但实际尝试了下,失败 发现仍然是找github中的代码 找了半天,发现是在目录下有.git的隐含目录,然后copy到其他目录下删除,然后再试,发现仍然失败. 日志看是指定的目录并没有传入 ...

  2. HDU 4886 TIANKENG’s restaurant(Ⅱ) hash+dfs

    题意: 1.找一个字符串s使得 s不是给定母串的子串 2.且s要最短 3.s在最短情况下字典序最小 hash.,,结果t掉了...加了个姿势怪异的hash值剪枝才过.. #include <cs ...

  3. scikit-learn(window,linux)安装

    scikit-learn是python的机器学习库 记录下载window中和linux中如何下载scikit-learn 方法一 直接下载Anaconda 这是一个非常齐全的python发行版本,里面 ...

  4. 【算法导论C++代码】Strassen算法

    简单方阵矩乘法 SQUARE-MATRIX-MULTIPLY(A,B) n = A.rows let C be a new n*n natrix to n to n cij = to n cij=ci ...

  5. DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit)

    DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit) DevExpress:下拉框绑定数据源 (ComboBoxEdit,LookUpEdit) // 设置下拉框 ...

  6. mysql创建用户、授权，revoke

     use mysql;set password for root =password('haowumz');select host,user,password from user ;show gran ...

  7. vue vuex 大型项目demo示例

    1.vuex 动态模块配置 import Vue from 'vue' import Vuex from 'vuex' import store from '@/store'; // 使用Vuex插件 ...

  8. 【VBA编程】12.Workbook对象常用属性

    [ActiveSheet属性] ActiveSheet属性用于返回一个对象,表示活动工作簿中或指定的窗口或工作簿中的活动工作表 [Colors] Colors属性是一个Variant类型的可读写属性, ...

  9. 转发：【PHP】转义和过滤html单、双引号及HTML标签

    一.单引号和双引号转义在PHP的数据存储过程中用得比较多,即往数据库里面存储数据时候需要注意转义单.双引号: 先说几个PHP函数: 1.addslashes — 使用反斜线引用(转义)字符串: 返回字 ...

  10. 【转】C# 视频监控系列（13）：H264播放器——控制播放和截图

    本文原文地址:http://www.cnblogs.com/over140/archive/2009/03/30/1421531.html 阿里云栖社区也有相关的视频开发案例:https://yq.a ...