Qt调用Echarts显示动态过程曲线

最新推荐文章于 2023-11-24 13:59:31 发布
最新推荐文章于 2023-11-24 13:59:31 发布
阅读量5.9k 收藏 70
点赞数 10
分类专栏： qt 文章标签： qt echarts qt调用JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunnyloves/article/details/104108767
版权

Qt调用Echarts显示动态过程曲线

效果

先来看看效果吧。

Qt生成随机数发送给Echarts，1000ms刷新一次

G3IF.gif

环境

具体配置见我的另外一篇最清晰Qt与JS通过qwebchannel交互例子

备注：
1.HTML端就是最基本的HTML、JS，没有更高层的
2.基础知识：Echarts相关基本知识

HTML端代码Echarts

在上一篇文章HTML目类下新建一个echarttest.html文件,修改Echarts例子给出的部分HTML代码，然后Qt调用这个页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="D:/Code/JS/Echart/echarts.min.js"></script>
    <script src="qwebchannel.js"></script>

</head>
<p id="xlabel">x:</p>
<p id="ylabel">y:</p>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" class="chart" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        //自适应宽高
        var resizeContainer = function () {
            var myChart = document.getElementById('main');
            myChart.style.width = window.innerWidth - 32 + 'px'; //
            myChart.style.height = window.innerHeight - 100 + 'px'; //适应Qt内嵌边框
        };

        resizeContainer();
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'Qt实时传输数据调用ECharts示例',
                left: '40%'
            },
            grid: {
                left: '5%',
                right: '3%',
                top: '10%',
                bottom: '8%'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['值'],
                right: '10%',
                top: '5%'
            },
            xAxis: {

                data: []
            },
            yAxis: {},
            series: [{
                name: '值',
                type: 'line',
                data: []
            }]
        };
        myChart.setOption(option);
        //自适应窗口大小
        window.onresize = function () {
            resizeContainer();
            myChart.resize();
        };
        //接受从Qt来的数据
        var x = [];
        var y = [];
        new QWebChannel(qt.webChannelTransport, function (channel) {
            var webobj = channel.objects.webobj;
            //arg-QJsonObject类型
            webobj.dataChanged.connect(function (arg) {
                xlabel.innerHTML = "x:" + arg.x;
                ylabel.innerHTML = "y:" + arg.y.toFixed(4);
                x.push(arg.x);
                y.push(arg.y.toFixed(4));

                myChart.setOption({
                    xAxis: {
                        data: x
                    },
                    series: [{
                        name: '值',
                        data: y
                    }]
                });
            });

        });
    </script>

</body>

</html>

Qt端修改代码
.h文件

class WebClass : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QJsonObject jsonData MEMBER m_jsonData NOTIFY dataChanged)

public:
signals:

    void dataChanged(const QJsonObject &jsonData);
private:

    QJsonObject m_jsonData;
};


class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    QWebEngineView *webView = nullptr;
    QWebChannel *webChannel = nullptr;
    WebClass *webobj = nullptr;
    QPushButton *btn = nullptr;
    QTimer *timer = nullptr;
    QJsonObject json;
};

.cpp文件

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent)
{
    btn = new QPushButton("..");
    connect(btn, &QPushButton::clicked, this,
            [&]()
    {
        timer = new QTimer;
        connect(timer, &QTimer::timeout, this,
                [&]()
        {
            static int index = 0;
            json["x"] = index++;
            //生成随机数
            json["y"] = QRandomGenerator::global()->generateDouble() * 10;
            webobj->setProperty("jsonData", json);
        });
        timer->start(1000);
    });
    QVBoxLayout *layout = new QVBoxLayout;
    layout->addWidget(btn, 1, Qt::AlignLeft);

    webView = new QWebEngineView(parent);
    webView->load(QUrl::fromLocalFile("D:\\Code\\JS\\test.html"));
    layout->addWidget(webView);
    QWidget *w = new QWidget;
    w->setLayout(layout);

    setCentralWidget(w);

    webChannel = new QWebChannel;
    webobj = new WebClass();
    webChannel->registerObject("webobj", webobj);
    webView->page()->setWebChannel(webChannel);

    setMinimumSize(800, 600);
}

x坐标是时间类型

上一个例子还是横坐标还是普通数据，如果是时间型的呢？这会涉及到QString和Json日期换算的问题，稍微花点时间完成了，顺便将几个类简单封装了下，另外Echarts里的一个重要特性加上了，仍然是Qt生成随机数实时发送给JS。效果如下
1.gif
具体代码如下:
HTML端

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <script src="qwebchannel.js"></script>

