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

liudianwu · 2020-4-29 09:19:28

马上注册，查看详细内容！注册请先查看：注册须知

您需要登录才可以下载或查看，没有帐号？立即注册

x

## 一、前言
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++
第一步：准备网页文件
```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函数
```c++
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: '完成率'}]
      }

  };
```

第三步：数据交互
```c++
void Widget:

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

## 三、效果图

## 四、开源主页
**以上作品完整源码下载都在开源主页，会持续不断更新作品数量和质量，欢迎各位关注。**
1. 国内站点：[https://gitee.com/feiyangqingyun/QWidgetDemo](https://gitee.com/feiyangqingyun/QWidgetDemo)
2. 国际站点：[https://github.com/feiyangqingyun/QWidgetDemo](https://github.com/feiyangqingyun/QWidgetDemo)
3. 个人主页：[https://blog.csdn.net/feiyangqingyun](https://blog.csdn.net/feiyangqingyun)
4. 知乎主页：[https://www.zhihu.com/people/feiyangqingyun/](https://www.zhihu.com/people/feiyangqingyun/)

帐号		自动登录	找回密码
密码			立即注册

账号		自动登录	找回密码
密码			立即注册