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

矫情吗；* 2022-10-06 07:54 197阅读 0赞

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

![acea634a7251acbc15abb6dffdb08030.gif][]

[acea634a7251acbc15abb6dffdb08030.gif]: /images/20221005/eddc21deb80842b4a122d437b192d88d.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html如何绑定radio控件和label控件

相关 aspx html 控件,ASP.NET - 服务器控件

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

相关 html/js调用ocx控件（activex控件），不能加载，不能使用的原因

相关 Web控件和HTML控件

相关 html_控件二

相关 html_控件一

相关 HTML5新控件 - 日期和时间选择输入

相关 pyqt5-复合控件中的子控件

相关 HTML input time calendar 控件