QT+Echarts初始示例

1.下载Echarts

打开官网https://echarts.apache.org/zh/index.html,进入下载页面，点击在线定制

按需选择全部图标，选择全部选项然后等待编译完成自动下载。

2.环境准备

引入web模块

在Qt5.6以后使用了谷歌浏览器内核，不再支持mingw32版本的，所以要使用msvc版本的Qt。

MSVC 是微软专属的 C/C++ 编译器工具链（包含 cl.exe 编译器、Windows SDK、链接器、标准库等），Qt 本身不自带 MSVC，仅提供 "适配 MSVC 编译的 Qt 库"，但编译器本体必须由微软提供（通过 Visual Studio 或独立的 MSVC Build Tools 安装）。没有安装 Visual Studio（或单独的 MSVC 构建工具）时，Qt Creator 无法自动检测到 MSVC 套件（Kit）。

Qt 安装包中可选择自带 MinGW 编译器（如 MinGW 11.2.0），因此即使不装其他软件，只要 Qt 安装时勾选了 MinGW 组件，Qt Creator 就能检测到 MinGW 套件；但 MSVC 无此 "自带" 选项，必须依赖微软工具。

安装QtWebEngineWidgets

在 Windows 平台上，QtWebEngineWidgets依赖于 Chromium 内核，官方预编译的二进制包通常要求使用 MSVC 编译器

从 Qt 6.8 开始，Qt Installer 的组件分类有所调整。 Qt WebEngine**（以及相关的** Qt PDF****模块）现在被归类在顶层的 Extensions（扩展）节点下，安装QT或者通过 MaintenanceTool更新组件时，从Extensions（扩展）节点下载。

3.代码实现

新建HTML文件

cpp 复制代码

<!DOCTYPE html>
<html>
<head>
    <!-- 1. 修正编码为UTF-8，避免中文乱码 -->
    <meta charset="UTF-8" />
    <title>ECharts</title>
   
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备宽高的 DOM 容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 整合配置项（移除游离代码，统一为折线图）
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量'] // 与series.name对应，保证图例正常显示
            },
            // 整合xAxis配置（改用A/B/C类目）
            xAxis: {
                type: 'category',
                data: ['A', 'B', 'C']
            },
            yAxis: {
                type: 'value'
            },
            // 整合series配置（改为折线图，数据匹配xAxis）
            series: [
                {
                    name: '销量', // 与legend.data对应
                    type: 'line', // 折线图（原错误代码想实现的类型）
                    data: [120, 200, 150]
                }
            ]
        };

        // 渲染图表（无语法错误后可正常执行）
        myChart.setOption(option);
    </script>
</body>
</html>

将这个HTML文件和下载的echarts放在同一个文件夹

新建QT工程，在ui文件里放置一个QGridLayout组件。

在.pro文件里面添加

cpp 复制代码

QT += webenginewidgets

头文件为

cpp 复制代码

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QWebEngineView>

QT_BEGIN_NAMESPACE
namespace Ui {
class Widget;
}
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();


private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

源文件为

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QUrl>
#include <QFile>
#include <QDebug>
#include <QWebEngineView>
#include <QWebEnginePage>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QWebEngineView *pEngView = new QWebEngineView(this);
    ui->gridLayout->addWidget(pEngView);
    pEngView->setContextMenuPolicy(Qt::NoContextMenu);

    // 1. 定义 HTML 绝对路径
    QString htmlPath = "D:/Gpc/QtProjects/QEchart/echarts.html";
    // 2. 验证文件是否存在
    if (!QFile::exists(htmlPath)) {
        qDebug() << "HTML 文件不存在！路径：" << htmlPath;
    }
    if (!QFile::exists("D:/Gpc/QtProjects/QEchart/echarts.min.js")) {
        qDebug() << "ECharts JS 文件不存在！";
    }
    // 3. 加载本地 HTML
    pEngView->load(QUrl::fromLocalFile(htmlPath));
}

Widget::~Widget()
{
    delete ui;
}

运行后结果如下：