调用html5图标控件之百度echarts

By admin at 2017-12-10 • 0人收藏 • 775人看过

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

推荐了百度的图表js , 

百度搜:百度图表里面各种波形图样式,饼状图,等等等超多种类

blob.png


blob.png

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

那么应该如何实现呢?

目前有两种方式: web.kit 和web.blink , 其中貌似blink是webkit的后续升级版本.

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

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

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

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:['销量']
            },<br data-filtered="filtered">
            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里面是更新数据用的.

嗯,结束

7 个回复 | 最后更新于 2017-12-10
2017-12-10   #1

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

2017-12-10   #2

上面的折线图中,不是圆滑过渡,需要平滑过渡的话,添加一个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);
      
}


2017-12-10   #3

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

每次加载数据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>

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

2017-12-10   #4

记录:想直接用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);
    ");
     
}

这样引用才行.

2017-12-10   #5

定时器的用法:

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;//使能上面的按钮
}


2017-12-10   #6

要想要实现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定时器
}

2017-12-10   #7

上面的利用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了,相当于我们只是重新配置了数据,而没有去更改其他被认为点击事件修改过的东西,这样就可以来回切换直方图和曲线图了。

登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前在学aardio+halcon机器视觉.
Htmlayout界面在线学习文档
Sciter中文在线文档Sciter在线学习文档
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...