上位机编写之aardio调用html5图表控件

上次说到现在html5技术已经很普及了,各种图形和图表都可以实现.

推荐了百度的图表js , 百度搜:百度图表

里面各种波形图样式,饼状图,等等等超多种类

blob.png

blob.png

这些都太精美了. 上位机上面要是用到估计软件能上个档次了...


那么应该如何实现呢?

aardio中新建功能,选择webkit网页形式.

将下载到的百度图表的js文件放到相应的js文件夹中,修改main.html文件内容如下:

首先打开刚才创建的工程文件目录:

blob.png

html文件夹里面放好相应的js文件之后,用代码编辑器打开main.html文件

写入内容如下:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="js/echarts.min.js"></script>
<style type="text/css">
#main {  height:100% ; width:100%; position:absolute;}
body {  margin:0px; padding:0px; overflow:hidden;}
</style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main"></div>

</body>
</html>

意思一路了然,就是弄了个全屏的div,准备里面放图表用.

然后就是在aardio软件打开代码视图,将里面的代码更改为:

import win.ui;
/*DSG{{*/
var winform = win.form(text="webkit浏览器支持库";right=858;bottom=420;border="dialog frame")
winform.add(
button={cls="button";text="button";left=608;top=291;right=824;bottom=362;z=2};
custom={cls="custom";text="custom";left=47;top=41;right=582;bottom=370;autosize=1;center=1;edge=1;transparent=1;z=1}
)
/*}}*/

//导入webkit支持库
import web.kit.form;
import web.kit.jsFunction;
import web.kit.fileSystem; //支持嵌入资源文件


//创建webkit浏览器窗口
var webkit = web.kit.form(winform.custom);

webkit.go("\html\main.html");
webkit.wait() 
var js = /* 
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},

            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 100, 100, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    */

webkit.doScript(js);




winform.button.oncommand = function(id,event){
//winform.msgbox( winform.button.text );
var jschange = /* 

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},

            series: [{
                name: '销量',
                type: 'bar',
                data: [100, 100, 100, 100, 100, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    */
    webkit.doScript(jschange);

}





//添加可拖动边框
import win.ui.resizeBorder;
win.ui.resizeBorder(winform);

//添加阴影
import win.ui.shadow;
win.ui.shadow(winform);

//限定最大化范围
import win.ui.minmax;
win.ui.minmax(winform);

winform.show();
win.loopMessage();

上面注释的很清楚了.就是调用了js代码,第一个js代码里面的代码是怎么来的呢?

这个是直接复制进去的,代码百度已经提供了.

地址就是:http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

这个百度五分钟教程里面的代码,我一个字都没改!!!!

怎么样?够简单了吧!

下面的代码就是我增加了个按钮,按钮里面写了 个js,js里面是更新数据用的.

嗯,结束

blob.png

已邀请:

admin

赞同来自:

用这中的好处是:只需要改一个单词,就可以变化图表的样式,下面将bar改成了line,里面就变成了线状波形图

blob.png

admin

赞同来自:

上面的折线图中,不是圆滑过渡,需要平滑过渡的话,添加一个smooth: true,

winform.button.oncommand = function(id,event){
    //winform.msgbox( winform.button.text );
    var jschange = /* 
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
 
            series: [{
                name: '销量',
                type: 'line',
                smooth: true,
                data: [10, 100, 83, 36, 100, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    */
    webkit.doScript(jschange);
     
}

blob.png

admin

赞同来自:

刚才又去找了几个示例试了试.基本上可以肯定一个流程:

每次加载数据js用下面的模板:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="js/echarts.min.js"></script>
<style type="text/css">
#main {  height:100% ; width:100%; position:absolute;}
body {  margin:0px; padding:0px; overflow:hidden;}
</style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main"></div>

<script type="text/javascript">

// 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
//-----------------------------------
//这里写入百度提供的数据代码//
//-----------------------------------

// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
</body>
</html>

上面提到的百度提供的数据示例代码再这里查看:

blob.png

直接将左侧提供的代码复制到上面指示的地方,运行就能看到效果了.

admin

赞同来自:

记录:想直接用doscript来运行js, 必须用双引号引出代码:


