QT:Qt与ECharts

介绍ECharts

ECharts是一款基于JavaScript的数据可视化图表库,由百度团队最初开发,并在2018年初捐赠给Apache基金会,成为ASF孵化级项目。随着项目的不断发展,ECharts在2021年1月26日正式毕业,成为Apache顶级项目
链接:https://echarts.apache.org/zh/index.html

下载

在这里插入图片描述

在这里插入图片描述
先选择自己需要的图形在进行下载
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
得到文件echarts.min.js

创建项目

工程目录下新建文件夹myecharts

在这里插入图片描述

选择下载实例
在这里插入图片描述

放到文件夹myecharts
在这里插入图片描述
将文件夹myecharts放到编译后的.exe目录下
在这里插入图片描述
E:\ljl\pro\qt\240711\ECharts01\build\Desktop_Qt_5_15_2_MinGW_32_bit-Debug\debug\myecharts\line-smooth.html

UI 添加控件一个widget 加三个

widget 提升QWebEngineView
在这里插入图片描述

    QString exe_path = qApp->applicationDirPath();
    QString _klinePath = exe_path + "/myecharts/line-stack.html";
    qDebug()<<_klinePath;
    ui->widget->setUrl(QUrl(_klinePath));

在这里插入图片描述
按键点击切换页面

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QString exe_path = qApp->applicationDirPath();
    QString _klinePath = exe_path + "/myecharts/line-stack.html";
    qDebug()<<_klinePath;
    ui->widget->setUrl(QUrl(_klinePath));

    connect(ui->radioButton_stack, &QRadioButton::toggled, [=](bool checked){
        if(checked)
        {
            ui->widget->setUrl(QUrl(_klinePath));
        }
    });

    connect(ui->radioButton_time, &QRadioButton::toggled, [=](bool checked){
        if(checked)
        {//area-time-axis.html
            QString _timePath = exe_path + "/myecharts/area-time-axis.html";
            ui->widget->setUrl(QUrl(_timePath));
        }
    });

    connect(ui->radioButton_smooth, &QRadioButton::toggled, [=](bool checked){
        if(checked)
        {
            QString _linePath = exe_path + "/myecharts/line-smooth.html";
            ui->widget->setUrl(QUrl(_linePath));
        }
    });

}

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

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

li星野

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值