QT加载echarts图表并进行数据交互详细过程

这篇具有很好参考价值的文章主要介绍了QT加载echarts图表并进行数据交互详细过程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近做一个数据可视化大屏的项目,其中用到echarts图表来动态展示数据,并且进行数据交互。由于之前没接触过,看了很多文章,也走了很多弯路,终于学会了,下面记录一下自己的学习过程,亲测完全可用。

效果:本来想放个视频,但是现在文章里面好像不能加视频,找了半天没找到。所以我上传了一个视频:

https://live.csdn.net/v/283290?spm=1001.2014.3001.5501

echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档
echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档
  1. 下载echarts库:

进入echarts官网:https://echarts.apache.org/examples/zh/index.html#chart-type-line,然后找到下载,点击Dist,找到echarts.js,点击下载。

第一步:

echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档

第二步:

echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档

第三步:

echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档
  1. 下载echarts示例:

在echarts官网,找一个需要的案例,下载。

echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档

然后就会得到如下图所示的两个文件。

echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档

把这两个文件放到同一个文件夹内。

  1. 创建Qt工程:

新建一个QT工程,然后把上面装有echarts.js和示例的文件夹放入到工程文件夹中。

echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档

然后在工程的.pro文件中加入

QT += webenginewidgets

提示:如果加入QT += webenginewidgets后,工程报错说QWebengine模块不存在,说明QT中缺少这个组件。要安装这个组件。

安装QWebengine组件步骤:

第一步:

找到安装QT的文件夹里面的MaintenanceTool.exe,点击运行。

echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档

第二步:登录后选择组件,勾选QWebengine。这里需要注意,因为echarts示例文件格式为.html,用JavaScript编写,我一般用VS(visual studio)打开文件进行操作。并且QWebengine提示在Windows下,仅适用MSCV编译器,而且msvc编译器版本要求和VS版本相同,比如我用MSVC2019编译器,VS也是2019。

echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档

然后等待安装完成就行了。

环境配置好就可以进行加载图表了。

  1. 加载echarts

在Qt工程中,打开ui界面,在界面中添加一个widget,并将其提升为QWebEngineView。

echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档

在.cpp文件的构造函数中加入以下代码,点击运行就可以加载出echarts图表。

ui->widget->setContextMenuPolicy(Qt::NoContextMenu);
ui->widget->load(QUrl("D:/QTproject/problem/Echarts/bar-background.html"));//这个路径选择自己的文件所在路径
echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档

但是我们需要的效果是使窗口背景透明,以便后续添加背景。所以还需要两行代码:

ui->widget->setStyleSheet("background-color: transparent");
ui->widget->page()->setBackgroundColor(Qt::transparent);

效果:

echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档
  1. 在工程中对echarts进行数据交互

进行数据交互我们要先在示例文件中写好接收数据的函数,然后在工程中写好传入的数据和数据解析函数。因为示例文件是使用JavaScript编码,直接传递数据它处理不了,所以我们需要用runJavaScript这个函数来进行数据解析。

第一步:修改示例文件

用VS打开示例文件,进行修改。打开之后就是这样子,我会把框里的代码删掉,都是注释没啥用。(这个.html文件,你也可以修改其他的属性,加标题,改颜色等等,双击.html文件是用浏览器打开,打开可以看到表,如果没有表,说明.html文件里面有误。)

echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档

然后在utf-8下面加入echarts.js

<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./echarts.js"></script>
echarts qt 交互,QT,echarts,javascript,qt,c++,Powered by 金山文档
第二步:编写数据接收函数

对于柱状图,我需要修改它的横坐标和柱状数据(就是你要改变的数据),所以我的数据接收函数有两个值,如果需要修改别的数据,做法是相同的。

//.html文件中完整代码

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.js"></script>
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  xAxis: {    //x轴的数据
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {    
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],    //柱状图数据
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

        //数据接收函数,原理就是需要改变数据的地方,重置那部分数据就可以
      function onDataReceived(name, data) {
          var option = {
              xAxis: {
                  data: name
              },
              series: [{
                  data: data,
                  type: 'bar'
              }]
          };
          myChart.setOption(option)
      }

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>
第三步:QT项目中编写数据解析函数

通过数据解析函数,把数据转换成字符串传过去,然后通过点击按钮来调用该函数。这样点击按钮就可以实现echarts数据。

//数据解析函数
void Widget::Update(const vector<QString> &name, const vector<int> &data)
{
    //在QT中我们需要组成一个字符串将数据传过去
    QString jscode = "onDataReceived([";
    for(int i=0;i<name.size();i++)
    {
        jscode += QString("\"%1\"").arg(name[i]);
        if(i<name.size()-1)
            jscode += ",";
    }
    jscode += "],[";

    for(int i=0;i<data.size();i++)
    {
        jscode += QString::number(data[i]);
        if(i<data.size()-1)
            jscode += ",";
    }
    jscode += "])";
    ui->widget->page()->runJavaScript(jscode);
}

//通过按钮调用数据解析函数
void Widget::on_pushButton_clicked()
{
    vector<QString> name={"fhf","ert","hgf","fhgh","kuy","hgo"};
    vector<int> data={230,250,360,666,321,450};
    Update(name,data);
}

项目完整代码:

.html文件完整代码在上面,这里就不展示了。

.h文件

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <iostream>
#include <QVector>

using namespace std;
QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
    void Update(const vector<QString> &name ,const vector<int> &data);

private slots:
    void on_pushButton_clicked();

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

.cpp文件文章来源地址https://www.toymoban.com/news/detail-740419.html

#include "widget.h"
#include "ui_widget.h"
#include <QVector>
#include <iostream>


Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->widget->setStyleSheet("background-color: transparent");
    ui->widget->page()->setBackgroundColor(Qt::transparent);
    ui->widget->setContextMenuPolicy(Qt::NoContextMenu);
    ui->widget->load(QUrl("D:/QTproject/problem/Echarts/bar-background.html"));
}

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

