QT编写Echart动态交互示例（仪表盘）

之前发过一个帖子：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。
[attachment=15126]

代码极为简洁：

复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QtWebKit>
#if (QT_VERSION > QT_VERSION_CHECK(5,0,0))
#include <QtWebKitWidgets>
#endif

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->webView->load(QUrl(qApp->applicationDirPath() + "/gauge.html"));
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_horizontalSlider_valueChanged(int value)
{
    QString js = QString("init(%1)").arg(value);
    ui->webView->page()->mainFrame()->evaluateJavaScript(js);
}

复制代码

<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        html,body{height:100%;width:100%;margin:0px;padding:0px;}
        #main{height:100%;width:100%;}
    </style>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main"></div>
</body>
</html>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    function init(currentValue){
        var option = {
        tooltip:{formatter:"{a} <br/>{b} : {c}%"},
        toolbox:{feature:{restore:{},saveAsImage:{}}},
        series:[{name: '业务指标',type: 'gauge',detail: {formatter:'{value}%'},data: [{value: currentValue, name: '完成率'}]            }]};
        myChart.setOption(option);
    }

    window.onresize = myChart.resize ;
    init(0);
</script>

源码下载：[attachment=15127]
QT集成的webkit模块非常强大，在ARM上也可以用，与WEB结合可以做出非常好的作品。
近期完成的一个项目截图（webkit与百度地图交互）：
[attachment=15129]

[attachment=15128]

nigoole	2016-05-06 08:26

spygg	2016-05-06 08:31
支持，造福大众啊，刘工威武

weinkym	2016-05-06 11:09
5.7 还有webkit？

liudianwu	2016-05-06 12:50
weinkym:5.7 还有webkit？ (2016-05-06 11:09) 需要自己编译webkit模块

辉煌淘淘	2016-05-07 18:23
很漂亮，

ranzhiyandi	2016-05-09 15:54
不错，用在仪器工业设备上特好看

hades	2016-05-12 17:37
请问你这webkit是用vs2013编译的吗？与百度地图交互的部件是webview吗？

liudianwu	2016-05-13 08:43
hades:请问你这webkit是用vs2013编译的吗？与百度地图交互的部件是webview吗？ (2016-05-12 17:37) 用的mingw编译器.

unitcode	2016-08-15 23:57
学习了。

arlyb	2016-08-31 15:19
厉害！

dbcyqp

2016-09-03 16:48

很多客户朋友都知道，腾讯企点自身的付费群发还在维护状态，那怎么样利用企点辅助营销软件来对咱们的数据做大数据群发呢？今天给大家讲如何利用咱们的企点辅助软件对腾讯的企点做免费的大数据群发。

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

准备工具：腾讯企点，企点辅助软件

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

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

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

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

qq：1808987696 3172488801

电话：18810886909 13263345668

官方网站：www.hhwxkj.cn

青山	2016-09-08 16:50
怎么编译webkit？新人刚学qt，求不吝指教，求轻喷，谢谢

hunterzf	2016-09-23 15:59
真漂亮，谢谢楼主

啊业	2017-02-17 17:38
学习了，谢谢楼主！

disongshu	2017-02-18 15:03

hunterzf	2017-02-19 15:48
谢谢，希望能有所帮助

455782920	2017-02-20 20:14
Desktop_Qt_5_5_1_MinGW_32bit-Debug ui->webView->load(QUrl::fromLocalFile(qApp->applicationDirPath() + "/gauge.html"));

ygw982901730	2018-12-01 18:24

hunterzf	2019-07-22 12:06
谢谢了，真心感谢

alone_work	2020-03-03 14:55
大佬，你好！我再使用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	2020-03-03 19:47
liudianwu:需要自己编译webkit模块 (2016-05-06 12:50) mingw32支持吗？

houjing	2020-05-11 23:08
楼主，你好，最近遇到一个问题，我也是加载html文件，设置的Qwebview背景透明格式，html也没有背景，但是多次加载不同html文件时，会html文件叠加问题，对这块不是很熟悉，能帮忙解决下吗。

fjydpf	2020-06-08 17:18
真心不错，但是QT做网页，键盘弹出这块怎么弄呢？

mountainhigh	2021-02-09 11:57
造福大众啊，刘工威武

查看完整版本: [-- QT编写Echart动态交互示例（仪表盘） --] [-- top --]

Powered by phpwind v8.7 Code ©2003-2011 phpwind
Gzip disabled