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', '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
1080
height: 800
WebEngineView {
id: sitemonitoryView
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、效果
