logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

IOS使用Charts

 爽行天下丶 2015-08-07

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

网络模块化单文件引入

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <title>IOS使用Charts</title>  
  7.       
  8. </head>  
  9. <body>  
  10.     <div id="main" class="main" style="height:400px;" ></div>  
  11.     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>  
  12.     <script type="text/javascript">  
  13.         require.config({  
  14.             paths: {  
  15.                 echarts: 'http://echarts.baidu.com/build/dist'  
  16.             }  
  17.         });  
  18.         require(  
  19.                 [  
  20.                     'echarts',  
  21.                     'echarts/chart/line',  
  22.                     'echarts/chart/bar'  
  23.                 ],  
  24.                 function (ec) {  
  25.                     var myChart = ec.init(document.getElementById('main'));  
  26.                     var option = {  
  27.                         title : {  
  28.                             text: '世界人口总量',  
  29.                             subtext: '数据来自网络'  
  30.                         },  
  31.                         tooltip : {  
  32.                             trigger: 'axis'  
  33.                         },  
  34.                         legend: {  
  35.                             data:['2011年', '2012年']  
  36.                         },  
  37.                         toolbox: {  
  38.                             show : true,  
  39.                             feature : {  
  40.                                 mark : {show: true},  
  41.                                 dataView : {show: true, readOnly: false},  
  42.                                 magicType: {show: true, type: ['line', 'bar']},  
  43.                                 restore : {show: true},  
  44.                                 saveAsImage : {show: true}  
  45.                             }  
  46.                         },  
  47.                         calculable : true,  
  48.                         xAxis : [  
  49.                             {  
  50.                                 type : 'value',  
  51.                                 boundaryGap : [0, 0.01]  
  52.                             }  
  53.                         ],  
  54.                         yAxis : [  
  55.                             {  
  56.                                 type : 'category',  
  57.                                 data : ['巴西','印尼','美国','印度','中国','世界人口(万)']  
  58.                             }  
  59.                         ],  
  60.                         series : [  
  61.                             {  
  62.                                 name:'2011年',  
  63.                                 type:'bar',  
  64.                                 data:[18203, 23489, 29034, 104970, 131744, 630230]  
  65.                             },  
  66.                             {  
  67.                                 name:'2012年',  
  68.                                 type:'bar',  
  69.                                 data:[19325, 23438, 31000, 121594, 134141, 681807]  
  70.                             }  
  71.                         ]  
  72.                     }  
  73.                     myChart.setOption(option);  
  74.                 }  
  75.         );  
  76.     </script>  
  77. </body>  
  78. </html>  

标签式单文件引入

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <title>IOS使用Charts</title>  
  7.       
  8. </head>  
  9. <body>  
  10.     <div id="main" class="main" style="height:400px;" ></div>  
  11.     <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>  
  12.     <script type="text/javascript">  
  13.         var myChart = echarts.init(document.getElementById('main'));  
  14.         myChart.showLoading({//用来在加载网络数据时显示  
  15.             text: '正在努力的读取数据中...',    //loading话术  
  16.         });  
  17.         var option = {  
  18.             title : {  
  19.                 text: '世界人口总量',  
  20.                 subtext: '数据来自网络'  
  21.             },  
  22.             tooltip : {  
  23.                 trigger: 'axis'  
  24.             },  
  25.             legend: {  
  26.                 data:['2011年', '2012年']  
  27.             },  
  28.             toolbox: {  
  29.                 show : true,  
  30.                 feature : {  
  31.                     mark : {show: true},  
  32.                     dataView : {show: true, readOnly: false},  
  33.                     magicType: {show: true, type: ['line', 'bar']},  
  34.                     restore : {show: true},  
  35.                     saveAsImage : {show: true}  
  36.                 }  
  37.             },  
  38.             calculable : true,  
  39.             xAxis : [  
  40.                 {  
  41.                     type : 'value',  
  42.                     boundaryGap : [0, 0.01]  
  43.                 }  
  44.             ],  
  45.             yAxis : [  
  46.                 {  
  47.                     type : 'category',  
  48.                     data : ['巴西','印尼','美国','印度','中国','世界人口(万)']  
  49.                 }  
  50.             ],  
  51.             series : [  
  52.                 {  
  53.                     name:'2011年',  
  54.                     type:'bar',  
  55.                     data:[18203, 23489, 29034, 104970, 131744, 630230]  
  56.                 },  
  57.                 {  
  58.                     name:'2012年',  
  59.                     type:'bar',  
  60.                     data:[19325, 23438, 31000, 121594, 134141, 681807]  
  61.                 }  
  62.             ]  
  63.         }  
  64.         myChart.setOption(option);  
  65.         myChart.hideLoading();//实际请求结束后调用  
  66.     </script>  
  67. </body>  
  68. </html>  

注意：

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


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

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 爽行天下丶 > 《iOS》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多