QT Echarts 使用详解（二）ECharts柱状图\交互

最新推荐文章于 2024-09-18 09:53:08 发布
最新推荐文章于 2024-09-18 09:53:08 发布
阅读量2.1k 收藏 25
点赞数 2
分类专栏： # QT Echarts项目应用 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37529913/article/details/127587725
版权

        Echarts是百度的一款可视化界面开发的平台，里面的地图以及数据可视化内容十分丰富，适合用于一些大屏数据显示项目或者一些ui界面开发。每一个ECharts图表使用一个无边框的QWebView来展示，这样多个不同类型的ECharts图表就是多个封装不同类型ECharts图表的QWebView（html加载入QWebView窗口来实现），每一个模块封装的数据用qt预留接口调用js代码实现修改html的功能，最终达到代码操作qt即可操作图表的功能。

        ECharts 官网下载： Apache ECharts

 本文作者原创，未经允许请勿转载，本帖原创请勿照抄。

QT Echarts 使用详解（二）ECharts柱状图\交互目录

1 新建html

2 控件提升

3 交互

3.1 JS封装

3.2 QT调用JS

4 效果图

1 新建html

        新建heml， 从echarts官网考一个动态Demo

option = {
  to  ]
};

oltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: 'Mail Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Affiliate Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: 'Search Engine',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
};

2 控件提升

        修改控件属性提升为        QWebEngineView

3 交互

        QT通过QWebEngineView来调用HTML页面，在HTML中通过JS来调用ECharts。

3.1 JS封装

        设置ECharts中JS属性的方法，QT可以通过QWebEngineView调用加载的html页面中的JS方法，所以我们要将.HTML页面中JS设置ECharts属性的那段代码封装成一个方法。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="gbk" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>

  	<style>
	    #main,
	    html,
	    body{
	        overflow: hidden;
	    }

	</style>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main"style="width: 750px;height:450px;"></div>

    <script type="text/javascript">
      	// 基于准备好的dom，初始化echarts实例
      	var myChart = echarts.init(document.getElementById('main'));
      	// 窗口高度变化设置
      	window.onresize = function() {
          myChart.resize();
      	}
     	function init(){
      	var option;
			option = {
			  tooltip: {
			    trigger: 'axis',
			    axisPointer: {
			      // Use axis to trigger tooltip
			      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
			    }
			  },
			  legend: {},
			  grid: {
			    left: '3%',
			    right: '4%',
			    bottom: '3%',
			    containLabel: true
			  },
			  xAxis: {
			    type: 'value'
			  },
			  yAxis: {
			    type: 'category',
			    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			  },
			  series: [
			    {
			      name: 'Direct',
			      type: 'bar',
			      stack: 'total',
			      label: {
			        show: true
			      },
			      emphasis: {
			        focus: 'series'
			      },
			      data: [0, 0, 0, 0, 0, 0, 0]
			    },
			    {
			      name: 'Mail Ad',
			      type: 'bar',
			      stack: 'total',
			      label: {
			        show: true
			      },
			      emphasis: {
			        focus: 'series'
			      },
			      data: [0, 0, 0, 0, 0, 0, 0]
			    },
			    {
			      name: 'Affiliate Ad',
			      type: 'bar',
			      stack: 'total',
			      label: {
			        show: true
			      },
			      emphasis: {
			        focus: 'series'
			      },
			      data: [0, 0, 0, 0, 0, 0, 0]
			    },
			    {
			      name: 'Video Ad',
			      type: 'bar',
			      stack: 'total',
			      label: {
			        show: true
			      },
			      emphasis: {
			        focus: 'series'
			      },
			      data: [0, 0, 0, 0, 0, 0, 0]
			    },
			    {
			      name: 'Search Engine',
			      type: 'bar',
			      stack: 'total',
			      label: {
			        show: true
			      },
			      emphasis: {
			        focus: 'series'
			      },
			      data: [0, 0, 0, 0, 0, 0, 0]
			    }
			  ]
			};
  		
	      // 使用刚指定的配置项和数据显示图表。
	      myChart.setOption(option);
      	}
      	function init2(str){
      	var option;
			option = {
			  tooltip: {
			    trigger: 'axis',
			    axisPointer: {
			      // Use axis to trigger tooltip
			      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
			    }
			  },
			  legend: {},
			  grid: {
			    left: '3%',
			    right: '4%',
			    bottom: '3%',
			    containLabel: true
			  },
			  xAxis: {
			    type: 'value'
			  },
			  yAxis: {
			    type: 'category',
			    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			  },
			  series: [
			    {
			      name: 'Direct',
			      type: 'bar',
			      stack: 'total',
			      label: {
			        show: true
			      },
			      emphasis: {
			        focus: 'series'
			      },
					data: str["data1"]
			    },
			    {
			      name: 'Mail Ad',
			      type: 'bar',
			      stack: 'total',
			      label: {
			        show: true
			      },
			      emphasis: {
			        focus: 'series'
			      },
					data: str["data2"]
			    },
			    {
			      name: 'Affiliate Ad',
			      type: 'bar',
			      stack: 'total',
			      label: {
			        show: true
			      },
			      emphasis: {
			        focus: 'series'
			      },
					data: str["data3"]
			    },
			    {
			      name: 'Video Ad',
			      type: 'bar',
			      stack: 'total',
			      label: {
			        show: true
			      },
			      emphasis: {
			        focus: 'series'
			      },
					data: str["data4"]
			    },
			    {
			      name: 'Search Engine',
			      type: 'bar',
			      stack: 'total',
			      label: {
			        show: true
			      },
			      emphasis: {
			        focus: 'series'
			      },
					data: str["data5"]
			    }
			  ]
			};
  		
	      // 使用刚指定的配置项和数据显示图表。
	      myChart.setOption(option);
      	}
      	
      	window.onresize = myChart.resize ;
		init();
    </script>
  </body>