void Widget::Update(const vector<QString> &name, const vector<int> &data)
{
    QString jscode = "onDataReceived([";
    for(int i=0;i<name.size();i++)
    {
        jscode += QString("\"%1\"").arg(name[i]);
        if(i<name.size()-1)
            jscode += ",";
    }
    jscode += "],[";

    for(int i=0;i<data.size();i++)
    {
        jscode += QString::number(data[i]);
        if(i<data.size()-1)
            jscode += ",";
    }
    jscode += "])";
    ui->widget->page()->runJavaScript(jscode.toUtf8());
}


void Widget::on_pushButton_clicked()
{
    vector<QString> name={"fhf","ert","hgf","fhgh","kuy","hgo"};
    vector<int> data={230,250,360,666,321,450};
    Update(name,data);
}

到了这里,关于QT加载echarts图表并进行数据交互详细过程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序+echarts简单图表以及与后端交互

    效果图:   需要的两个主要文件就是  echarts.min.js   和  echarts.vue  1、 echarts.min.js 可以去官网定制 链接   ECharts 在线构建   或者直接去GitHub - Tawesome666/echarts: echarts 下载 (注意:我这个只有柱状图和折线图) 2、 echarts.vue  可以使用 Visual Studio Code  打开你的文件夹使用命

    2024年02月09日
    浏览(42)
  • 【嵌入式Qt开发入门】如何使用Qt进行绘制实时图表——QChart 图表

            要想使用 Qt Charts,我们的 Qt 版本得使用 Qt 5.7 之后的版本。其实 Qt Charts 并不是 Qt 5.7 才有的,是在 Qt 5.7 以前只有商业版本的 Qt 才有 Qt Charts。我们能免费下载的 Qt 版本都是社区(开源)版本。         Qt Charts 很方便的绘制我们常见的曲线图、折线图、柱状

    2024年02月12日
    浏览(65)
  • 【[Qt]基于QChartView开发的图表显示控件,支持实时显示,动态更新,支持鼠标交互等操作】

    十字线和显示坐标实现 在.h文件中定义十字线lineitem变量和坐标textitem变量 在Cpp文件中初始化 然后定义鼠标事件,在鼠标进入时显示,移出时隐藏,移动时显示。 其他实现请参考具体代码 ChartDrawer.h文件 ChartDrawer.cpp 文件 具体使用代码如下 1、初始化类对象,并加入界面布局

    2023年04月23日
    浏览(44)
  • echarts 图表无数据/空数据 展示“暂无数据”

    我们从后端获取数据动态渲染图表时,难免会遇到数据为空的情况(虽然实际应用中这样的bug极少遇到),但考虑周全一点也好,看如何实现吧。  正常情况渲染图表: 我们只需要: 在定义option的外面加一个if条件判断,判断动态获取的数据是否有值,有则渲染图表,无则渲

    2024年02月06日
    浏览(37)
  • ECharts数据可视化--常用图表类型

    目录 一.柱状图 1.基本柱状图  1.1最简单的柱状图 ​编辑   1.2多系列柱状图   1.3柱状图的样式          (1)柱条样式                  (2)柱条的宽度和高度         (3)柱条间距         (4)为柱条添加背景颜色 ​编辑 2.堆叠柱状图 3.动态排序柱状图 4.阶梯

    2024年02月05日
    浏览(56)
  • Apache Echarts(智能生成图表)-数据可视化

    Apache ECharts 是一款基于Javascript的数据可视化图表库,提供直观生动可交互,可个行化定制的数据可视化图表 Apache ECharts是一个基于JavaScript的开源可视化库,用于创建交互式的、可定制的图表和数据可视化。它是由百度前端开发团队开发和维护的,于2013年首次发布,现在已成

    2024年04月11日
    浏览(42)
  • echart 图表添加数据分析功能,(右上控制选择)

    echart 图表添加数据分析功能,可区域选择数据,右上按钮,控制echart行为

    2024年02月11日
    浏览(42)
  • uniapp+vue3+ts+vite+echarts开发图表类小程序,将echarts导入项目使用的详细步骤,耗时一天终于弄好了

    想在uniapp和vue3环境中使用echarts是一件相当前卫的事情,官方适配的还不是很好,echarts的使用插件写的是有些不太清晰的,这里我花费了一天的时间,终于将这个使用步骤搞清楚了,并且建了一个仓库,大家可以直接clone下来使用。先看一下pc端和小程序端的效果: 微信小程

    2024年02月05日
    浏览(103)
  • echarts清空数据不能使用clear,完美解决清空图表

    提示:这里描述具体问题: 在每次显示的echarts图表时,有时候需要将之前的数据删除,在这个时候不能用clear,用这个删除会导致整个图表都删掉了,还得重新初始化。 提示:这里填写问题的分析:clear是将整个图表清除,而不是清除数据。 提示:这里填写该问题的具体解

    2024年02月14日
    浏览(43)
  • 解决vue3集成echarts数据刷新后图表不刷新问题

    vue3 集成 echarts 最大的坑就是出现了,reactive 的数据 刷新了,但图表缺不会刷新,查了很多资料,试了很多方式都没效果,最后测试出来解决方法很简单: 核心代码: 附上 TSX 整个页面参考

    2024年02月13日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包