AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Qt+ECharts开发笔记（三）：ECharts的柱状图介绍、基础使用和Qt封装Demo

2022-07-13 343
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 上一篇成功是EChart随着Qt窗口变化而变化，本篇将开始正式介绍柱状图介绍、基础使用，并将其封装一层Qt。  本篇的demo实现了隐藏js代码的方式，实现了一个条形图的基本交互方式，即Qt调用js脚本操作html。

前言

  上一篇成功是EChart随着Qt窗口变化而变化，本篇将开始正式介绍柱状图介绍、基础使用，并将其封装一层Qt。

  本篇的demo实现了隐藏js代码的方式，实现了一个条形图的基本交互方式，即Qt调用js脚本操作html。


Demo演示

  


ECharts调试工具

  ECharts提供的纯JS代码编辑开发调试工具，可编辑js，并且查看运行效果：

  https://echarts.apache.org/examples/zh/editor.html

  

  开发过程中对于属性的查询和调试ECharts也提供了配置帮助。

  官方配置手册：https://echarts.apache.org/zh/option.html

  


目标

  随便找一个预期目标：

  


ECharts接口静态方式

  使用EChart调试工具开发，先调试出基础框架。

  这里贴出的全部代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <!--<script src="echarts.js"></script>-->
    <script src="./echarts.js"></script>
    <!--<script src="D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html/echarts.js"></script>-->
    <!--<script src="echarts.min.js"></script>-->
    <!--<script src="./echarts.min.js"></script>-->
    <!--<script src="./html/echarts.min.js"></script>-->
    <!--<script src="D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html/echarts.min.js"></script>-->
  </head>
  <body>
    <!--设置body跟随查u哪个口，main填充body-->
    <style>
        #main,
        html,
        body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #main {
            width: 100%;
            height: 100%;
        }
    </style>
    <div id="main"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 窗口高度变化设置
        window.onresize = function() {
            myChart.resize();
        };
        // 指定图表的配置项和数据
        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);
        function initJs() {
            var myChart = echarts.init(document.getElementById('main'));
            var option;
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '50',
                    containLabel: true
                },
                legend: {
                    orient: 'horizontal',
                    x: 'center',
                    y: 'bottom',
                    itemGap: 100
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['项目1', '项目2', '项目3']
                },
                series: [
                    {
                        name: '变量1',
                        type: 'bar',
                        stack: 'totla',
                        label: {
                            show: true
                        },
                        data: [11, 12, 13]
                    },
                    {
                        name: '子项目1',
                        type: 'bar',
                        stack: 'totla',
                        label: {
                            show: true
                        },
                        data: [24, 20, 21]
                    },
                    {
                        name: '变量3',
                        type: 'bar',
                        stack: 'totla',
                        label: {
                            show: true
                        },
                        data: [95, 87, 55]
                    }
                ]
            };
        };
        initJs();
    </script>
  </body>
</html>


ECharts接口动态方式

  动态方式，最初目的是为了动态实现数据的js操作，在开发过程中发现动态方式还能隐藏echarts代码，使echarts代码不被抓取，最后决定全部改为动态加载方式。

步骤一：修改html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="./echarts.js"></script>
  </head>
  <body>
    <style>
        #main,
        html,
        body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #main {
            width: 95%;
            height: 95%;
        }
    </style>
    <div id="main"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        window.onresize = function() {
            myChart.resize();
        };
    </script>
  </body>
</html>

步骤二：初始化

  新增了loadFinished信号槽关联。

void BarEChartWidget::initControl()
{
    _pWebEngineView = new QWebEngineView(this);
    _pWebEnginePage = new QWebEnginePage(this);
    _pWebChannel = new QWebChannel(this);
    QString filePath;
#if 1
    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
    connect(_pWebEnginePage, SIGNAL(loadFinished(bool)), this, SLOT(slot_loadFinished(bool)));
    _pWebEnginePage->load(QUrl(filePath));
    _pWebEnginePage->setWebChannel(_pWebChannel);
    _pWebEngineView->setPage(_pWebEnginePage);
    // 背景透明
//    _pWebEngineView->setStyleSheet("background-color: transparent");
    _pWebEnginePage->setBackgroundColor(Qt::transparent);
}

步骤三：加载完成页面后进行初始化