</head>
<table width="300" border="0">
    <tr>
        <td id="xlabel">x:</td>
        <td id="ylabel">y:</td>
        <td id="zlabel">z:</td>
    </tr>
</table>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" class="chart" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        //自适应宽高
        var resizeContainer = function () {
            var myChart = document.getElementById('main');
            myChart.style.width = window.innerWidth - 20 + 'px'; //
            myChart.style.height = window.innerHeight - 50 + 'px'; //适应Qt内嵌边框
        };
        //字符串转日期 yyyy-MM-dd hh:mm:ss
        function str2Datetime(strDateTime) {
            var tempStrs = strDateTime.split(" ");
            var dateStrs = tempStrs[0].split("-");
            var year = parseInt(dateStrs[0], 10);
            var month = parseInt(dateStrs[1], 10) - 1;
            var day = parseInt(dateStrs[2], 10);
            var timeStrs = tempStrs[1].split(":");
            var hour = parseInt(timeStrs[0], 10);
            var minute = parseInt(timeStrs[1], 10);
            var second = parseInt(timeStrs[2], 10);
            var datetime = new Date(year, month, day, hour, minute, second);
            return datetime;
        }
        resizeContainer();
        var myChart = echarts.init(document.getElementById('main'), 'light');
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'Qt实时传输数据调用ECharts示例',
                left: 'center'
            },
            grid: {
                left: '5%',
                right: '8%',
                top: '10%',
                bottom: '12%',
                show: false
            },
            toolbox: {
                right: '13%',
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {}
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data: ['流量', '降雨量'],
                left: '10%',
                top: '5%'
            },
            xAxis: {
                axisTick: {
                    alignWithLabel: true
                },
                data: []
            },
            yAxis: [{
                    name: '流量(m^3/h)',
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#333',
                            width: 2
                        }
                    },
                    axisPointer: {
                        show: false
                    }
                },
                {
                    name: '降雨量(mm)',
                    nameLocation: 'start',
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#aaa',
                            width: 2
                        }
                    },
                    inverse: true,
                    axisPointer: {
                        show: false
                    }
                }
            ],
            dataZoom: [{
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,
                    end: 100,
                    bottom: 3
                },
                {
                    type: 'inside',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,
                    end: 100
                }
            ],
            series: [{
                    name: '流量',
                    type: 'line',
                    data: []
                },
                {
                    name: '降雨量',
                    yAxisIndex: 1,
                    type: 'bar',
                    data: []
                }
            ]
        };
        myChart.setOption(option);
        //自适应窗口大小
        window.onresize = function () {
            resizeContainer();
            myChart.resize();
        };
        //接受从Qt来的数据
        var x = [];
        var y = [];
        var z = [];
        new QWebChannel(qt.webChannelTransport, function (channel) {
            var jsondata = channel.objects.eChartdata;
            //arg-QJsonObject类型
            jsondata.dataChanged.connect(function (arg) {
                xlabel.innerHTML = "time:" + arg.x;
                ylabel.innerHTML = "y:" + arg.y.toFixed(4);
                zlabel.innerHTML = "z:" + arg.z.toFixed(4);
                var date =  str2Datetime(arg.x);
                var hour = date.getHours();
                var min = date.getMinutes();
                var sec = date.getSeconds();
                x.push(hour + ':' + min + ':' + sec);
                y.push(arg.y.toFixed(4));
                z.push(arg.z.toFixed(4));
                myChart.setOption({
                    xAxis: {
                        data: x
                    },
                    series: [{
                            name: '流量',
                            data: y
                        },
                        {
                            name: '降雨量',
                            data: z
                        }
                    ]
                });
            });
        });
    </script>
</body>
</html>

Qt端

class EchartDataClass : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QJsonObject jsonData MEMBER m_jsonData NOTIFY dataChanged)

public:
signals:

    void dataChanged(const QJsonObject &jsonData);
private:
    QJsonObject m_jsonData;
};

class EchartWidget : public QWidget
{
    Q_OBJECT
public:
    EchartWidget(const QString &htmlPath, QWidget *parent = nullptr) : QWidget(parent)
    {
        QVBoxLayout *layout = new  QVBoxLayout;
        webView = new QWebEngineView(parent);
        webView->load(QUrl::fromLocalFile(htmlPath));
        layout->addWidget(webView);

        webChannel = new QWebChannel;
        eChartdata = new EchartDataClass;
        webChannel->registerObject("eChartdata", eChartdata);
        webView->page()->setWebChannel(webChannel);
        setLayout(layout);
        layout->setMargin(0);

        setMinimumSize(800, 600);
    }

