《QT实用小工具·十一》Echart图表JS交互之仪表盘

1、概述
源码放在文章末尾

该项目为Echart图表JS交互之炫酷的仪表盘,可以用鼠标实时改变仪表盘的读数。

下面为demo演示:

该项目部分代码如下:

cpp 复制代码
#include "widget.h"
#include "ui_widget.h"
#include "qurl.h"

#ifdef webkit
#include <QtWebKit>
#if (QT_VERSION >= QT_VERSION_CHECK(5,0,0))
#include <QtWebKitWidgets>
#endif
#elif webengine
#include <QtWebEngineWidgets>
#endif

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->initForm();
}

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

void Widget::initForm()
{
    //初始化浏览器控件属性,一个项目中只需要设置一次就行
#ifdef webkit
    QWebSettings *webSetting = QWebSettings::globalSettings();
    webSetting->setAttribute(QWebSettings::JavascriptEnabled, true);
    webSetting->setAttribute(QWebSettings::PluginsEnabled, true);
    webSetting->setAttribute(QWebSettings::JavascriptCanOpenWindows, true);
#elif webengine
    QWebEngineSettings *webSetting = QWebEngineProfile::defaultProfile()->settings();
    webSetting->setAttribute(QWebEngineSettings::JavascriptEnabled, true);
    webSetting->setAttribute(QWebEngineSettings::PluginsEnabled, true);
    webSetting->setAttribute(QWebEngineSettings::JavascriptCanOpenWindows, true);
#endif

    //实例化多个浏览器控件,设置背景透明
#ifdef webkit
    for (int i = 0; i < 4; ++i) {
        QWebView *webView = new QWebView;
        webView->setStyleSheet(QString("background:%1;").arg("rgba(255,0,0,0)"));
        webViews << webView;
    }
#elif webengine
    for (int i = 0; i < 4; ++i) {
        QWebEngineView *webView = new QWebEngineView;
        webView->page()->setBackgroundColor(Qt::transparent);
        webViews << webView;
    }
#endif

    //添加到布局
#if (defined webkit) || (defined webengine)
    ui->gridLayout->addWidget(webViews.at(0), 0, 0);
    ui->gridLayout->addWidget(webViews.at(1), 0, 1);
    ui->gridLayout->addWidget(webViews.at(2), 1, 0);
    ui->gridLayout->addWidget(webViews.at(3), 1, 1);
#endif

    //加载html文件
    QUrl url("file:///" + qApp->applicationDirPath() + "/gauge.html");
#ifdef webkit
    foreach (QWebView *webView, webViews) {
        webView->load(url);
    }
#elif webengine
    foreach (QWebEngineView *webView, webViews) {
        webView->load(url);
    }
#endif
}

void Widget::on_horizontalSlider_valueChanged(int value)
{
    //执行js函数
    QString js = QString("setGaugeValue(%1)").arg(value);
#ifdef webkit
    foreach (QWebView *webView, webViews) {
        webView->page()->mainFrame()->evaluateJavaScript(js);
    }
#elif webengine
    foreach (QWebEngineView *webView, webViews) {
        webView->page()->runJavaScript(js);
    }
#endif
}

源码下载

相关推荐
小刘同学3218 分钟前
C++11 特性
c++·c11新特性
军训猫猫头9 分钟前
1.如何对多个控件进行高效的绑定 C#例子 WPF例子
开发语言·算法·c#·.net
真的想上岸啊23 分钟前
学习C++、QT---18(C++ 记事本项目的stylesheet)
开发语言·c++·学习
m0_5522008226 分钟前
《UE5_C++多人TPS完整教程》学习笔记40 ——《P41 装备(武器)姿势(Equipped Pose)》
c++·游戏·ue5
明天好,会的29 分钟前
跨平台ZeroMQ:在Rust中使用zmq库的完整指南
开发语言·后端·rust
AxureMost1 小时前
Axure常用交互功能案例-免费
交互·axure·photoshop
丁劲犇1 小时前
用 Turbo Vision 2 为 Qt 6 控制台应用创建 TUI 字符 MainFrame
开发语言·c++·qt·tui·字符界面·curse
旷世奇才李先生1 小时前
Next.js 安装使用教程
开发语言·javascript·ecmascript
charlie1145141912 小时前
深入理解Qt的SetWindowsFlags函数
开发语言·c++·qt·原理分析
呜喵王阿尔萨斯2 小时前
编程中的英语
c语言·c++