QT/QMl结合Echarts绘图
本篇博客QT环境 ：5.8+ mingw+ Linux
说明：**Windos平台：**由于mingw编译器不支持webengine的编译，所以只能使用MSVC版本的QT来进行webengine的开发，且需要安装对应版本的Visual Studio，但是MSVC不支持跨平台；**Linux平台：**mingw版本的QT自带WebEngine模块。
前言
在QT中绘图有很多办法，Canvas绘制、5.7后的官方库QChart等等
ECharts为百度的一个JS开源库，官方对它的介绍：
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts作为一个开源库，主要适用于html前端的图标绘制，但是按照理论来说，只要支持JS的语言，都可以使此控件。
我们知道QML中是支持JS的，所以在QT（QML）里使用ECharts来绘图也是可行的，ECharts要远比官方的QChart强大，并且由于JS跨平台的特性，所以使用ECharts来绘制图表会是一种很好的实现方式。
下载
从ECharts下载jar包（源代码版本，方便调试）
前往Echarts官网下载得到的echarts.js 文件
集成
在QML中，想要用html文件集成echarts，需要通过件WebEngineView控件来加载html文件，须导入WebEngine模块。
- 新建一个
Qt Quick Controls 2 Application项目
导入WebEngine模块
- 在项目的
.pro文件里加上QT += webengine - 在需要用到
WebEngineView的qml文件里import QtWebEngine 1.4
在main.cpp中初始化WebEngine
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtWebEngine>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QtWebEngine::initialize();
QQmlApplicationEngine engine;
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
return app.exec();
}
新建html文件
- test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
使用WebEngineView加载html文件
- MyWebView.qml
import QtQuick 2.0
import QtWebEngine 1.4
Item {
anchors.fill: parent
WebEngineView{
anchors.fill: parent
url:"test.html"
// url: "http://www.baidu.com"
}
}
- main.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MyWebView{
}
}
效果
☺ 附：Github源码