IOS使用Charts

来源：互联网发布：域名虚拟主机哪家好编辑：程序博客网时间：2024/05/21 08:00

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

0 0