前言

运用Qt开发大数据可视化看板，根据Qt运用QWidget或者QML是很难到达ECharts大数据看板的作用，所以运用Qt来制作。

核心思想

每一个ECharts图表浏览器历史记录设置运用一个无边框的QWebView来展现，这样多开源代码网站github个不同类型的ECharts图表就是多个封装不同类型ECharts图表的QWebView（html加载入QWebView窗口来完成），每一个模块封装的数据用qt预留接口调用js代码完成修改html的功用，最终到达代码操作qt即可操作图表的功用。

Demo演示

Qt+ECharts开发笔记（一）：ECharts介绍、下载和Qt调用ECharts根底柱状图Demo

为了完成我们多模块化，窗口的布景通明是很要害的，测验布景通明：

提高窗口布景通明作用：

测验结果可以到达预期。

ECharts

简介

ECharts浏览器下载，缩写来自 Enterprise Chart浏览器历史上的痕迹在哪里s，商业开源矿工级数据图表，是百度的一个开源的数据可视化东西，一个纯浏览器的历史 Javascript 的图表库，可以在 PC 端和移动设备上流通运转，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库element翻译 ZRender，ECharts 提供直观，生动，可交互，可高度个性化定制的数据可视化图表。立异的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行发掘、整合的能力。

主要功用

ECharts 提供了惯例的折线图、柱状图、散点图、饼图、git命令K线图，用于统计的盒形图，用于地理数据可视化的地图、热力求、线图，用于联系数据可视化的联系图、treemap、旭日图，多维数据可视化的平行坐标giti轮胎，还有用于浏览器历史上的痕迹在哪里 BI 的漏斗图，仪浏览器历史记录设置表盘，而且支撑图与图之间的混搭。

下载

官网地址：echarts.apache.org 在线定制：echarts.apache.org/gitlabzh/builder.html 一个一个封装，所以仅勾选柱状图

经过等待：

然后会卡住，卡住的原因是因开源为勾选了“兼容IE8”，所以补Element勾选久可，请耐心等下，最终会下载一个giti轮胎js，如下图：

那么直接运用悉数下下来的吧，3.5MB左右，并不是很elementary大，后续假如细化发布再看浏览器怎么打开网站运用到了什么去定制什么。

Qt中引入EChargithub永久回家地址ts

过程一：引入web模块

这个很要害，在Qgitit5.6今后运用了谷歌浏览器内核，不再支撑mingw32版别的，所以要运用msvc版别的Qt。

QT += webenginewidgets

过程二：初始化窗口

构造函数中，置0

BarEChartWidget::BarEChartWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::BarEChartWidget),
    _pWebEngineView(0),
    _pWebEnginePage(0),
    _pWebChannel(0),
    _htmlDir("D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html"),    // 运用了绝对路径,引到html文件夹
    _indexFileName("barEChartWidget.html")
{
    ui->setupUi(this);
    QString version = "v1.0.0";
    setWindowTitle(QString("Qt调用EChartsDemo %1(长沙红胖子 QQ:21497936 WX:15173255813 blog:hpzwl.blog.csdn.net").arg(version));
    // 设置无边框，以及布景通明
    // 布景通明，在界面构架时，若为本窗口为其他窗口提高为本窗口时，
    // 则再qss会在主窗口榜首级添加frame_all，防止其他窗口提高本窗口而冲掉qss设置
//    setWindowFlag(Qt::FramelessWindowHint);
    setAttribute(Qt::WA_TranslucentBackground, true);
    // 让滚动条不出来
    resize(600 + 20, 400 + 20);
    initControl();
}

elements一浏览器哪个好个是浏览器窗口初始化，一个是js交互的初始化

