【QT进阶】Qt Web混合编程之实现ECharts数据交互动态修改

往期回顾:

【QT进阶】Qt Web混合编程之CMake VS2019编译并使用QCefView(图文并茂超详细版本)-CSDN博客
【QT进阶】Qt Web混合编程之html、 js的简单交互-CSDN博客
【QT进阶】Qt Web混合编程之使用ECharts显示各类折线图等-CSDN博客

【QT进阶】Qt Web混合编程之实现ECharts数据交互动态修改

一、QWebEngineView

再次复习:

QWebEngineView是Qt框架中的一个类,用于显示Web内容。它基于Chromium引擎,可以加载和显示Web页面,并支持与Web页面交互。我们可以使用QWebEngineView来在Qt应用程序中集成Web内容,实现丰富的Web功能和交互体验。

1.四个重载函数runJavaScript

QWebEngineView类的四个重载函数runJavaScript

|------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------|
| void runJavaScript(const QString& scriptSource); . | 在当前页面中执行JavaScript代码,传入的参数为要执行的JavaScript代码的字符串。 |
| void runJavaScript(const QString& scriptSource, quint32 worldId); | 在指定的世界(world)中执行JavaScript代码,worldId参数指定了要在哪个世界中执行JavaScript代码。 |
| void runJavaScript(const QString& scriptSource, const QWebEngineCallback<const QVariant &> &resultCallback); | 用于在当前页面中执行JavaScript代码,并在执行完毕后调用resultCallback回调函数,将执行结果作为参数传递给回调函数。 |
| void runJavaScript(const QString& scriptSource, quint32 worldId, const QWebEngineCallback<const QVariant &> &resultCallback); | 用于在指定的世界中执行JavaScript代码,并在执行完毕后调用resultCallback回调函数,将执行结果作为参数传递给回调函数。 |

二、具体示例

1、显示echarts图表

在Widget类的构造函数中,通过设置echarts图表的HTML文件路径,将该路径传递给QWebEngineView组件,以显示echarts图表。

复制代码
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QString path = qApp->applicationDirPath() + "/echarts/line-simple.html";
    ui->widget->setUrl(QUrl(path));
}

2、信号槽链接初始化函数

on_btnDefault_clicked()槽函数在按钮被点击时会调用JavaScript函数init(),用于初始化echarts图表并展示默认数据。

复制代码
void Widget::on_btnDefault_clicked()
{
    ui->widget->page()->runJavaScript("init()");
}

init(): 初始化echarts图表并展示默认数据。

复制代码
            function init(){
                var app = {};

                var option;

                option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }]
                };

                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
            }

3、转换json格式并重新定义数据

on_btnReDefine_clicked()槽函数在另一个按钮被点击时会生成一个包含x轴和y轴数据的JSON对象,将该对象转换为JSON字符串,然后调用JavaScript函数load_data(),用于重新定义echarts图表的数据。

复制代码
void Widget::on_btnReDefine_clicked()
{
    QJsonObject seriesData;

    //设置x轴数据
    QJsonArray dataX = {1, 5, 10, 15, 20, 25, 30, 35, 40};
    seriesData.insert("data_xAxis", dataX);

    //设置y轴数据
    QJsonArray dataY = {100, 70, 1230, 110, 50, 890, 79, 128, 256};
    seriesData.insert("data_yAxis", dataY);

    QString optionStr = QJsonDocument(seriesData).toJson();
    QString js = QString("load_data(%1)").arg(optionStr);

    //C++调用js方法
    ui->widget->page()->runJavaScript(js);
}

load_data(arg_json): 根据传入的JSON数据重新定义echarts图表的数据。

复制代码
function load_data(arg_json) {
                var app = {};

                var option;

                option = {
                    backgroundColor: '#1b1b1b', //背景色

                    xAxis: {
                        type: 'category',
                        //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        data:arg_json["data_xAxis"]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        //data: [150, 230, 224, 218, 135, 147, 260],
                        data:arg_json["data_yAxis"],
                        type: 'line'
                        
                    }]
                };

HTML部分就是包含一个div元素用于显示echarts图表,引入了echarts库的JavaScript文件,并定义了两个JavaScript函数


以上就是Qt里实现ECharts数据交互动态修改的简单介绍。

都看到这里了,点个赞再走呗朋友~

加油吧,预祝大家变得更强!

相关推荐
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
侃侃_天下2 天前
最终的信号类
开发语言·c++·算法
echoarts2 天前
Rayon Rust中的数据并行库入门教程
开发语言·其他·算法·rust
Aomnitrix2 天前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
每天回答3个问题2 天前
UE5C++编译遇到MSB3073
开发语言·c++·ue5
伍哥的传说2 天前
Vite Plugin PWA – 零配置构建现代渐进式Web应用
开发语言·前端·javascript·web app·pwa·service worker·workbox
小莞尔2 天前
【51单片机】【protues仿真】 基于51单片机八路抢答器系统
c语言·开发语言·单片机·嵌入式硬件·51单片机
我是菜鸟0713号2 天前
Qt 中 OPC UA 通讯实战
开发语言·qt
JCBP_2 天前
QT(4)
开发语言·汇编·c++·qt·算法