首先是x，y，z轴的加速度统计，利用四个数组记录，并长度为偶数时生成图表

var x=[];

var y=[];

var z=[];

var t=[];
document.addEventListener( "plusready", function(){

    // 扩展API加载完毕，现在可以正常调用扩展API

    var acc = document.getElementById("acc");

    plus.accelerometer.watchAcceleration( function ( a ) {

        x.push(a.xAxis);

        y.push(a.yAxis);

        z.push(a.zAxis);

        t.push(x.length);

        acc.innerText =  "x:" + a.xAxis + "\ny:" + a.yAxis + "\nz:" + a.zAxis+"\n"+x.length;

        if(x.length%2==0){

            line();

        }

    }, function ( e ) {

        alert( "Acceleration error: " + e.message );

    }, {frequency:1000} ); // 设置更新间隔时间为1s

    }, false );

上面的全代码

<script type="text/javascript">

    var x=[];

    var y=[];

    var z=[];

    var t=[];

    var line = function(){

        var dom = document.getElementById("main");

        var myChart = echarts.init(dom);

        option = {

        tooltip: {

            trigger: 'item',

            formatter: '{a} <br/>{b} : {c}'

        },

        xAxis: {

            type: 'category',

            name: 'x',

            splitLine: {show: false},

            data: t

        },

        grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true

        },

        yAxis: {

        },

        series: [

            {

                name: 'x',

                type: 'line',

                data: x

            },

            {

                name: 'y',

                type: 'line',

                data: y

            },

            {

                name: 'z',

                type: 'line',

                data: z

            }

        ]

    };

    myChart.setOption(option, true);

    };

    document.addEventListener( "plusready", function(){

    // 扩展API加载完毕，现在可以正常调用扩展API

    var acc = document.getElementById("acc");

    plus.accelerometer.watchAcceleration( function ( a ) {

        x.push(a.xAxis);

        y.push(a.yAxis);

        z.push(a.zAxis);

        t.push(x.length);

        acc.innerText =  "x:" + a.xAxis + "\ny:" + a.yAxis + "\nz:" + a.zAxis+"\n"+x.length;

        if(x.length%2==0){

            line();

        }

    }, function ( e ) {

        alert( "Acceleration error: " + e.message );

    }, {frequency:1000} ); // 设置更新间隔时间为1s

    }, false );

    </script>
<head>

    <meta charset="utf-8"/>

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <title>Accelerometer Example</title>

    <script src="js/echarts.min.js"></script>

    </head>

    <body>

        Acceleration:<br/>

        <p id="acc"></p>

        <div id="main" style="width: 350px;height:300px;"></div>

    </body>

    <script>

            document.addEventListener("plusready", function() {

                // 注册返回按键事件

                plus.key.addEventListener('backbutton', function() {

                    // 事件处理

                    window.history.back();

                }, false);

            });

    </script>

echart与Accelerometer综合的更多相关文章

  1. php与MySQL与echart综合使用

    http://www.yinghualuowu.com/php/echart.html 创建table sex 有name num             <?php ini_set('disp ...

  2. AEAI DP V3.6.0 升级说明，开源综合应用开发平台

    AEAI DP综合应用开发平台是一款扩展开发工具,专门用于开发MIS类的Java Web应用,本次发版的AEAI DP_v3.6.0版本为AEAI DP _v3.5.0版本的升级版本,该产品现已开源并 ...

  3. EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象

    最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...

  4. H5+JS+CSS3 综合应用

    慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...

  5. EChart使用

    EChart ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等 ...

  6. [教程] [授权翻译] 使用补丁修改DSDT/SSDT [DSDT/SSDT综合教程]

    [教程] [授权翻译] 使用补丁修改DSDT/SSDT [DSDT/SSDT综合教程] http://bbs.pcbeta.com/viewthread-1571455-1-1.html [教程] [ ...

  7. 网站中使用echart

    在网站开发中,可能会使用折线图,圆饼图,等等 来丰富网页对数据的展示,可以使用echart http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E ...

  8. iOS--知识综合应用成就时髦小功能点

    iOS--知识综合应用成就时髦小功能点

  9. WebGIS中利用AGS JS+eChart实现一些数据展示的探索

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...

随机推荐

  1. 2017-2018-1 20179215《Linux内核原理与分析》第七周作业

    一.实验部分:分析Linux内核创建一个新进程的过程. [第一部分] 根据要求完成第一部分,步骤如下: 1. 首先进入虚拟机,打开终端,这命令行依次敲入以下命令: cd LinuxKernel    ...

  2. ACM学习历程—广东工业大学2016校赛决赛－网络赛D 二叉树的中序遍历(数据结构)

    题目链接:http://gdutcode.sinaapp.com/problem.php?cid=1031&pid=3 这算是一个胡搞类型的题目.当然肯定是有其数据结构支撑的. 唯一的限制就是 ...

  3. ACM学习历程—UESTC 1226 Huatuo's Medicine（数学）(2015CCPC L)

    题目链接:http://acm.uestc.edu.cn/#/problem/show/1226 题目就是构造一个对称的串,除了中间的那个只有1个,其余的两边都是对称的两个,自然答案就是2*n-1. ...

  4. 【LeetCode】023. Merge k Sorted Lists

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 题 ...

  5. 洛谷 4178 Tree——点分治

    题目:https://www.luogu.org/problemnew/show/P4178 点分治.如果把每次的 dis 和 K-dis 都离散化,用树状数组找,是O(n*logn*logn),会T ...

  6. docker数据卷(volume)

    1.什么是数据卷volume https://blog.csdn.net/dream_broken/article/details/52314993 为了了解什么是Docker Volume,首先我们 ...

  7. VS2008中_T的作用

    引用: VC++里面定义字符串的时候,用_T来保证兼容性.VC++支持ascii和unicode两种字符类型,用_T可以保证从ascii编码类型转换到unicode编码类型的时候,程序不需要修改. 如 ...

  8. MongoDB分析工具之一：explain()语句分析工具

    explain(),语句分析工具 MongoDB 3.0之后,explain的返回与使用方法与之前版本有了很大的变化,介于3.0之后的优秀特色和我们目前所使用给的是3.0.7版本,本文仅针对Mongo ...

  9. get and set

    (function () { function Student(name, age, gender) { this._name = name; this._age = age; this._gende ...

  10. linux命令-rpm查询包

    安装了哪些rpm包呢 [root@wangshaojun Packages]# rpm -qa /////查看全部安装的包 [root@wangshaojun Packages]# rpm -qa l ...