qt 利用QWebEngineView和QWebChannel使用echarts图表

本文从我原先发布在 CSDN 的文章迁移而来，原文链接：https://blog.csdn.net/wang112031/article/details/100640811。

======博客点滴积累，部分话语和知识点来源于网络，感谢网络资源的提供者======

QWebengine目前只支持msvc，不支持mingw。安装qt 是需要注意勾选； Webenginewidgets 是创建widgets部件的web 程序，Webchannel 是通信类，可以实现qt 与js 的通信。

第一步：故实现需要在pro 文件添加这两个类

QT       += core gui
QT += webenginewidgets webchannel
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

第二步：编写继承于QObject类

#define JSCONTEXT_H

#include <QObject>
#include <QtDebug>

class JsContext : public QObject
{
    Q_OBJECT
    public:
    explicit JsContext();

    signals:
    // 向js页面发送消息
    void sendtojsMsg(const QString& msg);
    public slots:
    // 接收js页面发送的消息
    void recvjsMsg(const QString& msg);
    public slots:
    // 接收main widget 发送的数据
    void recvwidgetMsg(const QString& msg);
};

#endif // JSCONTEXT_H
#include "jscontext.h"

JsContext::JsContext()
{
}

void JsContext::recvjsMsg(const QString &msg)
{
    //qDebug()<<"recvjs:"<<msg;
}

void JsContext::recvwidgetMsg(const QString& msg)
{
    emit sendtojsMsg(msg);  /* 发送到js页面*/
}

第三步

1）在qt designer 拖一个QWebEngineView，在构造函数中实现Webchannel 与qt 对象的绑定

m_webChannel = new QWebChannel(ui->webview->page());
m_jsContext = new JsContext();
m_webChannel->registerObject(QStringLiteral("m_jsContext"), m_jsContext);
ui->webview->page()->setWebChannel(m_webChannel);
ui->webview->load(QUrl("file:///" + qApp->applicationDirPath() + "/index_line.html"));
connect(this, SIGNAL(notityUpdate(const QString&)), m_jsContext, SLOT(recvwidgetMsg(const QString&)));

2）向js 发送数据

QString value;
QDateTime local(QDateTime::currentDateTime());
QString localTime = local.toString("yyyy/MM/dd hh:mm:ss");
qsrand(QDateTime::currentDateTime().toMSecsSinceEpoch());
int rand1 = qrand() % 1000;
int rand2 = qrand() % 300;
QJsonObject json;
json.insert("time", localTime);
json.insert("val1", rand1);
json.insert("val2", rand2);

// 构建 JSON 文档
QJsonDocument document;
document.setObject(json);
QByteArray byteArray = document.toJson(QJsonDocument::Compact);
QString strJson(byteArray);

qDebug() << strJson;
qDebug("cnt=%d",cnt);
cnt++;
emit notityUpdate(strJson);

第四步拷贝一个 qwebchannel.js qt 安装目录有搜索一下就可以了，编译时同时将这个文件拷贝到debug或者release。第五步下载一个echarts，实现一个html 调用echarts，具体接收qt 来的数据如下：

var updateChart = function(objdata) {
    var obj = JSON.parse(objdata);
    data1.push(obj.val1);
    data2.push(obj.val2);
    timea.push(obj.time)
    myChart.setOption(option,true);
}
window.onload = function(){
    new QWebChannel(qt.webChannelTransport,
    function(channel) {
        var m_jsContext = channel.objects.m_jsContext;
        m_jsContext.sendtojsMsg.connect(updateChart);
    }
);
}

注：qt5.12.0 调用echarts 图表会有一个很窄的白边，5.12.3 不存在这个问题，建议使用5.12.3 及其以上版本

完整实例下载地址：https://download.csdn.net/download/wang112031/11702507

回复 / 留言