• 18067阅读
  • 22回复

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) 下载次数:802
QT集成的webkit模块非常强大,在ARM上也可以用,与WEB结合可以做出非常好的作品。
近期完成的一个项目截图(webkit与百度地图交互):




2条评分好评度+1贡献值+1
ranzhiyandi 好评度 +1 不错,用在仪器工业设备上特好看 2016-05-09
ranzhiyandi 贡献值 +1 不错,用在仪器工业设备上特好看 2016-05-09
专业各种自定义控件编写+UI定制+输入法定制+视频监控+工业控制+仪器仪表+嵌入式linux+各种串口网络通信,童叟无欺,量大从优,欢迎咨询购买定制!你正好需要,我正好专业!QQ:517216493 微信:feiyangqingyun Email:feiyangqingyun@163.com
群号:853086607(Qt交流大会,雨田哥群,不定期上传作品,解答作品中相关问题!) 312125701(QtQML多多指教群) 46679801(Qt开发技术交流群-5000人大群)
离线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模块
专业各种自定义控件编写+UI定制+输入法定制+视频监控+工业控制+仪器仪表+嵌入式linux+各种串口网络通信,童叟无欺,量大从优,欢迎咨询购买定制!你正好需要,我正好专业!QQ:517216493 微信:feiyangqingyun Email:feiyangqingyun@163.com
群号:853086607(Qt交流大会,雨田哥群,不定期上传作品,解答作品中相关问题!) 312125701(QtQML多多指教群) 46679801(Qt开发技术交流群-5000人大群)
离线辉煌淘淘

只看该作者 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编译器.
专业各种自定义控件编写+UI定制+输入法定制+视频监控+工业控制+仪器仪表+嵌入式linux+各种串口网络通信,童叟无欺,量大从优,欢迎咨询购买定制!你正好需要,我正好专业!QQ:517216493 微信:feiyangqingyun Email:feiyangqingyun@163.com
群号:853086607(Qt交流大会,雨田哥群,不定期上传作品,解答作品中相关问题!) 312125701(QtQML多多指教群) 46679801(Qt开发技术交流群-5000人大群)
离线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楼 发表于: 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楼 发表于: 03-03
回 liudianwu 的帖子
liudianwu:需要自己编译webkit模块 (2016-05-06 12:50) 

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

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