客户端页签控件用法
使用说明 2019-12-27 add by: liang
>
function init_web()
local sHtml = [[<html><head><meta charset="utf-8">
<script src="qrc:/resource/echarts.js"></script>
<script src="qrc:/resource/qwebchannel.js"></script></head>
<body><div id="main" style="width:100%;height:100%;"></div><script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var optionLine = {
title: {
show:true,
text: ''
},
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
itemSize:20,
itemGap:25,
top:'-6px',
right:'2%',
showTitle:false,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
dataView: {}
}
},
legend: {
show:false,
data:['工艺数据']
},
grid: {
top:'40px',
left: '0%',
right: '1%',
bottom: '0%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true,
data: Array()
},
yAxis: {
type: 'value',
min: function(value) {
return (value.min - (value.max-value.min)/ 10 * 2).toFixed(2);
},
max: function(value) {
return (value.max + (value.max-value.min)/ 10 * 2).toFixed(2);
}
},
series: [
{
name:'',
type:'line',
symbol:'circle',
data:Array(),
label:{
normal:{
show:true
}
}
},
{
name:'上下限',
type:'line',
show:false,
data:Array(),
markLine:
{
label:{
normal:{
position:'middle',
formatter: '{b}: {c}'
}
},
lineStyle:
{
normal:
{
color:'#fd8f26',
width:2
}
},
data:[{name: '上限',yAxis: -999},{name: '下限',yAxis: -999}]
}
}
]
};
myChart.setOption(optionLine, true);
window.onresize = myChart.resize;
function fromItStrig(itStr)
{
var strs = itStr.split(String.fromCharCode(2));
if (strs.length != 2)
return null;
var keys = strs[0].split(String.fromCharCode(1));
var values = strs[1].split(String.fromCharCode(1));
if (keys.length != values.length)
return null;
var map = {};
var sTmp = '';
for (i=0;i<keys.length ;i++ )
{
sTmp = keys[i];
map[sTmp] = values[i];
}
return map;
}
window.onload = function()
{
new QWebChannel(qt.webChannelTransport, function(channel)
{
var pObject = channel.objects.qt_object_id;
pObject.emitSignalToWeb.connect(function(key, v1, v2)//emit对象信号函数接收,这个相当于绑定槽函数
{
if (key == 'set_value')
{
var it = fromItStrig(v1);
if (it == null)
return;
var vline = key.split(',');
optionLine.xAxis.data = it['x'].split(',')
optionLine.series[0].data = it['y'].split(',')
optionLine.title.text = it['title']
optionLine.series[0].name = it['var_name'];
optionLine.series[1].data = new Array(parseFloat(it['max_value']),parseFloat(it['min_value']));
optionLine.series[1].markLine.data[0].name = it['var_name']+'-上限'
optionLine.series[1].markLine.data[0].yAxis = parseFloat(it['max_value']).toFixed(3);
optionLine.series[1].markLine.data[1].name = it['var_name']+'-下限'
optionLine.series[1].markLine.data[1].yAxis = parseFloat(it['min_value']).toFixed(3);
myChart.setOption(optionLine, true)
}
else if (key == 'setValue')
{
optionLine.xAxis.data = Array();
optionLine.series[0].data = Array();
optionLine.series[1].markLine.data[0].yAxis = -888;
optionLine.series[1].markLine.data[1].yAxis = -999;
myChart.setOption(optionLine, true)
}
});
pObject.recvFromWeb('load_finish', '','');
});
}
</script></body></html> ]]
ui:webSetHtml('id_web', sHtml, 'file:');
end
function web_callback_event(sCid, sEventType)
if sEventType == 'load_finish' then
local it = CIntent();
ui:webSendValue('id_web', 'set_value', it:toString(), '');
end
end
init_web()
ui:setClickEvent('id_web', 'web_callback_event');