    void setData(QDateTime dt, double y, double z)
    {
        QJsonObject json;
        json["x"] = dt.toString("yyyy-MM-dd hh:mm:ss");
        json["y"] = y;
        json["z"] = z;

        eChartdata->setProperty("jsonData", json);
    }

    virtual ~EchartWidget()
    {
    }

private:
    QWebEngineView *webView = nullptr;
    QWebChannel *webChannel = nullptr;
    EchartDataClass *eChartdata = nullptr;
};

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    QPushButton *btn = nullptr;
    QTimer *timer = nullptr;
    EchartWidget *echartWidget = nullptr;
};


MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent)
{
    btn = new QPushButton("start");
    connect(btn, &QPushButton::clicked, this,
            [&]()
    {
        if (btn->text() == "start")
        {
            btn->setText("stop");
            if (timer == nullptr)
            {
                timer = new QTimer;
                connect(timer, &QTimer::timeout, this,
                        [&]()
                {
                    echartWidget->setData(QDateTime::currentDateTime(),
                                          QRandomGenerator::global()->generateDouble() * 10,
                                          QRandomGenerator::global()->generateDouble());
                });
            }
            timer->start(1000);
        }
        else
        {
            btn->setText("start");
            timer->stop();
        }
    });
    QVBoxLayout *layout = new QVBoxLayout;
    layout->setMargin(0);
    layout->addWidget(btn, 1, Qt::AlignLeft);
    echartWidget
        = new EchartWidget("D:\\Code\\JS\\test.html");
    layout->addWidget(echartWidget);
    QWidget *w = new QWidget;
    w->setLayout(layout);
    setCentralWidget(w);
}

参考文献

最清晰Qt与JS通过qwebchannel交互例子
Qt WebChannel JavaScript API
echart官方例子

