html5调用控件,调用html5图标控件之百度echarts

要想要实现echart与aar软件数据动态交互，需要特别注意两点：波形的X轴和Y轴数据都需要，要不然的话，你只是增加(push)和删除(shift)Y轴数据的话，波形在更新的时候会整个界面更新(更新的时候整个界面闪动然后重绘了波形)，这是因为你的x轴数据每更新，图表认为你只是更新了每个x轴坐标的数据，并不是删除了数据

交互的话，需要用到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 

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定时器

}