Qt+ECharts开发笔记（一）：ECharts介绍、下载和Qt调用ECharts基础柱状图Demo

前端

2023-11-28 19:11:05

概述

ECharts是一个基于Javascript的开源可视化库，可以轻松创建交互式图表和数据可视化。它具有丰富的图表类型、强大的数据处理能力和灵活的配置选项，被广泛应用于Web开发、移动开发和桌面应用程序开发等领域。

下载和安装

前往ECharts官方网站（https://echarts.apache.org/）下载最新版本的ECharts。
解压下载的文件，将解压后的文件复制到您的项目目录中。

Qt调用ECharts

在Qt Creator中新建一个Qt Widgets Application项目。
在项目中添加ECharts的库文件（echarts.min.js和echarts-gl.min.js）和样式文件（echarts.min.css和echarts-gl.min.css）。
在主窗口的头文件中包含ECharts的库文件和样式文件，并声明一个QWebEngineView对象。
在主窗口的构造函数中，设置QWebEngineView对象的属性并加载ECharts的库文件和样式文件。
在主窗口的槽函数中，使用QWebEngineView对象的evaluateJavaScript()方法加载ECharts的图表。

示例代码

#include <QtWidgets>
#include <QtWebEngineWidgets>
#include <QWebChannel>

class MainWindow : public QMainWindow
{
public:
    MainWindow()
    {
        QWebEngineView *webView = new QWebEngineView(this);
        setCentralWidget(webView);

        QWebChannel *channel = new QWebChannel(this);
        webView->page()->setWebChannel(channel);

        QWebEngineScript script;
        script.setSource(QString("var myChart = echarts.init(document.getElementById('chart'), 'light');"));
        webView->page()->runJavaScript(script);

        QJsonObject data;
        data["xAxis"] = QJsonArray({"周一", "周二", "周三", "周四", "周五", "周六", "周日"});
        data["series"] = QJsonArray{QJsonObject{{"type", "bar"}, {"data", QJsonArray{{100, 200, 300, 400, 500, 600, 700}}}};

        QJsonDocument doc(data);
        QString jsonString = doc.toJson(QJsonDocument::Compact);
        script.setSource(QString("myChart.setOption(%1);").arg(jsonString));
        webView->page()->runJavaScript(script);
    }
};

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    MainWindow window;
    window.show();
    return app.exec();
}