洗洗睡去
关注
  • 10
    点赞
  • 踩
  • 70
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
专栏目录
使用 Qt 和 ECharts 进行数据可视化
MusicScore的博客
07-08 614
本文介绍了如何在 Qt 应用中使用 ECharts 进行数据可视化，并展示了折线图、散点图和柱状图的示例。通过将 ECharts 与 Qt 集成，可以轻松创建高质量的交互式图表，为用户提供直观的数据展示和分析工具。希望本文对你理解和使用 Qt 和 ECharts 进行数据可视化有所帮助。如果你有任何问题或建议，欢迎在评论区留言交流。
Qt echarts 教程（2）：qt echarts 数据动态绑定
琅嬛福地
07-01 969
Qt echarts 教程（1）：qt echars的基本使用方法 Qt echarts 教程（2）：qt echars 数据动态绑定 上一篇介绍了qt echars的基本使用方法，本篇介绍如何进行C++ js数据动态绑定。为了弄清楚交互方法，我们从最简单的例子入手line-simple.html，如下所示： html如下： <!DOCTYPE html> <html style="height: 100%"> <head> <meta c
qt + echarts 使用QWebEngineView 显示 echarts图表小白教程
kB0SS的博客
04-12 2946
1、从Echarts官网先把库下下来， 然后到下载界面 再往下拉，选择定制 因为只是上手demo，直接使用默认的定制项 但是下面这个兼容选项一定要勾 这里是我遇到的第一个坑，不勾这个会导致后面加载的网页不显示画面 然后点击下载，就能构建出一个echarts.min.js的js文件，保存下来 接下来就是创建使用这个echarts库的html文件 新建文本文档，重命名为2....
QT加载echarts图表并进行数据交互详细过程
weixin_55735677的博客
03-17 2863
在QT中加载echarts图表，并且在QT中传递数据修改图表的数据。
QT调用百度地图中遇到的问题以及解决方法以及工程
gywwwwwxxxyy的博客
11-03 1032
QT百度地图显示遇到的问题
QT笔记：Qt调用Echarts
weixin_43878765的博客
05-21 1615
Echarts简介 Echarts是百度的一个纯Javascript的开源图表库，支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达 图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现，界面十分漂亮美观。 Echarts下载 [4.7.0下载地址](https://github.com/apache/incubator-e
QT通过qwt实现曲线动态显示
01-08
在"QT通过qwt实现曲线动态显示"这个项目中，开发者利用Qwt库的功能来实现在GUI窗口中动态展示和更新曲线。Qwt库提供了丰富的图形对象，如曲线、图表、标尺、图例等，使得开发者可以轻松构建出专业级别的数据可视化...
qt 使用 echarts图表
04-21
将Echarts集成到Qt应用中，可以为桌面应用程序带来丰富的图形化界面和动态数据可视化功能。 标题"qt 使用 echarts图表"表明我们将探讨如何在Qt应用中利用Echarts来创建和展示图表。以下是一些关键知识点： 1. **...
Qt实现动态曲线图+文本数据的实时显示
02-27
在本文中，我们将深入探讨如何使用Qt框架来实现动态曲线图和文本数据的实时显示。Qt是一个跨平台的C++图形用户界面库，它提供了丰富的功能，包括窗口系统、网络编程、多媒体支持以及图形绘制等。这个项目的核心是...
QT使用QCustomPlot绘制曲线并动态显示曲线上的数据
08-27
在本文中，我们将深入探讨如何使用QT框架中的QCustomPlot模块来绘制曲线，并实时动态地显示曲线上的数据。QCustomPlot是一个强大的、可定制的2D绘图库，适用于Qt应用，它允许开发者创建复杂的图表和图形，包括曲线图...
qt调用matlab动态链接库
04-22
QT 调用 MATLAB 动态链接库 本文将详细介绍如何在 QT 中调用 MATLAB 动态链接库，包括编写 MATLAB 函数、配置 MATLAB 编译器、安装 Mingw64 编译器、配置系统变量、编译 MATLAB 代码、将生成的 DLL 文件添加到 QT ...
QT中加入Echarts.rar
10-09
如何在QT中加入Echarts图表，实现可视化数据。这里放入了mian.js和写好的html文件，并在说明文档中说明了如何添加的具体步骤。
vue中使用Echarts实现曲线图
weixin_48494427的博客
09-17 2906
3、创建一个 Vue 页面对 Echarts 曲线图进行一个简单的展示。1、首先创建好 Vue 的项目，创建好之后在控制台输入。2、接下来在 main.js 中进行引入。4.页面效果如下图所示。
QT Echarts 使用详解（二）ECharts柱状图\交互
断点
10-29 1990
Echarts是百度的一款可视化界面开发的平台，里面的地图以及数据可视化内容十分丰富，适合用于一些大屏数据显示项目或者一些ui界面开发。每一个ECharts图表使用一个无边框的QWebView来展示，这样多个不同类型的ECharts图表就是多个封装不同类型ECharts图表的QWebView（html加载入QWebView窗口来实现），每一个模块封装的数据用qt预留接口调用js代码实现修改html的功能，最终达到代码操作qt即可操作图表的功能。
echart实时曲线图
weixin_44347152的博客
07-14 1068
echarts实时曲线
5：Echarts数据可视化-多条曲线、多个子图、TreeMap类似盒图、树形图、热力图、词云...
USTSD的博客
06-19 1469
〇、目标 本次实验主要基于Echarts的Python库实现高维数据、网络和层次化数据、时空数据和文本数据的可视化，掌握可视化的操作流程和相关库的使用。 一、绘制平行坐标系 平行坐标是信息可视化的一种重要技术。为了克服传统的笛卡尔直角坐标系 难以表达三维以上数据的问题， 平行坐标将高维数据的各个变量用一系列相互平行的坐标轴表示， 变量值对应轴上位置。 为了反映变化趋势和各个变量间相互关系，将描述...
Echarts折线图曲线图和三维图
qq_36982349的博客
03-04 7101
1 折线图 鼠标放在点上时显示的数据效果，在代码中用到的就是tooltip这个参数，其中show的默认值是true，可以省略，当我们不想显示悬浮提示效果，将show修改为false。trigger设置这个参数，效果是可以看到一个竖直的虚线，不添加则不显示。backgroundColor效果是显示数据的弹窗对应的背景色，需要什么颜色自行设置。extraCssText可以设置弹窗显示的阴影效果。 配置项的全部代码 options: {    title:&n
ECharts与DataV：数据可视化的得力助手
最新发布
letterljhx的博客
11-24 1615
ECharts与DataV：数据可视化的得力助手
Qt中调用Echarts，定义数据接口，更新Echarts图表数据
wwplh5520370的博客
04-24 1750
格式 JSON：{ series: [ { data: [ ] } ] } option：JSON对象 series：JSON数组 data：JSON数组 1、折线图、柱状图 JS { series: [ { data: [ 150, 230, 224, 218, 135, 147, 260 ] } ] } Qt void setData(QList<int> data)
qt串口数据动态曲线显示
06-23
具体而言，我们可以通过QT中的QCustomPlot等图形库来实现动态曲线的显示，在动态显示曲线的同时，我们也需要处理来自串口设备的数据流，将其转化为相应的曲线显示。 在实现QT串口数据动态曲线显示过程中，我们还...
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值