Echarts是百度的一款可视化界面开发的平台，里面的地图以及数据可视化内容十分丰富，适合用于一些大屏数据显示项目或者一些ui界面开发。每一个ECharts图表使用一个无边框的QWebView来展示，这样多个不同类型的ECharts图表就是多个封装不同类型ECharts图表的QWebView（html加载入QWebView窗口来实现），每一个模块封装的数据用qt预留接口调用js代码实现修改html的功能，最终达到代码操作qt即可操作图表的功能。
ECharts 官网下载： Apache ECharts
本文作者原创，未经允许请勿转载，本帖原创请勿照抄。
QT Echarts 使用详解（二）ECharts柱状图\交互目录
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 效果图
834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