void BarEChartWidget::initControl()
{
    _pWebEngineView = new QWebEngineView(this);
    _pWebEnginePage = new QWebEnginePage(this);
    _pWebChannel = new QWebChannel(this);
    QString filePath;
#if 0
    filePath = QString("%1/%2").arg(_htmlDir).arg(_indexFileName);
#else
    filePath = "qrc:/barEChartWidget/html/barEChartWidget.html";
#endif
    LOG << "file exist:" << QFile::exists(filePath) << filePath;
#if 0
    // 打印html文件内容
    QFile file(_indexFilePath);
    file.open(QIODevice::ReadOnly);
    LOG << QString(file.readAll());
    file.close();
#endif
    _pWebEnginePage->load(QUrl(filePath));
    _pWebEnginePage->setWebChannel(_pWebChannel);
    _pWebEngineView->setPage(_pWebEnginePage);
    // 布景通明
//    _pWebEngineView->setStyleSheet("background-color: transparent");
//    _pWebEnginePage->setBackgroundColor(Qt::transparent);
}

过程三：窗口大小跟从

void BarEChartWidget::resizeEvent(QResizeEvent *event)
{
    if(_pWebEngineView)
    {
        _pWebEngineView->setGeometry(rect());
    }
}

模块化

这是柱状图模块。

Dehttps和http的区别mo

BarEChartWidget.h

#ifndef BARECHARTWIDGET_H
#define BARECHARTWIDGET_H
#include <QWidget>
#include <QWebEngineView>
#include <QWebEnginePage>
#include <QWebChannel>
namespace Ui {
class BarEChartWidget;
}
class BarEChartWidget : public QWidget
{
    Q_OBJECT
public:
    explicit BarEChartWidget(QWidget *parent = 0);
    ~BarEChartWidget();
protected:
    void initControl();
protected:
    void resizeEvent(QResizeEvent *event);
private:
    Ui::BarEChartWidget *ui;
private:
    QWebEngineView *_pWebEngineView;            // 浏览器窗口
    QWebEnginePage *_pWebEnginePage;            // 浏览器页面
    QWebChannel *_pWebChannel;                  // 浏览器js交互
    QString _htmlDir;                           // html文件夹路径
    QString _indexFileName;                     // html文件
};
#endif // BARECHARTWIDGET_H

BarEChartsWidget.cpp

#include "BarEChartWidget.h"
#include "ui_BarEChartWidget.h"
#include <QFile>
#include <QMessageBox>
// QtCreator在msvc下设置编码也或有一些乱码，直接一刀切,防止繁琐的设置
#define MSVC
#ifdef MSVC
#define QSTRING(s)  QString::fromLocal8Bit(s)
#else
#define QSTRING(s)  QString(s)
#endif
#include <QDebug>
#include <QDateTime>
//#define LOG qDebug()<<__FILE__<<__LINE__
//#define LOG qDebug()<<__FILE__<<__LINE__<<__FUNCTION__
//#define LOG qDebug()<<__FILE__<<__LINE__<<QThread()::currentThread()
//#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd")
#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss:zzz")
BarEChartWidget::BarEChartWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::BarEChartWidget),
    _pWebEngineView(0),
    _pWebEnginePage(0),
    _pWebChannel(0),
    _htmlDir("D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html"),    // 运用了绝对路径,引到html文件夹
    _indexFileName("barEChartWidget.html")
{
    ui->setupUi(this);
    QString version = "v1.0.0";
    setWindowTitle(QString("Qt调用EChartsDemo %1(长沙红胖子 QQ:21497936 WX:15173255813 blog:hpzwl.blog.csdn.net").arg(version));
    // 设置无边框，以及布景通明
    // 布景通明，在界面构架时，若为本窗口为其他窗口提高为本窗口时，
    // 则再qss会在主窗口榜首级添加frame_all，防止其他窗口提高本窗口而冲掉qss设置
//    setWindowFlag(Qt::FramelessWindowHint);
    setAttribute(Qt::WA_TranslucentBackground, true);
    // 让滚动条不出来
    resize(600 + 20, 400 + 20);
    initControl();
}
BarEChartWidget::~BarEChartWidget()
{
    delete ui;
}
void BarEChartWidget::initControl()
{
    _pWebEngineView = new QWebEngineView(this);
    _pWebEnginePage = new QWebEnginePage(this);
    _pWebChannel = new QWebChannel(this);
    QString filePath;
#if 0
    filePath = QString("%1/%2").arg(_htmlDir).arg(_indexFileName);
#else
    filePath = "qrc:/barEChartWidget/html/barEChartWidget.html";
#endif
    LOG << "file exist:" << QFile::exists(filePath) << filePath;
#if 0
    // 打印html文件内容
    QFile file(_indexFilePath);
    file.open(QIODevice::ReadOnly);
    LOG << QString(file.readAll());
    file.close();
#endif
    _pWebEnginePage->load(QUrl(filePath));
    _pWebEnginePage->setWebChannel(_pWebChannel);
    _pWebEngineView->setPage(_pWebEnginePage);
    // 布景通明
//    _pWebEngineView->setStyleSheet("background-color: transparent");
//    _pWebEnginePage->setBackgroundColor(Qt::transparent);
}
void BarEChartWidget::resizeEvent(QResizeEvent *event)
{
    if(_pWebEngineView)
    {
        _pWebEngineView->setGeometry(rect());
    }
}

