IOS使用Charts
近期项目中要做图表功能,为了降低开发量採用的是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的更多相关文章
- iOS 使用Charts框架 折线,柱状,K线,饼状,雷达全攻略
我是前言: 大约几个月前我在某平台写了一篇文章, 文中简单地介绍了Charts两种图表的样式的使用, 不过有种意犹未尽的感觉, 利用周末的空闲时间再次看了看, 有了新的收获, 今天发出来,分享给大家, ...
- iOS使用Charts框架绘制—柱形图
首先看一下最终要实现的效果: 最终效果 一.初始化barChartView 绘制柱形图需要用到BarChartView这个类,下面是初始化代码: self.barChartView = [[BarCh ...
- iOS - Quartz 2D 第三方框架 Charts 绘制图表
1.Charts 简介 使用第三方框架 Charts 绘制 iOS 图表.GitHub 源码 Charts Charts 是一款用于绘制图表的框架,可以绘制柱状图.折线图.K线图.饼状图等.Chart ...
- iOS图表库Charts集成与使用
Charts是一个很优秀的图表库,它支持Android.iOS.tvOS和macOS,这样使用起来,可以节省学习成本,可以从GitHub上了解更多信息.本文记录在iOS项目上的集成与使用. Chart ...
- 如何在 Swift 语言下使用 iOS Charts API 制作漂亮图表?
[编者按]本文作者 Joyce Echessa 是渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.文中作者通过示例介绍用 ios-charts 库创建简易美观的 ...
- iOS 图表工具charts之CombinedChartView
关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...
- iOS 图表工具charts之CandleStickChartView(K线)
关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...
- iOS 图表工具charts之PieChartView
关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...
- iOS 图表工具charts之BarChartView
关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...
随机推荐
- mysql的锁定问题
1.锁定这个问题,是mysql自动产生的,不用程序猿自己加锁 答:默认情况下,档执行insert/update操作时,mysql会自动进行表锁定.从而此时读取操作只能等待. 2.mysql, 需要添加 ...
- jq:zclip复制
实例: <script type="text/javascript" src="js/jquery.js"></script> < ...
- 《Go语言实战》笔记之第三章 ----包
原文地址: http://www.niu12.com/article/10 ####包 所有的.go 文件,除了空行和注释,都应该在第一行声明自己所属的包. 每个包都在一个单独的目录里. 不能把多个包 ...
- java正則表達式 match、find匹配位置
如题.对于java正則表達式这几个方法匹配一次后的,匹配位置搞不太清楚,就写了几个样例.例如以下: String ss="ooaaoo"; Pattern pt=Pattern.c ...
- Linux系统443端口被占用无法启动解决办法
etstat -ano|findstr "443" //搜索443端口占用情况,并找到进程IDTCP 0.0.0.0:443 0.0.0.0:0 LISTENING ...
- 解决NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config
使用spring3.05 mvc进行开发,使用tomcat容器,通过url映射寻找view的时候,会报错NoClassDefFoundError: javax/servlet/jsp/jstl/cor ...
- [OpenCV]实验1.1:图像加载、显示
实验要求:利用图像库的功能,实现从文件加载图像,并在窗口中进行显示的功能:利用常见的图像文件格式(.jpg;.png;.bmp; .gif)进行测试 实验原理:图片读取到程序中是以Mat结构存储的,在 ...
- g++编译问题:skipping incompatible /usr/lib//libboost_system.so when searching for -lboost_system
接上. 连接器无法识别libboost_system.so,虽然找到了动态库文件libboost_system.so但不兼容,导致无法完成链接. 这种情况一般都是二进制不兼容(通俗的讲就是,在一台机器 ...
- 【转】The && and || Operator in JavaScript
原文: https://blog.mariusschulz.com/2016/05/25/the-andand-and-operator-in-javascript The && an ...
- 转: 学ppt的网址与素材
转:http://www.jianshu.com/p/89b261e0b8f6 你说你要学ppt,可你知道这些吗? 之前身边的同学总说做PPT很难,每次做ppt都头疼,我都对此很不屑,直到前一段开 ...