mainForm.button21.oncommand = function(id,event){
//mainForm.msgbox( mainForm.button21.text );
/**
   var jschange = /* 
 
        // 指定图表的配置项和数据
        var option = {

            series: [{
       
                data: [1000, 130, 813, 346, 10, 230,110, 100, 83, 36, 100, 20,155,182,146,85,342]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    */
**/

例如上面的js代码,就需要

    webkit.doScript(" 
 
        // 指定图表的配置项和数据
        var option = {

            series: [{
       
                data: [1000, 130, 813, 346, 10, 230,110, 100, 83, 36, 100, 20,155,182,146,85,342]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    ");

}

这样引用才行.

admin

赞同来自:

定时器的用法:


mainForm.button19.oncommand = function(id,event){
//mainForm.msgbox( mainForm.button19.text );
mainForm.button19.disabled = true;//防止多次触发


tmid = mainForm.addtimer(
1/*毫秒*/,
function(hwnd,msg,id,tick){//定时执行代码
mainForm.settimer(tmid,-1);//暂停定时器,等待下方程序运行完在开启
var buf = raw.malloc(1000, 0);
var len = 100;
var Rxlength = Usbhidapi.Hidapi_read_timeout(Hiddevice, buf, len,10);//这里用了超时读取方式,这种方式有等待有数据读出才退出,符合要求
if(Rxlength == -1){
console.log("读取失败!")
}else {
console.log("读取成功!!读取长度为:",Rxlength,'\n读取到:' /*,raw.tostring(databuf)*/);
//console.log(raw.tostring(databuf, 1, Rxlength));
if(Rxlength == 0){
 return 1;//没数据退出,重新定时1ms
}
var str = "";
//str = Aiscii(buf,Rxlength);
str = Hex(buf,Rxlength);
mainForm.Rxdata.add(str);
console.log(str);

}
return 1; //重新定时1ms




//mainForm.killtimer(id)//移除此定时器
//mainForm.settimer(id,2000)//重新设定时间间隔
})


}

mainForm.button20.oncommand = function(id,event){
//mainForm.msgbox( mainForm.button20.text );
mainForm.settimer(tmid,-1);//暂停定时
mainForm.button19.disabled = false;//使能上面的按钮
}


admin

赞同来自:

listbox添加数据后,滚动条显示在底部:

//listbox的滚动条显示最下方,消息方式
mainForm.Rxdata.scrollToBottom = function () {

    return ::SendMessageInt(owner.hwnd, 0x115/*_WM_VSCROLL*/, 0x7/*_SB_BOTTOM*/, 0);

}

调用方式:

mainForm.button8.oncommand = function(id,event){
//mainForm.msgbox( mainForm.button8.text );
var buf = raw.malloc(1000, 0);
var len,ms = 100,1000;
var Rxlength = Usbhidapi.Hidapi_read_timeout(Hiddevice, buf, len, ms);
if(Rxlength == -1){
console.log("读取失败!")
}else {
console.log("读取成功!!读取长度为:",Rxlength,'\n读取到:' /*,raw.tostring(databuf)*/);
//console.log(raw.tostring(databuf, 1, Rxlength));
if(Rxlength == 0){
return; //没数据退出
}
var str = "";
//str = Aiscii(buf,Rxlength);
str = Hex(buf,Rxlength);
mainForm.Rxdata.add(str);
mainForm.Rxdata.scrollToBottom();//显示到底部
console.log(str);
}

}


admin

赞同来自:

listbox,横向滚动条显示不出来

首先在窗体设计器 中 点击listbox控件,在属性面板中设置水平滚动条为true( 启用 )
然后切换到代码视图,添加下面的代码:

::SendMessageInt( winform.listbox.hwnd,0x194/*_LB_SETHORIZONTALEXTENT*/,500,0)


admin

赞同来自:

listbox读取某一行的值

console.log(mainForm.Rxdata.getItemText(1));//从1开始的

读取所有的值

 for(i=1;winform.listbox.count;1){
        winform.edit.text=winform.listbox.getItemText(i)
        }//取listbox内容

另外一种读取所有的值

console.log(table.tostring( mainForm.Rxdata.items ))


admin

赞同来自:


//创建webkit浏览器窗口

var webkit = web.kit.form(mainForm.custom);

webkit.go("\html\main.html");


webkit.wait()

var js = /* 

        // 基于准备好的dom,初始化echarts实例

       // var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var data = [];

        var option = {

            title: {

                text: 'AD采集数据'

            },

        tooltip: {

        trigger: 'axis',

        axisPointer: {

            animation: false

        }

    },

            legend: {

                data:['AD值']

            },

            xAxis: {

                position:'top',

        data: []

            },

            yAxis: {

            min: 'dataMax',

            axisLabel: {

            formatter: '{value} dBm'

            },

           

             

            },

            dataZoom: [

            {   // 这个dataZoom组件,默认控制x轴。

            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件

            start: 10,      // 左边在 10% 的位置。

            end: 60         // 右边在 60% 的位置。

            },

        {   // 这个dataZoom组件,也控制x轴。

            type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件

            start: 10,      // 左边在 10% 的位置。

            end: 60         // 右边在 60% 的位置。

        }],

            series: [{

                name: 'AD值',

                type: 'line',

                smooth: true,

                 markPoint: {

                data: [

                    {type: 'max', name: '最大值'},

                    {type: 'min', name: '最小值'}

                ]

            },

            markLine: {

                data: [

                    {type: 'average', name: '平均值'}

                ]

              },  

                animationDelay: function (idx) {

            return idx * 10;

            },

                data:[10, 100, 83, 36, 100, 20,10]

            }]

        };

 

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

 

    */

 

webkit.doScript(js);


admin

赞同来自:

利用分层窗体和百度图标创建一个加载百分比图形:


GIF.gif

主界面代码如下:

import win.ui;
/*DSG{{*/
var winform = win.form(text="webkit浏览器支持库";right=300;bottom=300;border="none";mode="popup")
winform.add()
/*}}*/

winform.wndproc = function(hwnd,message,wParam,lParam){
select( message ) { 
case 0x201/*_WM_LBUTTONDOWN*/{
//鼠标右键弹起,下面获取坐标
winform.hitCaption();

}
else{

}
}
//无返回值则继续调用默认回调函数
}

//导入webkit支持库
import web.kit.form;
import web.kit.jsFunction;
import web.kit.fileSystem; //支持嵌入资源文件
import web.kit.layeredWindow; //创建分层窗体
 
//创建webkit浏览器窗口
var webkit = web.kit.layeredWindow(winform);
 
webkit.go("\html\main.html");
webkit.wait() 

var num = 0.0;
var xxx1 = "var myChart = echarts.init(document.getElementById('main'));";
var xxx2 = " var option = {
    series: [{
        type: 'liquidFill',
        data: [";
var xxx3 = "],
        radius: '95%'
    }]
}; myChart.setOption(option);";
webkit.doScript(xxx1++xxx2++num++xxx3);
 
tmid = winform.addtimer(
50/*毫秒*/,
function(hwnd,msg,id,tick){//定时执行代码
if(num >= 0.9){
winform.settimer(id,-1) //暂停
winform.killtimer(id) //移除
}
else {
num = num + 0.01;
webkit.doScript(xxx1++xxx2++num++xxx3);
}
}
);

winform.transparent(true);

//限定最大化范围
import win.ui.minmax;
win.ui.minmax(winform);
 
winform.show();
win.loopMessage();

所需要的html页面代码如下:

注意这里的波浪形状需要另外一个js插件支持

http://echarts.baidu.com/resource/echarts-liquidfill-1.0.4/dist/echarts-liquidfill.js

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="echarts.min.js"></script>
<script src="echarts-liquidfill.js"></script>
<style type="text/css">
#main {  height:100% ; width:100%; position:absolute;}
body {  margin:0px; padding:0px; overflow:hidden;}
</style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main"></div>
 
</body>
</html>

整体文件结构如下:

blob.png

admin

赞同来自:

接上面的那个水波波形百分比,我发现水波荡漾的速度太慢,

blob.png

打开下载的那个js文件的1050行,把这个speed从默认的5000设置为1000或者500,变小就可以了

走的速度就会加快

admin

赞同来自:

使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表

<script type='text/javascript' src='js/jquery-1.3.2.js'></script>  
<script type='text/javascript' src='js/highcharts.js'></script>  
<script type='text/javascript'>  
    //<![CDATA[   
    $(function(){  
                 //声明报表对象  
        var chart = new Highcharts.Chart({  
            chart: {  
                //将报表对象渲染到层上  
            renderTo: 'container'  
        },  
                //设定报表对象的初始数据  
        series: [{  
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]          
        }]  
    });  
  
        function getForm(){  
                                                //使用JQuery从后台获取JSON格式的数据  
            jQuery.getJSON('http://localhost:8080/JQueryPIC/ajax', null, function(data) {  
                                                                //为图表设置值  
                chart.series[0].setData(data);  
            });  
        }  
  
      
        $(document).ready(function() {  
            //每隔3秒自动调用方法,实现图表的实时更新  
            window.setInterval(getForm,3000);   
              
        });  
      
  
    });  
    //]]>   
    </script> 
    <body>  
    <div id="container" style="height: 400px"></div>  
    </body>


Rick

赞同来自:

有意思

admin

赞同来自:

要想要实现echart与aar软件数据动态交互,需要特别注意两点:

  1. 波形的X轴和Y轴数据都需要,要不然的话,你只是增加(push)和删除(shift)Y轴数据的话,波形在更新的时候会整个界面更新(更新的时候整个界面闪动然后重绘了波形),这是因为你的x轴数据每更新,图表认为你只是更新了每个x轴坐标的数据,并不是删除了数据

  2. 交互的话,需要用到external函数,类似web里面的使用方法

如下是利用aar的webkit组件加载html界面,并定义两个供js数据交互的aar函数

//导入webkit支持库
import web.kit.form;
import web.kit.jsFunction;
var wbKitView = web.kit.form(mainForm.custom);//创建webkit浏览器窗口

import wsock.tcp.simpleHttpServer;
wbKitView.go( wsock.tcp.simpleHttpServer.startUrl("/html/main.aardio") ); 
var i = 1;
wbKitView.external = {
getData = function(  ){

return math.random(10, 17);
}
gettime = function(){
i++;
return i; 
}

};
wbKitView.wait();//等待html加载完毕,要不然不能调用js

上面函数的意思:getdata是获取一个随机10-17之间的数给Y轴做数据用,gettime是获取一个自加的数用来给x轴坐标用

紧接着:是创建一个echart的js调用

var js = /* 
        // 基于准备好的dom,初始化echarts实例
       // var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var data = [];//给Y轴数据使用
        var time = [];//给X轴坐标用
        for (var i = 0; i < 100; i++) {//初始化100个数据,来显示完整的图表先
     data.push(external.getData());
     time.push(external.gettime())
}
        var option = {
            title: {
                text: 'AD采集数据'
            },
         tooltip: {
         trigger: 'axis',
                 axisPointer: {
            animation: false
        }
     },
    
            legend: {
                data:['C滑动滤波']
            },
            toolbox: {
            show:true,
        
         feature: {
         dataZoom: {
                 yAxisIndex: 'none'
             },
             magicType: {
                 type: ['line', 'bar']
             }
         }
     },
            xAxis: {
           //type: 'value',
           data:time,//把刚才初始化的time数据定义给x轴
               // position:'top',
         splitLine: {
            show: false
        }
            },
            yAxis: {
                     type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
     
            },
           
            series: [
            
{
                 name: 'C滑动滤波',
                 type: 'line',
                 smooth: true,
                 showSymbol: false,
                  hoverAnimation: false,
                 data:data  //把刚才定义的Y轴数据给Y轴用
             }
            ]
            
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    */
 
wbKitView.doScript(js);//运行js

上面就初始化完成了echart图表的配置了。后面使用的时候只需要修改里面的数据就可以了。

mainForm.button4.oncommand = function(id,event){
//利用js的定时器动态更新波形
var jss = /* 
//myChart.hideLoading();//如果开启了加载动画,则隐藏加载动画
setInterval(function () {//这个是js方法的定时器函数

     time.shift();//time这个数据左边第一个数据移除(X轴坐标)
     data.shift();//data这个数据左边第一个数据移除(Y轴数据)
         data.push(external.getData());//获取一个外部数据然后加到data的最后一位
         time.push(external.gettime());//获取一个外部数据加到time的最后一位
         option.series[0].data= data;//将这个data数据赋给series[0]的data值
             option.xAxis.data = time;//将这个time数据赋给xAxis变量的data值

     myChart.setOption(option);//重新配置和加载echart
}, 100);//定时100ms
*/
wbKitView.doScript(jss);//执行
}
mainForm.button7.oncommand = function(id,event){
//利用aar的按钮功能,清空echart的波形和数据
//mainForm.msgbox( mainForm.button7.text );
var jss = /* 
// myChart.clear();//不能使用此函数,它的功能是清空echart组件,即整个界面都没东西了
data = [];//清空Y轴data数据
time = [];//清空x轴time数据
option.series[0].data= data;
     option.xAxis.data = time;
     myChart.setOption(option);
*/
wbKitView.doScript(jss);

}
mainForm.button5.oncommand = function(id,event){
//利用aar的定时器动态加载数据
tmid = mainForm.addtimer(
100/*毫秒*/,
function(hwnd,msg,id,tick){//定时执行代码

var jss = /* 
time.shift();
     data.shift();
         data.push(external.getData());
         time.push(external.gettime());
         option.series[0].data= data;
     option.xAxis.data = time;
       // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
*/

wbKitView.doScript(jss);
}
);

}
mainForm.button6.oncommand = function(id,event){

mainForm.settimer(tmid,-1);//暂停aar定时器
}

GIF.gif

admin

赞同来自:

上面的利用aar的定时器动态加载数据这个貌似有点问题:

本来图形应该是可以随意切换直方图和曲线图的,但是上面的会导致一直显示曲线图,直方图一闪就消失了。。

究其原因是因为我们用的是

                        option.series[0].data= data;
     option.xAxis.data = time;
       // 使用刚指定的配置项和数据显示图表。

  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

这个option我们模式配置是曲线图,所以当你点击直方图切换的时候,程序再次调用option配置,就又变成曲线图了。

那么我们应该怎么办??

mainForm.button5.oncommand = function(id,event){

tmid = mainForm.addtimer(
100/*毫秒*/,
function(hwnd,msg,id,tick){//定时执行代码

var jss = /* 

time.shift();
     data.shift();
         data.push(external.getData());
         time.push(external.gettime());

      option = {
       xAxis: {
           data:time,
             },
       series: [{
                 data:data  //把刚才定义的Y轴数据给Y轴用
              }]
      };
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      
        
*/
wbKitView.doScript(jss);
}
);

}

这样操作就ok了,相当于我们只是重新配置了数据,而没有去更改其他被认为点击事件修改过的东西,这样就可以来回切换直方图和曲线图了。

GIF.gif

Harold_Wang

赞同来自:

有源码不?

pigeep

赞同来自:

这个还真挺漂亮的

evyhui

赞同来自:

使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表 这个是咋个弄的呢? echarts 有没有后台获取json格式实时刷新的呢?

爱哭的热带鱼

赞同来自:

好i东西,照着做一下,学习学习

TTfox

赞同来自:

import win.ui;

/*DSG{{*/

var winform = win.form(text="webkit浏览器支持库";right=858;bottom=420;border="dialog frame")

winform.add(

button={cls="button";text="更新数据";left=713;top=335;right=816;bottom=377;z=2};

button2={cls="button";text="清空数据";left=712;top=276;right=815;bottom=318;z=3};

button3={cls="button";text="加载数据";left=711;top=213;right=814;bottom=255;z=4};

button4={cls="button";text="停止加载";left=712;top=152;right=815;bottom=194;z=5};

custom={cls="custom";text="custom";left=12;top=9;right=678;bottom=411;autosize=1;center=1;edge=1;transparent=1;z=1}

)

/*}}*/


//导入webkit支持库

import web.kit;

import web.kit.fileSystem; //支持嵌入资源文件

import web.kit.form;


 

//创建webkit浏览器窗口

var webkit = web.kit.form(winform.custom);

webkit.go("\web\index.html");

var i=1;

webkit.external = {

    getData = function(  ){  

        return math.random(10, 30);

    }

    gettime = function(){

i++;

        return i; 

    }

}

webkit.wait()

var js = /* 

        // 基于准备好的dom,初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var dd = [];//给Y轴数据使用

        var dt = [];

        var time = [];//给X轴坐标用

        for (var i = 0; i < 130; i++) {//初始化100个数据,来显示完整的图表先

            dd.push(external.getData());

            dt.push(external.getData());

            time.push(external.gettime())

        }

        var option;

option = {

    color: ['#5b9bd5', '#ed7d31'],

    backgroundColor: '#FFF',

     title: {

     text: '测试曲线图',

     left: 'center',

     top:'-2',

     textStyle:{

     fontSize:14    

     }

   },

        grid: {

        top: 20,

        bottom: 100,

        left: '12%',

        right: '2%'

    },

    tooltip: {

    trigger: 'axis',

    axisPointer: {

      animation: false

    }

  },

    legend: {

        bottom: '40',

        itemWidth: 30,

        itemHeight: 6,

        data: ['逐月总逆温日', '逐月PM2.5浓度']

    },

    toolbox: {

    show:true,

    feature: {

      dataZoom: {

        yAxisIndex: 'none'

      },

      restore: {}

    }

  },

  dataZoom: [

    {

      show: true,

      realtime: true,

      start: 0,

      end: 100,

      xAxisIndex: [0, 1]

    },

    {

      type: 'inside',

      realtime: true,

      start: 0,

      end: 100,

      xAxisIndex: [0, 1]

    }

  ],

    xAxis: [{

        name: '城市',

        nameLocation: 'center',

        nameGap: 25,

        axisLine: {

            show: false,

            onZero: true,

        },

        axisTick: {

            show: false

        },

        axisLabel: {

            rotate: 50

        },

        splitLine: {

            show: true,

            lineStyle: {

                color: '#CCC'

            }

        },

        data:time,

    }],

    yAxis: [{


        name: '地面风速(m/s)',

        nameLocation: 'center',

        nameGap: 40,

        nameTextStyle: {

            color: '#000'

        },

        type: 'value',

        boundaryGap: [0, '10%'],

        axisLine: {

            lineStyle: {

                color: '#CCC'

            },

        },

        axisTick: {

            show: false

        },

        splitLine: {

            show: true,

            lineStyle: {

                color: '#CCC'

            }

        },

        axisLabel: {

            color: '#000'

        }

    }],

    series: [{

            name: '逐月总逆温日',

            type: 'line',

            symbol: 'none',

            smooth: 0.6,

            itemStyle: {

                color: '#5b9bd5',

                borderColor: '#5b9bd5',

                borderWidth: 4

            },

            lineStyle: {

                width: 2

            },

            data: dd    

        },

        {

            name: '逐月PM2.5浓度',

            type: 'line',

            symbol: 'none',

            smooth: 0.6,

            itemStyle: {

                color: '#ed7d31',

                borderColor: '#ed7d31',

                borderWidth: 4

            },

            lineStyle: {

                width: 2

            },

            data: dt

        }

    ], 

};

 

        // 使用刚指定的配置项和数据显示图表。

      option && myChart.setOption(option);

 

    */

 

webkit.doScript(js);

 

winform.button.oncommand = function(id,event){

//利用js的定时器动态更新波形

var js = /* 

        setInterval(function () { //这个是js方法的定时器函数   

                time.shift();//time这个数据左边第一个数据移除(X轴坐标)

                dd.shift();//data这个数据左边第一个数据移除(Y轴数据)

                dt.shift();//data这个数据左边第一个数据移除(Y轴数据)

                dd.push(external.getData());//获取一个外部数据然后加到data的最后一位

                dt.push(external.getData());//获取一个外部数据然后加到data的最后一位

                time.push(external.gettime());//获取一个外部数据加到time的最后一位

                option.series[0].data= dd;//将这个data数据赋给series[0]的data值

                option.series[1].data= dt;//将这个data数据赋给series[0]的data值

                option.xAxis.data = time;//将这个time数据赋给xAxis变量的data值

      

                myChart.setOption(option);//重新配置和加载echart

        }, 100);//定时100ms

        */

        webkit.doScript(js);//执行

}


winform.button2.oncommand = function(id,event){

//利用aar的按钮功能,清空echart的波形和数据

    //mainForm.msgbox( mainForm.button7.text );

    var js = /* 

    //  myChart.clear();//不能使用此函数,它的功能是清空echart组件,即整个界面都没东西了

    dd = [];//清空Y轴data数据

    dt = [];//清空Y轴data数据

    time = [];//清空x轴time数据

    option.series[0].data= dd;

    option.series[0].data= dt;

    option.xAxis.data = time;

    myChart.setOption(option); 

        */

    webkit.doScript(js);

}


winform.button3.oncommand = function(id,event){

tmid = winform.addtimer(

        100/*毫秒*/,

        function(hwnd,msg,id,tick){//定时执行代码

              

            var js = /* 

            time.shift();

            dd.shift();

            dt.shift();

            dd.push(external.getData());

            dt.push(external.getData());

            time.push(external.gettime());

            option.series[0].data= dd;

            option.series[1].data= dt;

            option.xAxis.data = time;

               // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option);

            */     

            webkit.doScript(js);

        }

    );

}


winform.button4.oncommand = function(id,event){

winform.settimer(tmid,-1);//暂停aar定时器

}


winform.show();

win.loopMessage();

return winform;



harvardx

赞同来自:

哪位高手有源码啊   学习用 太合适了  

要回复问题请先登录注册