barEChartWidget.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
<!--    <script src="https://juejin.im/post/7116357121293156389/echarts.js"></script>-->
    <script src="./echarts.js"></script>
<!--    <script src="D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html/echarts.js"></script>-->
<!--    <script src="https://juejin.im/post/7116357121293156389/echarts.min.js"></script>-->
<!--    <script src="https://juejin.im/post/echarts.min.js"></script>-->
<!--    <script src="https://juejin.im/post/html/echarts.min.js"></script>-->
<!--    <script src="D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html/echarts.min.js"></script>-->
  </head>
  <body>
    <!-- 为 ECharts 预备一个界说了宽高的 DOM -->
    <div id="main" style="width:600px; height:400px;"></div>
    <script type="text/javascript">
        // 根据预备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('main'));
        // 指定图表的装备项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
        };
        // 运用刚指定的装备项和数据显现图表。
        myChart.setOption(option);
    </script>
  </body>
</html>

工程模板v1.0.0

入坑

入坑一：“js: Uncaught TypeError: echarts.init is not a function”过错

问题

各种测验浏览器历史上的痕迹在哪里都不可：

解决方法

echarts的版别5.x太高，换成低版别的4.x就解决了 github.com/apac浏览器历史记录设置he/echa… 成功加载：

Qt+ECharts开发笔记（一）：ECharts介绍、下载和Qt调用ECharts基础柱状图Demo

前言

核心思想

Demo演示

ECharts

简介

主要功用

下载

Qt中引入EChargithub永久回家地址ts

过程一：引入web模块

过程二：初始化窗口

过程三：窗口大小跟从

模块化

Dehttps和http的区别mo

工程模板v1.0.0

入坑

入坑一：“js: Uncaught TypeError: echarts.init is not a function”过错

问题

解决方法

作者信息

推广

Qt+ECharts开发笔记（一）：ECharts介绍、下载和Qt调用ECharts基础柱状图Demo

前言

核心思想

Demo演示

ECharts

简介

主要功用

下载

Qt中引入EChargithub永久回家地址ts

过程一：引入web模块

过程二：初始化窗口

过程三：窗口大小跟从

模块化

Dehttps和http的区别mo

工程模板v1.0.0

入坑

入坑一：“js: Uncaught TypeError: echarts.init is not a function”过错

问题

解决方法

相关文章

基于 OpenYurt & EdgeX Foundry 的云边端一体化解决方案

ControlNet大更新：仅靠提示词就能精准P图，保持画风不变，网友：效果堪比定制大模型

博客3：YOLOv5车牌识别实战教程：模型训练与评估

突破 etcd 限制！字节自研 K8s 存储 KubeBrain

作者信息

推广