qt 利用QWebEngineView和QWebChannel使用echarts图表

最新推荐文章于 2025-08-07 10:34:25 发布

人生为棋我愿为卒行动虽慢未曾后退

最新推荐文章于 2025-08-07 10:34:25 发布

阅读量2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： qt 文章标签： qt QWebEngineView echarts web

本文链接：https://blog.csdn.net/wang112031/article/details/100640811

qt 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何在Qt应用中使用WebEngine模块与ECharts进行数据交互，包括配置环境、创建通信桥梁、数据传输及图表更新的全过程。

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

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