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源码