C++ QT使用ECharts显示k线图、折线图

Echarts官网下载html和js示例

实际下载3个html和js文件

使用QWebEngineView展示

项目ui布局，创建3个按钮，右侧是QWebEngineView控件进行展示html

复制代码

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    connect(ui->rb_kline, &QRadioButton::toggled, this, &Widget::slots_toggled);
    connect(ui->rb_lines3d, &QRadioButton::toggled, this, &Widget::slots_toggled);
    connect(ui->rb_linesmooth, &QRadioButton::toggled, this, &Widget::slots_toggled);
}

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

void Widget::slots_toggled(bool toggled)
{
    if(toggled)
    {
        QRadioButton* senderRadioBtn = qobject_cast<QRadioButton*>(sender());
        if(!senderRadioBtn) return;

        QString exe_path = qApp->applicationDirPath();

        if(senderRadioBtn == ui->rb_kline)
        {
            QString kline =  exe_path + "/myecharts/candlestick-sh.html";
            ui->web_engine->setUrl(QUrl(kline));
        } else if(senderRadioBtn == ui->rb_lines3d)
        {
            QString lines3d =  exe_path + "/myecharts/lines3d-flights.html";
            ui->web_engine->setUrl(QUrl(lines3d));

        } else if(senderRadioBtn == ui->rb_linesmooth)
        {
            QString linesmooth =  exe_path + "/myecharts/line-smooth.html";
            ui->web_engine->setUrl(QUrl(linesmooth));
        }
    }
}

该案例是静态数据，下一节介绍QT动态设置Echarts数据进行展示

C++ QT动态设置echarts数据

C++ qt提供如下方法去调用javascript代码去动态设置数据

完整demo

布局

如下代码QWebEngineView界面加载完成在调用JS的方法去动态设置数据

复制代码

#include "widget.h"
#include "ui_widget.h"

#include <QJsonArray>
#include <QJsonDocument>
#include <QJsonObject>
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 连接页面加载完成的信号
    connect(ui->web_view, &QWebEngineView::loadFinished, this, &Widget::onPageLoaded);

    QString exe_path = qApp->applicationDirPath()  + "/echarts/line-simple.html";
    // 加载ECharts页面
    ui->web_view->setUrl(QUrl(exe_path));
}

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


//使用echarts默认数据
void Widget::on_btn_defaultData_clicked()
{
    //这里调用JavaScript的init()方法
    // 等待页面加载完成后再调用JavaScript
        if(ui->web_view->page()) {
            ui->web_view->page()->runJavaScript("init()", [this](const QVariant &result) {
                qDebug() << "init()函数调用完成";
            });
   }
}

void Widget::on_btn_redefineData_clicked()
{
    QJsonObject seriesData;

    //设置X轴数据
    QJsonArray dataX = {1,5,10,15,20,25,30,35,40};
    seriesData.insert("data_xAxis", dataX);

    //设置Y轴数据
    QJsonArray dataY = {100,70,1230,110,50,890,79,128,256};
    seriesData.insert("data_yAxis", dataY);

    QString optionStr = QJsonDocument(seriesData).toJson();
    QString js = QString("load_data(%1)").arg(optionStr);

    //C++调用js方法, 调用js的load_data方法并传入入参
    // 调用JavaScript函数
        if(ui->web_view->page()) {
            ui->web_view->page()->runJavaScript(js, [this](const QVariant &result) {
                qDebug() << "load_data()函数调用完成";
            });
        }
}

void Widget::onPageLoaded(bool ok)
{
    if(ok) {
        qDebug() << "Web页面加载完成";
            // 可以在这里执行一些初始化操作
    }
}

将line-simple.html和echarts.min.js放到运行目录下

line-simple.html

html 复制代码

<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line-simple
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://echarts.apache.org/zh/js/vendors/echarts-gl/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://echarts.apache.org/zh/js/vendors/echarts-stat/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-graph-modularity extension
  <script type="text/javascript" src="https://echarts.apache.org/zh/js/vendors/echarts-graph-modularity/dist/echarts-graph-modularity.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
	// 默认的图表配置
    var defaultOption = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        }]
    };

    // 当前图表配置
    var currentOption = null;

    // 初始化图表（加载默认数据）
    function init() {
        currentOption = defaultOption;
        if (currentOption && typeof currentOption === 'object') {
            myChart.setOption(currentOption);
        }
    }

    // 加载自定义数据
    function load_data(data) {
        if (!data) return;
        
        // 从C++传入的JSON数据中提取X轴和Y轴数据
        var dataX = data.data_xAxis || [];
        var dataY = data.data_yAxis || [];
        
        // 创建新的图表配置
        currentOption = {
            xAxis: {
                type: 'category',
                data: dataX
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: dataY,
                type: 'line',
                smooth: true
            }]
        };
        
        // 应用配置
        if (currentOption && typeof currentOption === 'object') {
            myChart.setOption(currentOption);
        }
    }
    
    var option;

    option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
	
	// 页面加载时初始化图表
    window.onload = function() {
        init();
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

JS中init和load_data方法

这里就完成了C++ qt中去调用JavaScript中方法去动态设置echarts数据

DONE!!!