QML WebEngine + ECharts展示实时曲线

Bertha 。 2022-12-10 07:20 199阅读 0赞

（相信不少人都会用 ECharts 这个网页图表库，我这里也只是学 WebEngine 顺带做个笔记）

我的环境：Qt5.15.1 MSVC 32bit，不同的版本可能 webengine 的初始化有所不同，以官方文档为准。

本文完整项目链接：[https://github.com/gongjianbo/MyTestCode/tree/master/Qml/QmlWebEngineECharts][https_github.com_gongjianbo_MyTestCode_tree_master_Qml_QmlWebEngineECharts]

# 0.下载ECharts #

下载地址：[https://echarts.apache.org/zh/download.html][https_echarts.apache.org_zh_download.html]

提供了三种方式的下载：

> 方法一：从下载的源代码或编译产物安装
> 
> 方法二：从 npm 安装
> 
> 方法三：选择需要的模块，在线定制下载

这里我选择的定制下载：[https://echarts.apache.org/zh/builder.html][https_echarts.apache.org_zh_builder.html] ，选择自己所需模块后就可以下载单个 js 文件。

# 1.QML WebEngine使用ECharts #

WebEngine 初始化步骤参照文档：[https://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html][https_doc.qt.io_qt-5_qml-qtwebengine-webengineview.html]

pro 文件加上 webengine 模块：

QT += webengine

main.cpp 文件初始化 webengine 相关：

//#include <qtwebengineglobal.h>
        // 因为5.13的在线文档没了，所以我没法判断，请自己查下文档
    #if (QT_VERSION >= QT_VERSION_CHECK(5,14,0))
        QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
        // 有些情况可能需要soft opengl
        QCoreApplication::setAttribute(Qt::AA_UseSoftwareOpenGL);
        // webengine须初始化，5.12放在app构造后，5.15放在构造前
        QtWebEngine::initialize();
        QGuiApplication app(argc, argv);
    #else
        // 5.12提示Attribute Qt::AA_ShareOpenGLContexts must be set before QCoreApplication is created
        QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
        // 有些情况可能需要soft opengl
        //QCoreApplication::setAttribute(Qt::AA_UseSoftwareOpenGL);
        // webengine须初始化，5.12放在app构造后，5.15放在构造前
        QGuiApplication app(argc, argv);
        QtWebEngine::initialize();
    #endif

从 ECharts 的官方示例拷贝实时曲线的例程：[https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2][https_echarts.apache.org_examples_zh_editor.html_c_dynamic-data2]

![20200924173754779.png][]

将例程放到 html 文件中，参照：[ECharts官方教程][ECharts] ，由于比较长，我就放到下一节以及 github 链接了（我把 echarts.js 和 index.html 放在了单独的文件夹，pro DESTDIR 也指定到了该目录）。

最后把 qml 文件改改就能运行了：

import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtWebEngine 1.2
    
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("WebEngine + ECharts (By: GongJianBo1992)")
    
        WebEngineView{
            anchors.fill: parent
            //@disable-check M7
            url:"file:///./index.html"
        }
    }

尽量用 release 跑， debug 模式很容易崩溃。还有就是有些环境可能需要设置 AA\_UseSoftwareOpenGL 才能正常运行，但是这又导致持续动态刷新很占 cpu。

# 2.传递数据到 html ，实时刷新曲线 #

webengine 传递数据到 html 还是比较方便的，可以直接调用 js 函数传递参数，也可以用 websocket，或者 ajax 请求数据。这里我使用的调用 js 函数传递 JSON 参数。

webengineview 提供了 runJavaScript 函数在 web 中执行脚本：

void runJavaScript(string script, variant callback)

最终效果：

![20200924230932867.gif][]

下面是 html 和 qml 的代码：

完整项目链接：[https://github.com/gongjianbo/MyTestCode/tree/master/Qml/QmlWebEngineECharts][https_github.com_gongjianbo_MyTestCode_tree_master_Qml_QmlWebEngineECharts]

import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    import QtWebEngine 1.2
    
    Window {
        id: root
        width: 640
        height: 480
        visible: true
        title: qsTr("WebEngine + ECharts (By: GongJianBo1992)")
        property var now: new Date(1997, 9, 3)
        property var oneDay: 24 * 3600 * 1000
    
        WebEngineView{
            id: view
            anchors.fill: parent
            //@disable-check M7
            url:"file:///./index.html"
        }
    
        Row{
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.margins: 10
            spacing: 10
    
            Button{
                text: "单个数据"
                onClicked: {
                    now = new Date(+now + oneDay);
                    view.runJavaScript("window.appendData("+
                                       JSON.stringify({
                                                          "date":now.valueOf(),
                                                          "value":Number(Math.random() * 1000 + 500)
                                                      })+")");
                }
            }
    
            Button{
                text: "批量数据"
                onClicked: {
                    let datalist=[];
                    for(let i=0;i<100;i++)
                    {
                        now = new Date(+now + oneDay);
                        datalist.push({"date":now.valueOf(),"value":Number(Math.random() * 1000 + 500)});
                    }
                    view.runJavaScript("window.setData("+
                                       JSON.stringify(datalist)+")");
                }
            }
        }
    }

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            html,
            body,
            #echarts {
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    
    <body>
        <div id="echarts"></div>
        
        <script src="./echarts.min.js"></script>
        <script>
            //每次now+一天
            function randomData() {
                now = new Date(+now + oneDay);
                //name给标签用，value是x-y坐标点
                return {
                    name: now.toString(),
                    value: [now, Math.random() * 1000 + 500]
                };
            }
    
            //新的数据
            function newData(dataitem) {
                now = new Date(dataitem.date);
                return {
                    name: now.toString(),
                    value: [now, dataitem.value]
                };
            }
    
            var myChart = echarts.init(document.getElementById('echarts'));
            var data = [];
            var now = +new Date(1970, 1, 1);
            var oneDay = 24 * 3600 * 1000;
    
            myChart.setOption({
                title: {
                    text: '动态数据 + 时间坐标轴'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        params = params[0];
                        var date = new Date(params.name);
                        return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' +
                            params.value[1];
                    },
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis: {
                    type: 'time',
                    min: now - 100 * oneDay,
                    max: now,
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 2000,
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    name: '模拟数据',
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data: data
                }]
            });
    
            //刷新数据
            function updateData() {
                myChart.setOption({
                    xAxis: {
                        type: 'time',
                        min: now - 100 * oneDay,
                        max: now
                    },
                    series: [{
                        data: data
                    }]
                });
            }
    
            //定时填充数据
            //每次数据x加一天，范围为100天
            /*setInterval(function () {
                if (data.length > 100)
                    data.shift();
                data.push(randomData());
    
                updateData();
            }, 200);*/
    
            //我们定义dataitem结构为[date,value]
            //添加单个数据
            function appendData(dataitem) {
                if (data.length > 100)
                    data.shift();
                data.push(newData(dataitem));
    
                updateData();
            }
    
            //添加批量数据
            function setData(datalist) {
                if (datalist.length <= 0)
                    return;
                while (datalist.length > 100)
                    datalist.shift();
                data = [];
                for (var i = 0; i < datalist.length; i++)
                    data.push(newData(datalist[i]));
    
                updateData();
            }
    
            //自适应大小
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        </script>
    </body>
    
    </html>

[https_github.com_gongjianbo_MyTestCode_tree_master_Qml_QmlWebEngineECharts]: https://github.com/gongjianbo/MyTestCode/tree/master/Qml/QmlWebEngineECharts
[https_echarts.apache.org_zh_download.html]: https://echarts.apache.org/zh/download.html
[https_echarts.apache.org_zh_builder.html]: https://echarts.apache.org/zh/builder.html
[https_doc.qt.io_qt-5_qml-qtwebengine-webengineview.html]: https://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html
[https_echarts.apache.org_examples_zh_editor.html_c_dynamic-data2]: https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2
[20200924173754779.png]: /images/20221123/424b0f4a9ebd48e3872ee915ae09aeb7.png
[ECharts]: https://echarts.apache.org/zh/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts
[20200924230932867.gif]: /images/20221123/484734b1f27547aa8b6ccdc17404adee.png