QML使用QtWebEngine显示HTML【Echarts】

2024-01-09 19:12:40

1、前言

虽然标题是Echarts，但是实际上是QML加载HTML，而Echarts提供酷炫的控件可以让我们在HTML里使用，所以这边文章核心是QML+HTML【注意不是Qt+HTML】。

很多博客都说了两种方式加载HTML，如QtWebKit、QtWebEngine、QAxWidget。。这里需要注意：

①、QtWebKit：Qt5.6以后已经被Qt官方停止支持，还是不使用了吧；

②、QtWebEngine：Qt5.6以后提出，但是只能用MSVC版本，故如果程序只运行在Windows上，还是可以的，Linux就算了吧；

③、QAxWidget：Qt5.6以后的mingw版本，可以用来显示网页。【我记得对excel的的操作是用的QAxObject，查了一下，可以理解QAxWidget是显示office，QAxObject是后台处理office】

本文是在QML中使用QtWebEngine显示HTML，环境是VS2017+Qt5.14，编译器使用MSVC2017_32

2、新建Quick工程

其实我是直接下载的网友的工程：https://blog.csdn.net/qq_27081181/article/details/100528492

如图，主要有：

echart-all.js：官方的js库【https://echarts.baidu.com/echarts2/doc/example.html】

pie.html：使用了echarts的html，暂不讨论咋实现的

main.qml：主qml，是个window，里面加载了pie.html

qml.qrc：资源文件，导入上面三个文件

main.cpp：main函数

3、相关代码

①、pie.html：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
           html,body,#echarts{
           margin:0px;
           padding:0px;
           width:100%;
           height:100%;
           }
    </style>
</head>
<body style="background: url(图层4.png);">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="echarts" style="height:100%"></div>
    <script type="text/javascript" src="echarts-all.js"></script>
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts'));

    // 指定图表的配置项和数据
    var option = {
    title : {
        text: '南丁格尔玫瑰图',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : [20, 110],
            center : ['25%', 200],
            roseType : 'radius',
            width: '40%',       // for funnel
            max: 40,            // for funnel
            itemStyle : {
                normal : {
                    label : {
                        show : false
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {
                    label : {
                        show : true
                    },
                    labelLine : {
                        show : true
                    }
                }
            },
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        },
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['75%', 200],
            roseType : 'area',
            x: '50%',               // for funnel
            max: 40,                // for funnel
            sort : 'ascending',     // for funnel
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        }
    ]
};
                    
// 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
</body>

②、main.qml

import QtQuick 2.7
import QtQuick.Window 2.2

import QtWebEngine 1.2

Window {
    visible: true
    width: 1080
    height: 800

    WebEngineView {
        id: sitemonitoryView
        width:parent.width
        height:parent.height
        backgroundColor: "transparent"
        anchors.centerIn: parent
        settings.javascriptEnabled : true
        settings.pluginsEnabled:true
        url:"qrc:/html/pie.html"
    }
}

③、main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QCoreApplication::setAttribute(Qt::AA_UseOpenGLES);
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    //注册applicationDirPath给qml调用
    engine.rootContext()->setContextProperty(
    "applicationDirPath", QGuiApplication::applicationDirPath());

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

原作者没有加这句话：

QCoreApplication::setAttribute(Qt::AA_UseOpenGLES);

但是我运行了会报错，并且界面一动就会糊在一起，这句话是打开OPENGL

4、效果

码农公寓

相关文章