</html>

        可以看到，此处JS代码中有 init() 和 init2() 方法，init() 用来初始化控件，init()2 用来动态调用。

3.2 QT调用JS

/******************************************************************************
 * Copyright CSDN 双子座断点 Co., Ltd.
 * Copyright www.dreambeging.vip Co., Ltd.
 * All right reserved. See COPYRIGHT for detailed Information.
 *
 * @file       mainwindow.cpp
 * @brief      XXXX Function
 *
 * @author     断点<dream.2017@qq.com>
 * @date       2022/10/28
 * @history
 *****************************************************************************/

#include "mainwindow.h"
#include "ui_mainwindow.h"

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

    _htmlDir = "D:/QEChar/diagram/";    // 使用了绝对路径,引到html文件夹
    _indexFileName = "echarts.html";

    version = "v1.0.0";
    setWindowTitle(QString("基于Qt的ECharts条状图Demo %1(双子座断点 QQ群:1037037294  blog:https://blog.csdn.net/qq_37529913?type=blog").arg(version));

    ui->widget->setContextMenuPolicy(Qt::NoContextMenu);
    ui->widget->load(QUrl(_htmlDir + _indexFileName));

}

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

void MainWindow::initialize()
{
    _pWebEngineView = new QWebEngineView(this);


    filePath = QString("%1/%2").arg(_htmlDir).arg(_indexFileName);
    qDebug() << "file exist:" << QFile::exists(filePath) << filePath;

    // 打印html文件内容
    QFile file(filePath);
    file.open(QIODevice::ReadOnly);
    qDebug() << QString(file.readAll());
    file.close();
}


void MainWindow::on_pushButton_clicked()
{
    QJsonObject seriesData;
    QJsonArray data1;
    seriesData.insert("data1", data1);
    QJsonArray data2;
    seriesData.insert("data2", data2);
    QJsonArray data3;
    seriesData.insert("data3", data3);
    QJsonArray data4;
    seriesData.insert("data4", data4);
    QJsonArray data5;
    seriesData.insert("data5", data5);


    QString optionStr = QJsonDocument(seriesData).toJson();
    QString js = QString("init2(%1)").arg(optionStr);
    ui->widget->page()->runJavaScript(js);
}

