• 28795阅读
  • 24回复

QT编写Echart动态交互示例(仪表盘) [复制链接]

上一主题 下一主题
离线liudianwu
 

图酷模式  只看楼主 倒序阅读 楼主  发表于: 2016-05-05
— 本帖被 XChinux 执行加亮操作(2016-05-06) —
之前发过一个帖子:qt与echarts配合打造最强图表库 http://www.qtcn.org/bbs/read-htm-tid-59111.html 有很多人如何实现与图表的交互,如果用重复生成html的形式重新加载网页,很费CPU的,极不可取。
这次重新研究了下webkit与JS交互的方法,特意写了下Echart动态交互示例(仪表盘),分享下。
PS:亲测Qt4.7.0 Qt4.8.7 Qt5.4.1 Qt5.7.0。
window.open('http://www.qtcn.org/bbs/attachment/Mon_1605/44_110085_389b453aaddf546.png?28');" style="max-width:700px;max-height:700px;" onload="if(is_ie6&&this.offsetWidth>700)this.width=700;" >

代码极为简洁:
  1. #include "widget.h"
  2. #include "ui_widget.h"
  3. #include <QtWebKit>
  4. #if (QT_VERSION > QT_VERSION_CHECK(5,0,0))
  5. #include <QtWebKitWidgets>
  6. #endif
  7. Widget::Widget(QWidget *parent) :
  8.     QWidget(parent),
  9.     ui(new Ui::Widget)
  10. {
  11.     ui->setupUi(this);
  12.     ui->webView->load(QUrl(qApp->applicationDirPath() + "/gauge.html"));
  13. }
  14. Widget::~Widget()
  15. {
  16.     delete ui;
  17. }
  18. void Widget::on_horizontalSlider_valueChanged(int value)
  19. {
  20.     QString js = QString("init(%1)").arg(value);
  21.     ui->webView->page()->mainFrame()->evaluateJavaScript(js);
  22. }

  1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <style type="text/css">
  5.         html,body{height:100%;width:100%;margin:0px;padding:0px;}
  6.         #main{height:100%;width:100%;}
  7.     </style>
  8.     <script src="echarts.min.js"></script>
  9. </head>
  10. <body>    
  11.     <div id="main"></div>    
  12. </body>
  13. </html>
  14. <script type="text/javascript">        
  15.     var myChart = echarts.init(document.getElementById('main'));
  16.     function init(currentValue){
  17.         var option = {
  18.         tooltip:{formatter:"{a} <br/>{b} : {c}%"},
  19.         toolbox:{feature:{restore:{},saveAsImage:{}}},
  20.         series:[{name: '业务指标',type: 'gauge',detail: {formatter:'{value}%'},data: [{value: currentValue, name: '完成率'}]            }]};
  21.         myChart.setOption(option);
  22.     }      
  23.     window.onresize = myChart.resize ;
  24.     init(0);
  25. </script>

源码下载 EchartGauge.zip (154 K) 下载次数:1032
QT集成的webkit模块非常强大,在ARM上也可以用,与WEB结合可以做出非常好的作品。
近期完成的一个项目截图(webkit与百度地图交互):




2条评分好评度+1贡献值+1
ranzhiyandi 好评度 +1 不错,用在仪器工业设备上特好看 2016-05-09
ranzhiyandi 贡献值 +1 不错,用在仪器工业设备上特好看 2016-05-09
欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350
离线nigoole

只看该作者 1楼 发表于: 2016-05-06
有句话说得好:好好学习,天天向上。加油~~!有上船的朋友联系企鹅393320854
离线spygg

只看该作者 2楼 发表于: 2016-05-06
支持,造福大众啊,刘工威武
签名就是这么浪
离线weinkym

只看该作者 3楼 发表于: 2016-05-06
5.7 还有webkit?
离线liudianwu

只看该作者 4楼 发表于: 2016-05-06
回 weinkym 的帖子
weinkym:5.7 还有webkit? (2016-05-06 11:09) 

需要自己编译webkit模块
欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350
离线辉煌淘淘

只看该作者 5楼 发表于: 2016-05-07
很漂亮,
离线ranzhiyandi

只看该作者 6楼 发表于: 2016-05-09
不错,用在仪器工业设备上特好看
离线hades

