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

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

2022-07-13 299
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 上一篇成功是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
缓存
编译器
关键词：
Qt开发
ECharts柱状图
ECharts开发
ECharts demo
ECharts封装
长沙红胖子Qt
目录
相关文章
落雨便归尘
|
8天前
|
关系型数据库 MySQL 项目管理
数据库大作业——基于qt开发的图书管理系统(四)项目目录的整理与绘制登录页面
数据库大作业——基于qt开发的图书管理系统(四)项目目录的整理与绘制登录页面
落雨便归尘
21 0
落雨便归尘
|
8天前
|
SQL 关系型数据库 MySQL
数据库大作业——基于qt开发的图书管理系统(三)Qt连接Mysql数据库
数据库大作业——基于qt开发的图书管理系统(三)Qt连接Mysql数据库
落雨便归尘
79 0
落雨便归尘
|
8天前
|
SQL 数据可视化 关系型数据库
数据库大作业——基于qt开发的图书管理系统(二) 相关表结构的设计
数据库大作业——基于qt开发的图书管理系统(二) 相关表结构的设计
落雨便归尘
13 0
落雨便归尘
|
8天前
|
安全 BI 数据库
数据库大作业——基于qt开发的图书管理系统 (一)环境的配置与项目需求的分析
数据库大作业——基于qt开发的图书管理系统 (一)环境的配置与项目需求的分析
落雨便归尘
33 0
国中之林
|
1月前
|
区块链
【qt】最快的开发界面效率——混合编程3
【qt】最快的开发界面效率——混合编程
国中之林
42 1
JYeontu
|
1月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
JYeontu
106 0
前端菜鸟的自我修养
|
2天前
Echarts各类图表常用配置项说明，附示例代码
Echarts各类图表常用配置项说明，附示例代码
前端菜鸟的自我修养
8 2
米诺斯
|
3天前
|
JavaScript Apache CDN
Vue项目使用ECharts实现图表
Vue项目使用ECharts实现图表
米诺斯
13 0
小老头头头头
|
1月前
|
容器
echarts图表怎样实现刷新功能？
echarts图表怎样实现刷新功能？
小老头头头头
36 2
龙大吉
|
1月前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库，用于创建各种类型的图表
Echarts是JavaScript的开源可视化库，Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图：定义图表对象，设置标题和坐标轴，添加X轴、Y轴数据，最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型，更多详情可查阅官方文档。
龙大吉
58 0