//加入数据
void MainWindow::on_pushButton_3_clicked()
{
    QJsonObject seriesData;
    QJsonArray data1 = {320, 302, 301, 334, 390, 330, 320};
    seriesData.insert("data1", data1);
    QJsonArray data2 = {120, 132, 101, 134, 90, 230, 210};
    seriesData.insert("data2", data2);
    QJsonArray data3 = {220, 182, 191, 234, 290, 330, 310};
    seriesData.insert("data3", data3);
    QJsonArray data4 = {150, 212, 201, 154, 190, 330, 410};
    seriesData.insert("data4", data4);
    QJsonArray data5 = {820, 832, 901, 934, 1290, 1330, 1320};
    seriesData.insert("data5", data5);


    QString optionStr = QJsonDocument(seriesData).toJson();
    QString js = QString("init2(%1)").arg(optionStr);
    ui->widget->page()->runJavaScript(js);

}

void MainWindow::initJs()
{
    _initJsStr = QString(
            "var option;"
            "option = {"
                     "tooltip: {"
                       "trigger: 'axis',"
                       "axisPointer: {"
                         "type: 'shadow'"
                       "}"
                     "},"
                     "legend: {},"
                     "grid: {"
                       "left: '3%',"
                       "right: '4%',"
                       "bottom: '3%',"
                       "containLabel: true"
                     "},"
                     "xAxis: {"
                       "type: 'value'"
                     "},"
                     "yAxis: {"
                       "type: 'category',"
                       "data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
                     "},"
                     "series: ["
                     "{"
                       "name: 'Direct',"
                       "type: 'bar',"
                       "stack: 'total',"
                       "label: {"
                         "show: true"
                       "},"
                       "emphasis: {"
                           "focus: 'series'"
                         "},"
                         "data: [320, 302, 301, 334, 390, 330, 320]"
                       "},"
                       "{"
                         "name: 'Mail Ad',"
                         "type: 'bar',"
                         "stack: 'total',"
                         "label: {"
                           "show: true"
                         "},"
                         "emphasis: {"
                           "focus: 'series'"
                         "},"
                         "data: [120, 132, 101, 134, 90, 230, 210]"
                       "},"
                       "{"
                         "name: 'Affiliate Ad',"
                         "type: 'bar',"
                         "stack: 'total',"
                         "label: {"
                           "show: true"
                         "},"
                         "emphasis: {"
                           "focus: 'series'"
                         "},"
                         "data: [220, 182, 191, 234, 290, 330, 310]"
                       "},"
                       "{"
                         "name: 'Video Ad',"
                         "type: 'bar',"
                         "stack: 'total',"
                         "label: {"
                           "show: true"
                         "},"
                         "emphasis: {"
                           "focus: 'series'"
                         "},"
                         "data: [150, 212, 201, 154, 190, 330, 410]"
                       "},"
                       "{"
                         "name: 'Search Engine',"
                         "type: 'bar',"
                         "stack: 'total',"
                         "label: {"
                           "show: true"
                         "},"
                         "emphasis: {"
                           "focus: 'series'"
                         "},"
                         "data: [820, 832, 901, 934, 1290, 1330, 1320]"
                       "}"
                     "]"
                   "};"
            "myChart.setOption(option);"
        );
    runJsScript(_initJsStr);
}

void MainWindow::runJsScript(QString str)
{

}

void MainWindow::resizeEvent(QResizeEvent *event)
{

}

/******************************************************************************
 * Copyright CSDN 双子座断点 Co., Ltd.
 * Copyright www.dreambeging.vip Co., Ltd.
 * All right reserved. See COPYRIGHT for detailed Information.
 *
 * @file       mainwindow.h
 * @brief      XXXX Function
 *
 * @author     断点<dream.2017@qq.com>
 * @date       2022/10/28
 * @history
 *****************************************************************************/

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

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


#include <QtWebEngineWidgets/QWebEngineView>

#pragma execution_character_set("utf-8")
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
protected:
    void initJs();

    void runJsScript(QString str);

    void resizeEvent(QResizeEvent *event);


