QML WebEngine + ECharts展示实时曲线

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

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

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

0.下载ECharts

下载地址：https://echarts.apache.org/zh/download.html

提供了三种方式的下载：

方法一：从下载的源代码或编译产物安装

方法二：从 npm 安装

方法三：选择需要的模块，在线定制下载

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

1.QML WebEngine使用ECharts

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

pro 文件加上 webengine 模块：

QT += webengine

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

    //#include 
    // 因为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

将例程放到 html 文件中，参照：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)

最终效果：

下面是 html 和 qml 的代码：

完整项目链接：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)
                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  100)
                datalist.shift();
            data = [];
            for (var i = 0; i < datalist.length; i++)
                data.push(newData(datalist[i]));

            updateData();
        }

        //自适应大小
        window.addEventListener("resize", function () {
            myChart.resize();
        });