QT/QMl结合Echarts绘图

时间：2024-04-05 07:27:40

本篇博客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{

    }
}

效果

QT/QMl结合Echarts绘图

☺ 附：Github源码

相关文章