只看该作者 7楼 发表于: 2016-05-12
请问你这webkit是用vs2013编译的吗?与百度地图交互的部件是webview吗?
离线liudianwu

只看该作者 8楼 发表于: 2016-05-13
回 hades 的帖子
hades:请问你这webkit是用vs2013编译的吗?与百度地图交互的部件是webview吗? (2016-05-12 17:37) 

用的mingw编译器.
欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350
离线unitcode

只看该作者 9楼 发表于: 2016-08-15
学习了。
离线arlyb

只看该作者 10楼 发表于: 2016-08-31
厉害!
离线dbcyqp

只看该作者 11楼 发表于: 2016-09-03
腾讯企点大数据免费群发营销模式-支持临时会话
很多客户朋友都知道,腾讯企点自身的付费群发还在维护状态,那怎么样利用企点辅助营销软件来对咱们的数据做大数据群发呢?今天给大家讲如何利用咱们的企点辅助软件对腾讯的企点做免费的大数据群发。

据我们目前的测试研究,做了很多的内部测试,目前腾讯在临时回话,就是保证精准的客户数据,也就是开通了临时回话的客户,可以做无限量的消息推送,无限量的陌生人群发,对群成员回话也是不限量的。陌生人会不限量回话的消息模式。

准备工具:腾讯企点,企点辅助软件

第一步,打开企点辅助软件,根据界面的提示,提取一定量的群成员或者在精准用户里面采集一定量的精准用户数据。如图示:

第二步,用精准用户里面的临时回话检测功能,检测并筛选具有临时回话的客户数据,并且关联到营销界面,注备做无限的消息群发。

第三步,编辑你要群发的广告消息,并且按照要求群发。

如果上述还不清楚,请咨询:

qq:1808987696   3172488801

电话:18810886909   13263345668

官方网站:www.hhwxkj.cn
离线青山

只看该作者 12楼 发表于: 2016-09-08
怎么编译webkit?新人刚学qt,求不吝指教,求轻喷,谢谢
离线hunterzf

只看该作者 13楼 发表于: 2016-09-23
真漂亮,谢谢楼主
离线啊业

只看该作者 14楼 发表于: 2017-02-17
学习了,谢谢楼主!
离线disongshu

只看该作者 15楼 发表于: 2017-02-18
    
离线hunterzf

只看该作者 16楼 发表于: 2017-02-19
谢谢,希望能有所帮助
离线455782920

只看该作者 17楼 发表于: 2017-02-20
Desktop_Qt_5_5_1_MinGW_32bit-Debug
ui->webView->load(QUrl::fromLocalFile(qApp->applicationDirPath() + "/gauge.html"));
离线ygw982901730

只看该作者 18楼 发表于: 2018-12-01
离线hunterzf

只看该作者 19楼 发表于: 2019-07-22
谢谢了,真心感谢
离线alone_work

只看该作者 20楼 发表于: 2020-03-03
大佬,你好!我再使用Qt+js的时候,软件关闭后后台打印出一下错误,请问这个需要怎么解决呢?
[21800:5740:0303/150329.864:ERROR:process_win.cc(168)] Unable to terminate process: 拒绝访问。 (0x5)
[21800:5740:0303/150329.864:ERROR:process_win.cc(168)] Unable to terminate process: 拒绝访问。 (0x5)
离线spygg

只看该作者 21楼 发表于: 2020-03-03
回 liudianwu 的帖子
liudianwu:需要自己编译webkit模块 (2016-05-06 12:50) 

mingw32支持吗?
签名就是这么浪
离线houjing

只看该作者 22楼 发表于: 2020-05-11
楼主,你好,最近遇到一个问题,我也是加载html文件,设置的Qwebview背景透明格式,html也没有背景,但是多次加载不同html文件时,会html文件叠加问题,对这块不是很熟悉,能帮忙解决下吗。
离线fjydpf

只看该作者 23楼 发表于: 2020-06-08
真心不错,但是QT做网页,键盘弹出这块怎么弄呢?
离线mountainhigh

只看该作者 24楼 发表于: 2021-02-09
造福大众啊,刘工威武
快速回复
限100 字节
 
上一个 下一个