private slots:
    void on_pushButton_clicked();

    void on_pushButton_3_clicked();

private:
    Ui::MainWindow *ui;

    void MainWindow::initialize();

    QWebEngineView *_pWebEngineView;            // 浏览器窗口

    QString filePath;
    QString version;                            //版本

    QString _htmlDir;                           // html文件夹路径
    QString _indexFileName;                     // html文件

    QString _initJsStr;                         // 第一次初始化的表格
};
#endif // MAINWINDOW_H

QT       += core gui
QT += webenginewidgets
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++11

# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
    main.cpp \
    mainwindow.cpp

HEADERS += \
    mainwindow.h

FORMS += \
    mainwindow.ui

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

4 效果图

双子座断点
关注
专栏目录
Qt Qwt 图表库详解及使用
MusicScore的博客
07-08 584
Qwt 提供了一套用于绘制二维图表的控件，包括曲线图、散点图、柱状图、饼图等。它还提供了一些用于显示和交互的数据控件，如滑块、旋钮和刻度尺。丰富的图表类型支持实时数据更新高度可定制的样式和布局强大的交互功能// 创建第一条折线图数据// 设置曲线颜色// 创建第二条折线图数据// 设置曲线颜色// 添加图例// 设置坐标轴标签Qwt 是一个功能强大的图表库，适用于各种技术应用。
Qt QChart 图表库详解及使用
MusicScore的博客
07-08 509
Qt Charts 是 Qt 提供的一个附加模块，用于创建和管理各种类型的图表。丰富的图表类型：折线图、柱状图、饼图、散点图等。高度可定制的样式和布局。支持多轴绘图和实时更新。提供交互功能，如缩放、平移和选择。// 创建第一条折线图数据系列// 创建第二条折线图数据系列// 创建图表对象// 自定义坐标轴// 显示图例// 创建图表视图Qt Charts 是一个功能强大的图表库，适用于各种数据可视化需求。
QML QT6 WebEngineView 、Echarts使用和数据交互
最新发布
qq_50373827的博客
09-18 1767
通过这个完整的流程，你可以看到如何在 QML 和 HTML 中使用和QML 向 HTML 发送数据：通过调用网页端的函数，并通过触发信号。HTML 向 QML 发送数据：通过qmlObject调用 QML 暴露的方法，实现从网页向 QML 传递数据。双向通信：通过，实现网页和 QML 之间的实时双向通信，网页可以调用 QML 的方法，QML 也可以触发事件发送数据到网页。这种方法非常适合需要在 QML 和 HTML 中进行复杂交互的场景，如数据可视化、动态内容更新等。
qt 使用 echarts图表
09-18
qt 使用echarts图表，利用qt的webkits 组件加载echarts图表呈现，可以进行交互。
QT之调用EChart (二）
octdream的专栏
12-18 4329
一前言 之前写过一篇QT怎么调用EChart的文章，在文章中有写到关于EChart与QT窗口自适应问题。最近由于项目中需要用到这一技术，所以在做项目过程中，有新的体会。 https://blog.csdn.net/octdream/article/details/90482654 二效果图 二功能实现 1新建一个GUI工程 2在ui编辑器中，在窗口中新增一个QWidget...
Qt之QWebEngineView调用Echarts方法
ISmileLi的博客
12-24 7580
最近在做Qt绘制散点图和统计图的方法，顺便研究了一下Qt中使用Echarts的方法，Echarts功能很强大，Qt中调用其他也很方便。我使用的是Qt5.6版本中的QWebEngineView显示Echarts图的，Qt5.4（包括5.4）之前的版本是使用QWebView进行显示的，方法都是一样的。测试代码写的比较简单，只是为了说明使用。一、效果图如下： 效果图中的html代码是从官网中直接粘贴下来
qt 使用 echarts
活到老、学到老
09-21 5203
Echarts 是一个web的图表库，包含各种图表，如饼图、柱状图、折线图、雷达图、散点图、关系图、盒图....非常多，每一种图表都有对应的demo,直接下载根据自己的需求进行改造，界面非常炫酷，代码简单。 官网地址：http://www.echartsjs.com/index.html 下载对应版本的SDK。 完整项目下载地址：https://download.csdn.net/downloa...
qt 使用Echart 绘图
10-25
qt echart 绘图 webview 解决qt4绘图问题
QT与ECharts交互实现曲线图绘制教程
资源摘要信息:"QT与ECharts交互教程详细介绍了如何在QT开发环境中使用ECharts图表库绘制曲线图。教程针对初学者设计，内容浅显易懂，旨在帮助开发者快速掌握QT与ECharts的基本交互方法。本教程不仅提供了理论知识，...
QMessageBox使用详解
啊渊的专栏
11-13 703
`QMessageBox` 是 Qt 框架中用于显示消息框（弹窗）的类。它用于在应用程序中向用户显示信息、提供选择等交互操作。
QT5中使用Echarts图表组件演示代码
12-21
这是本人博客《QT5中使用Echarts图表组件》文中的演示代码，博客的地址是：http://blog.csdn.net/liuyez123/article/details/50372123
Qt详解QCharts数据图表
m0_62599305的博客
08-27 247
QCharts是 Qt 的一个模块，专用于创建和显示各种类型的数据图表。作为 Qt 的一部分，QCharts提供了丰富的图表类型和功能，使开发者能够在应用程序中集成图形化的数据展示。无论是线图、柱状图、饼图还是散点图，QCharts都能轻松地帮助用户可视化数据，并提供交互式功能来提升用户体验。QCharts是一个强大的数据图表模块，为 Qt 应用程序提供了丰富的图表类型和高度的定制化选项。通过直观的图形展示和交互功能，QCharts能够帮助用户更好地理解和分析数据。
QT笔记：Qt调用Echarts
weixin_43878765的博客
05-21 1660
Echarts简介 Echarts是百度的一个纯Javascript的开源图表库，支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达 图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现，界面十分漂亮美观。 Echarts下载 [4.7.0下载地址](https://github.com/apache/incubator-e
Qt echarts 教程（1）：qt echarts的基本使用方法
琅嬛福地
07-01 3218
在使用Qt进行项目开发时，有时会遇到数据采集的需求，需要将数据用动态曲线展示，或者饼状图，树状图等，对于这种动态曲线，可以用成熟的组件，例如QCharts, QCustomPlot, QWT等等，也可以自己绘制，这些都是C++的解决方案，在前端领域，则有更优秀的Echarts来实现动态曲线，本篇博客介绍在Qt项目中如何使用ECharts进行数据展示。 ECharts简介 ECharts是百度的项目，之前的官网是http://echarts.baidu.com 几个月前还能打开，现在百度把它交给阿帕奇了，新
QT调用Echart实现数据可视化
weixin_42246754的博客
09-14 1824
开发时碰到一个问题，就是QT调用Echart会很卡顿，这个现象在Debug时会很明显，但是在Release时是可以正常显示了。
Qt+ECharts开发笔记（三）：ECharts的柱状图介绍、基础使用和Qt封装Demo
Bejpse的博客
08-02 869
上一篇成功是EChart随着Qt窗口变化而变化，本篇将开始正式介绍柱状图介绍、基础使用，并将其封装一层Qt。本篇的demo实现了隐藏js代码的方式，实现了一个条形图的基本交互方式，即Qt调用js脚本操作html。...
QT加载echarts图表并进行数据交互详细过程
weixin_55735677的博客
03-17 3284
在QT中加载echarts图表，并且在QT中传递数据修改图表的数据。
Qt图表eCharts
雨田哥的博客
12-11 3284
Qt之图表-eCharts Qt之图表-eCharts 简述 效果图 代码 结尾简述 最近，因某些需要，做了一个图表，这里用的是第三方的JS库，很强大，ECHARTS，应用起来很方便，功能很多，这里我贴出了，API文档。 效果图代码option = { //颜色组 color:['#00A1FF','#FF7700'], //提示框 tooltip: {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

双子座断点

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

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

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

打赏作者

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

抵扣说明：

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

余额充值