void BarEChartWidget::slot_loadFinished(bool result)
{
    if(result)
    {
        initJs();
    }
}
void BarEChartWidget::initJs()
{
    _initJsStr = QSTRING(
            "var option;"
            "option = {"
            "    tooltip: {"
            "        trigger: 'axis'"
            "    },"
            "    grid: {"
            "        left: '10',"
            "        right: '10',"
            "        top: '10',"
            "        bottom: 30,"
            "        containLabel: true"
            "    },"
            "    legend: {"
            "        orient: 'horizontal',"
            "        x: 'center',"
            "        y: 'bottom',"
            "        itemGap: 20"
            "    },"
            "    xAxis: {"
            "        type: 'value'"
            "    },"
            "    yAxis: {"
            "        type: 'category',"
            "        data: ['项目1', '项目2', '项目3']"
            "    },"
            "    series: ["
            "        {"
            "            name: '变量1',"
            "            type: 'bar',"
            "            stack: 'totla',"
            "            label: {"
            "                show: true"
            "            },"
            "            data: [11, 12, 13]"
            "        },"
            "        {"
            "            name: '变量2',"
            "            type: 'bar',"
            "            stack: 'totla',"
            "            label: {"
            "                show: true"
            "            },"
            "            data: [24, 20, 21]"
            "        },"
            "        {"
            "            name: '变量3',"
            "            type: 'bar',"
            "            stack: 'totla',"
            "            label: {"
            "                show: true"
            "            },"
            "            data: [95, 87, 55]"
            "        }"
            "    ]"
            "};"
            "myChart.setOption(option);");
    runJsScript(_initJsStr);
}
void BarEChartWidget::runJsScript(QString str)
{
    if(_pWebEnginePage)
    {
        _pWebEnginePage->runJavaScript(str);
    }
}

步骤四：动态执行js操作

重置

void BarEChartWidget::on_pushButton_reset_clicked()
{
    initJs();
}

刷新

void BarEChartWidget::on_pushButton_flush_clicked()
{
    QString jsStr =
            "var empty = {};"
            "myChart.setOption(empty, true);"
            "myChart.setOption(option, true);";
    runJsScript(jsStr);
}

清空

void BarEChartWidget::on_pushButton_clear_clicked()
{
    QString jsStr =
            "option.series[0].data = [];"
            "option.series[1].data = [];"
            "option.series[2].data = [];"
            "myChart.setOption(option, true);";
    runJsScript(jsStr);
}

随机生成（使用js代码）

void BarEChartWidget::on_pushButton_createRandom_clicked()
{
    QString jsStr =
    "var min = 0;"
    "var max = 100;"
    "for(var i = 0; i < option.series.length; i++)"
    "{"
    "    for(var j = 0; j < option.yAxis.data.length; j++)"
    "    {"
    "        option.series[i].data[j] = Math.floor(Math.random() * (max - min)) + min;"
    "    }"
    "}"
    "myChart.setOption(option, true);";
    runJsScript(jsStr);
}

  后续用会将数据进行Qt的一份缓存数据，由Qt的数据去生成ecahrts的js脚本。


Demo

html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="./echarts.js"></script>
  </head>
  <body>
    <style>
        #main,
        html,
        body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #main {
            width: 95%;
            height: 95%;
        }
    </style>
    <div id="main"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        window.onresize = function() {
            myChart.resize();
        };
    </script>
  </body>
</html>

  在代码中使用js初始化echarts：

BarECartWidget.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 slots:
    void slot_loadFinished(bool result);
protected:
    void initJs();
protected:
    void runJsScript(QString str);
protected:
    void resizeEvent(QResizeEvent *event);
private slots:
    void on_pushButton_clear_clicked();
    void on_pushButton_flush_clicked();
    void on_pushButton_createRandom_clicked();
    void on_pushButton_reset_clicked();
private:
    Ui::BarEChartWidget *ui;
private:
    QWebEngineView *_pWebEngineView;            // 浏览器窗口
    QWebEnginePage *_pWebEnginePage;            // 浏览器页面
    QWebChannel *_pWebChannel;                  // 浏览器js交互
    QString _htmlDir;                           // html文件夹路径
    QString _indexFileName;                     // html文件
    QString _initJsStr;                         // 第一次初始化的表格
};
#endif // BARECHARTWIDGET_H

BarEChartWidget.cpp

#include "BarEChartWidget.h"
#include "ui_BarEChartWidget.h"
#include <QFile>
#include <QMessageBox>
#include <QTimer>
// 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的ECharts条状图Demo %1(长沙红胖子 QQ:21497936 WX:15173255813 blog:hpzwl.blog.csdn.net").arg(version));
    // 设置无边框，以及背景透明
    // 背景透明，在界面构架时，若为本窗口为其他窗口提升为本窗口时，
    // 则再qss会在主窗口第一级添加frame_all，防止其他窗口提升本窗口而冲掉qss设置
