Qt+ECharts开发笔记（三）：ECharts的柱状图介绍、基础使用和Qt封装Demo
前言
上一篇成功是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
后话
条形图将会根据实际需求持续升级版本，下一篇会继续折线图的基础封装。
Qt+ECharts开发笔记（三）：ECharts的柱状图介绍、基础使用和Qt封装Demo的更多相关文章
- Django开发笔记三
Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.基于类的方式重写登录:views.py: from ...
- Qt+ECharts开发笔记（五）：ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo
前言 上一篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口. 本篇的demo实现了自动排序的柱状图,实现了一个自动排序柱状图的基本交互方式,即Qt ...
- Qt+ECharts开发笔记（二）：Qt窗口动态调整大小，使ECharts跟随Qt窗口大小变换而变换大小
前言 上一篇将ECharts嵌入Qt中,在开始ECharts使用之前,还有一个很重要的功能,就是在窗口变换大小的时候,ECharts的图表尺寸也要跟随Qt窗口变换大小而变换大小. Demo演示 ...
- Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo
前言 前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt. 本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口. Demo演示 ...
- TERSUS无代码开发(笔记01)-按装下载和基础语法
1.中国官网 https://tersus.cn/ 2.下载:https://tersus.cn/download/ 3.开发文档:https://tersus.cn/docs/ 4.基本元件说明 图 ...
- echarts使用笔记三:柱子对比
app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '对比图' //换行用 \n }, le ...
- 麒麟系统开发笔记（二）：国产麒麟系统搭建Qt开发环境安装Qt5.12
前言 开发国产应用,使用到银河麒麟V4,V10,本篇以V10记录,参照上一篇可安装V4.V7.V10三个版本,麒麟V4系自带了Qt,麒麟V10没有自带Qt,需要自己编译搭建环境. 银河麒麟V1 ...
- ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项
一.相关js文件的引入 这里我们采用标签式引入文件的方式,我们引入两个js文件,一个是esl.js文件和一个echarts.js. <script src="js/esl.js&quo ...
- RBL开发笔记三
2014-08-26 20:06:24 今天就是在开发这个EPOLL来处理网络事件 封装较为健壮的EPOLL模型来处理基本的网络IO 1) 超时这个主题先没有弄 在开发EPOLL包括select/po ...
随机推荐
- XCTF练习题---WEB---baby_web
XCTF练习题---WEB---baby_web flag:flag{very_baby_web} 解题步骤: 1.观察题目,打开场景 2.观察题目内容,想想初始页面是哪个,再看看URL,尝试输入in ...
- Jenkins 自动化部署详解
一.背景 以前在发布系统的时候,总是需要经过本地合并代码 >编译 >发布到本地 >拷贝代码到远程服务器 >停止掉服务器上的应用池 >将要发布的文件替换原文件 >重启 ...
- Django学习——Django settings 源码、模板语法之传值、模板语法之获取值、模板语法之过滤器、模板语法之标签、自定义过滤器、标签、inclusion_tag、模板的导入、模板的继承
Django settings 源码 """ 1.django其实有两个配置文件 一个是暴露给用户可以自定义的配置文件 项目根目录下的settings.py 一个是项目默 ...
- 面试官：我把数据库部署在Docker容器内，你觉得如何？
开源Linux 一个执着于技术的公众号 上一篇:CentOS 7上搭建Zabbix4.0 近2年Docker非常的火热,各位开发者恨不得把所有的应用.软件都部署在Docker容器中,但是您确定也要把数 ...
- goland设置import规范
import 规范 引入了三种类型的包,标准库包,第三方包,程序内部包,建议采用如下方式进行组织你的包: 有顺序的引入包,不同的类型采用空格分离, 第一种标准库 第二是第三方包 第三是项目包. 在项目 ...
- 1.Docker简介
Docker是个什么东西 假定您在开发一个项目,您使用的是一台笔记本电脑而且您的开发环境具有特定的配置.其他开发人员身处的环境配置也各有不同.您正在开发的应用依赖于您当前的配置且还要依赖于某些配置文件 ...
- CSS 不规则的轮廓-outline
大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...
- 138_Power BI&Power Pivot特殊半累加度量
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 半累加度量(semi-additive measure),在DAX建模分析的时候经常遇见:应用场景诸如银行存款. ...
- CefSharp 白屏问题
原文 现象 我正在使用 cefsharp + winform 建立一个桌面程序用于显示网页.使用过程中程序会突然白屏,经过观察发现,在网页显示GIF动图时,浏览器子程序会突然占用较高内存(从80M上升 ...
- php原生PHPExcel插件导表（附表格合并，加粗居中及加边框换行操作）
PHPExcel是用来操作Office Excel文档的一个PHP类库,它基于微软的OpenXML标准和PHP语言.可以使用它来读取.写入不同格式的电子表格,如 Excel(BIFF) .xls, E ...