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、效果
