近期项目中要做图表功能，为了降低开发量採用的是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/ 进行在线构建工具，把多余的内容去掉。