0
点赞
收藏
分享

微信扫一扫

Qt开源作品5-仪表盘交互


一、前言

Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,是本人用过的国产作品中最牛逼的,记得四五年前就在qt中使用过,当时用的浏览器控件是webkit,由于5.6以后的版本不再支持webkit,而换用webengine内核,很多人在下载使用后不能正常编译,今天特意抽空做个webengine版本,使得同时支持webkit和webengine。

在webkit中执行JS用的是webView->page()->mainFrame()->evaluateJavaScript(js);

而webengine用的是webView->page()->runJavaScript(js);

在执行效率上,webengine甩webkit好几条街,在拖动滑块动态设置值的时候,webengine的CPU占用只有1%,而webkit居然达到了7%,恐怖!怪不得webkit逐渐被qt抛弃了,webengine只是内存使用上增加了些。

二、代码思路

第一步:准备网页文件
```c++
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="height:300px;"></div>
</body>
</html>

第二步:准备JS函数

function setGaugeValue(value){
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '业务指标',
type: 'gauge',
detail: {formatter:'{value}%'},
data: [{value: value, name: '完成率'}]
}
]
};

第三步:数据交互

void Widget::on_horizontalSlider_valueChanged(int value)
{
QString js = QString("setGaugeValue(%1)").arg(value);
#ifdef webkit
webView->page()->mainFrame()->evaluateJavaScript(js);
#else
webView->page()->runJavaScript(js);
#endif
}

三、效果图

Qt开源作品5-仪表盘交互_webview

四、开源主页

  • 以上作品完整源码下载都在开源主页,会持续不断更新作品数量和质量,欢迎各位关注。
  • 本开源项目已经成功升级到V2.0版本,分门别类,图文并茂,保你爽到爆。
  • Qt开源武林秘籍开发经验,看完学完,20K起薪,没有找我!
  1. 国内站点:​​https://gitee.com/feiyangqingyun/QWidgetDemo​​
  2. 国际站点:​​https://github.com/feiyangqingyun/QWidgetDemo​​
  3. 开源秘籍:​​https://gitee.com/feiyangqingyun/qtkaifajingyan​​
  4. 知乎主页:​​https://www.zhihu.com/people/feiyangqingyun/​​


举报

相关推荐

0 条评论