//    setWindowFlag(Qt::FramelessWindowHint);
//    setAttribute(Qt::WA_TranslucentBackground, true);
#if 0
    // 这是方法一：让滚动条不出来(通过大小)，还有一个方法是在html设置body的overflow: hidden
//    resize(600 + 20, 400 + 20);
#endif
    initControl();
}
BarEChartWidget::~BarEChartWidget()
{
    delete ui;
}
void BarEChartWidget::initControl()
{
    _pWebEngineView = new QWebEngineView(this);
    _pWebEnginePage = new QWebEnginePage(this);
    _pWebChannel = new QWebChannel(this);
    QString filePath;
#if 1
    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
    connect(_pWebEnginePage, SIGNAL(loadFinished(bool)), this, SLOT(slot_loadFinished(bool)));
    _pWebEnginePage->load(QUrl(filePath));
    _pWebEnginePage->setWebChannel(_pWebChannel);
    _pWebEngineView->setPage(_pWebEnginePage);
    // 背景透明
//    _pWebEngineView->setStyleSheet("background-color: transparent");
    _pWebEnginePage->setBackgroundColor(Qt::transparent);
}
void BarEChartWidget::slot_loadFinished(bool result)
{
    if(result)
    {
        initJs();
    }
}
void BarEChartWidget::initJs()
{
    _initJsStr = QSTRING(
            "var option;"
            "option = {"
            "    tooltip: {"
            "        trigger: 'axis'"
            "    },"
            "    grid: {"
            "        left: '10',"
            "        right: '10',"
            "        top: '10',"
            "        bottom: 30,"
            "        containLabel: true"
            "    },"
            "    legend: {"
            "        orient: 'horizontal',"
            "        x: 'center',"
            "        y: 'bottom',"
            "        itemGap: 20"
            "    },"
            "    xAxis: {"
            "        type: 'value'"
            "    },"
            "    yAxis: {"
            "        type: 'category',"
            "        data: ['项目1', '项目2', '项目3']"
            "    },"
            "    series: ["
            "        {"
            "            name: '变量1',"
            "            type: 'bar',"
            "            stack: 'totla',"
            "            label: {"
            "                show: true"
            "            },"
            "            data: [11, 12, 13]"
            "        },"
            "        {"
            "            name: '变量2',"
            "            type: 'bar',"
            "            stack: 'totla',"
            "            label: {"
            "                show: true"
            "            },"
            "            data: [24, 20, 21]"
            "        },"
            "        {"
            "            name: '变量3',"
            "            type: 'bar',"
            "            stack: 'totla',"
            "            label: {"
            "                show: true"
            "            },"
            "            data: [95, 87, 55]"
            "        }"
            "    ]"
            "};"
            "myChart.setOption(option);");
    runJsScript(_initJsStr);
}
void BarEChartWidget::runJsScript(QString str)
{
    if(_pWebEnginePage)
    {
        _pWebEnginePage->runJavaScript(str);
    }
}
void BarEChartWidget::resizeEvent(QResizeEvent *event)
{
    if(_pWebEngineView)
    {
        _pWebEngineView->setGeometry(ui->label_echarts->geometry());
    }
}
void BarEChartWidget::on_pushButton_clear_clicked()
{
    QString jsStr =
            "option.series[0].data = [];"
            "option.series[1].data = [];"
            "option.series[2].data = [];"
            "myChart.setOption(option, true);";
    runJsScript(jsStr);
}
void BarEChartWidget::on_pushButton_flush_clicked()
{
    QString jsStr =
            "var empty = {};"
            "myChart.setOption(empty, true);"
            "myChart.setOption(option, true);";
    runJsScript(jsStr);
}
void BarEChartWidget::on_pushButton_createRandom_clicked()
{
    QString jsStr =
    "var min = 0;"
    "var max = 100;"
    "for(var i = 0; i < option.series.length; i++)"
    "{"
    "    for(var j = 0; j < option.yAxis.data.length; j++)"
    "    {"
    "        option.series[i].data[j] = Math.floor(Math.random() * (max - min)) + min;"
    "    }"
    "}"
    "myChart.setOption(option, true);";
    runJsScript(jsStr);
}
void BarEChartWidget::on_pushButton_reset_clicked()
{
    initJs();
}


入坑

入坑一：调用js函数失败

问题

  通过qt代码跑js调用函数失败。

  

  

原理

  先要等页面加载完成后才能调用定义的函数。

