IOS使用Charts

最新推荐文章于 2024-01-25 10:10:52 发布

jwzhangjie

最新推荐文章于 2024-01-25 10:10:52 发布

阅读量9.1k

点赞数

分类专栏： IOS 文章标签： Charts

本文链接：https://blog.csdn.net/jwzhangjie/article/details/47008221

版权

IOS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

jwzhangjie

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
IOS使用Charts

最近项目中要做图表功能，为了减少开发量采用的是H5+ECharts来做，这里说一下IOS中如何使用ECharts以及遇到的问题。网络模块化单文件引入 IOS使用Charts require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist'
复制链接

扫一扫

专栏目录