解决

  发现是调用成功了，原来只定义也会报这个错误。

  

  由此可以看出，在qt中去初始化需要等待页面加载完成才行。

入坑二：Qt的msvc编译器少数中文乱码

问题

  少数中文乱码，加空格等都无法解决。

  

解决

  最终解决了，尝试了QTextCodec等各种都不行，最终：

  

  


工程模板v1.2.0

  


后话

  条形图将会根据实际需求持续升级版本，下一篇会继续折线图的基础封装。

文章标签：
JavaScript
缓存
编译器
关键词：
ECharts柱状图
ECharts封装
Qt开发
Qt demo
ECharts开发
长沙红胖子Qt
目录
相关文章
Y2000104
|
7月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
Y2000104
244 0
童小纯
|
7月前
若依框架 --- echarts 封装
若依框架 --- echarts 封装
童小纯
365 0
java冯坚持
|
2月前
|
资源调度 JavaScript API
vue-element-admin 综合开发五：引入 echarts，封装echarts 组件
这篇文章介绍了如何在vue-element-admin项目中引入并封装ECharts组件，以及如何实现折线图、柱状图和饼图的展示。
java冯坚持
120 4
vue-element-admin 综合开发五：引入 echarts，封装echarts 组件
邹荣乐
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制，根据数据在地图上显示柱状图信息，增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制，根据数据在地图上显示柱状图信息，增加涟漪特效动画效果
邹荣乐
551 0
yantuguiguziPGJ
|
3月前
自己动手写QT多线程demo
本文是作者关于如何编写Qt多线程demo的教程，介绍了如何实现多线程功能，包括可暂停和继续的功能。文章提供了部分示例代码，展示了如何创建线程类、启动和管理线程，以及线程间的通信。同时，还提供了相关参考资料和免费下载链接。
yantuguiguziPGJ
75 0
。思索
|
4月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
。思索
145 0
晚来南风晚相识
|
7月前
这样封装echarts简单好用
这样封装echarts简单好用
晚来南风晚相识
70 0
G佳伟
|
5月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
G佳伟
446 0
hnrk7epeorhrk
|
6月前
|
XML 存储 JSON
技术笔记：Qt基础之配置文件（QSettings）
技术笔记：Qt基础之配置文件（QSettings）
hnrk7epeorhrk
407 0
jjczqyjxgdegi
|
6月前
|
调度
技术笔记：QT之深入理解QThread
技术笔记：QT之深入理解QThread
jjczqyjxgdegi
57 0

热门文章

最新文章

  • 1
    echarts 标尺相关参数（visualMap属性设置）
  • 2
    Vue环境下，在单页面中遍历显示出多个Echarts图表
  • 3
    Echarts-地图全国主要城市的分布显示
  • 4
    echarts在.Net中使用实例(二) 使用ajax动态加载数据
  • 5
    Vue打包后Echarts图表不显示问题解决
  • 6
    ECharts使用小笔记
  • 7
    Echarts图——饼图动态
  • 8
    vue使用echarts实现世界地图和中国地图以及切换地图功能
  • 9
    vue中使用echarts实现动态图表多数据展示，带源码（x轴动态时间刷新，实时更新展示数据）
  • 10
    VUE之Echarts可视化图表双Y轴配置详解
  • 1
    讲解linux下的Qt如何编译oracle的驱动库libqsqloci.so
    168
  • 2
    `pytest-qt` 是一个用于在 Qt 应用程序中进行 GUI 测试的 pytest 插件。
    247
  • 3
    好的资源-----打卡机+Arm+Qt+OpenCV嵌入式项目-基于人脸识别的考勤系统-----B站神经网络与深度学习，商城
    86
  • 4
    QT：基于QMediaPlayer制作的视频播放器(最下方有整合包，可直接运行)
    598
  • 5
    基于QT实现的拷贝文件以及实时进度条(简易版)
    545
  • 6
    【Qt应用开发】复刻经典：基于Qt实现Windows风格计算器（加减乘除、删除、归零功能全解析）
    160
  • 7
    基于QT实现的QQ聊天简易版（UDP通信版）
    112
  • 8
    基于QT实现的词典(附源码)
    100
  • 9
    Qt连接Mysql出现问题（一）：“Driver not loaded Driver not loaded“
    845
  • 10
    Qt问题（二）：无法定位程序输入点于动态链接库
    511

    • 相关电子书

    更多
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码
  • 编程语言如何演化—— 以 JS 的 private 为例
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具

    • 推荐镜像

    更多
  • qt
  • cygwin
  • python-release
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解