Qt+ECharts开发笔记（二）：Qt窗口动态调整大小，使ECharts跟随Qt窗口大小变换而变换大小
前言
上一篇将ECharts嵌入Qt中，在开始ECharts使用之前，还有一个很重要的功能，就是在窗口变换大小的时候，ECharts的图表尺寸也要跟随Qt窗口变换大小而变换大小。
Demo演示
原理
QWebEnginePage的大小会动态改变，然后导致html的body改变：
- 在windows里面设置body宽高分别为比例100%，100%
- 在div标签设置div的大小为填充body宽高比例分别为100%，100%
- 开启echarts的大小变化刷新的resize函数。
实现步骤
步骤一：设置body样式html宽高为100%，100%
<style>
html,
body {
width: 100%;
height: 100%;
}
</style>
步骤二：隐藏滚动条
Qt代码上没有直接方式隐藏，没有设置策略，只能寻求html的方式，如下：
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
PS：测试中，overflow上下不能添加注释，包含//和<!-- --)两种都不行，会让滚条失效，未测/**/。
步骤三：设置div为body宽高比例100%，100%
在div标签设置div的大小为填充body宽高比例分别为100%，100%：
<style>
#main,
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
}
#main {
width: 100%;
height: 100%;
}
</style>
步骤四：出发resize大小重绘函数
窗口变化之后，echarts不会自动变化，还需要主动调用echarts的resize函数。
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
const 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);
</script>
Demo
本次Demo只修改了html文件：
<!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实例
const 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);
</script>
</body>
</html>
工程模板v1.1.0
Qt+ECharts开发笔记（二）：Qt窗口动态调整大小，使ECharts跟随Qt窗口大小变换而变换大小的更多相关文章
- Django开发笔记二
Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.xadmin添加主题.修改标题页脚和收起左侧菜单 # ...
- Qt+ECharts开发笔记（五）：ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo
前言 上一篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口. 本篇的demo实现了自动排序的柱状图,实现了一个自动排序柱状图的基本交互方式,即Qt ...
- Qt+ECharts开发笔记（三）：ECharts的柱状图介绍、基础使用和Qt封装Demo
前言 上一篇成功是EChart随着Qt窗口变化而变化,本篇将开始正式介绍柱状图介绍.基础使用,并将其封装一层Qt. 本篇的demo实现了隐藏js代码的方式,实现了一个条形图的基本交互方式,即Qt ...
- Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo
前言 前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt. 本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口. Demo演示 ...
- SDL开发笔记(二)：音频基础介绍、使用SDL播放音频
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
- EasyUI 开发笔记(二)
接上篇 :EasyUI 开发笔记(一) (http://www.cnblogs.com/yiayi/p/3485258.html) 这期就简单介绍下, easyui 的 list 展示, 在easy ...
- Python 使用Qt进行开发（二）
上次简单实现了显示窗口,下面我们在窗口中加入一些部件. 1,我们在窗口中使用 setToolTip() 方法添加一个文本提示,在窗口中鼠标暂停几秒即可显示该文本信息. class test(): de ...
- Vue-cli开发笔记二----------接口调用、配置全局变量
我做的一个项目,本身是没用任何框架,纯手写的前端及数据交互,项目已经完结.最近学Vue,于是借用这个项目,改装成vue项目. (一)接口问题:使用axios的调用方法,proxyTable解决开发环境 ...
- RBL开发笔记二
17:13:55 2014-08-25 有以下几个点: 第一 :怎么在预处理阶段能够做到识别某个宏是否给定义了 这里就定义了一个SystemConfig.h 专门做这个事情 当然是需要make ...
随机推荐
- EF Core忽略某个属性保存
1.事情起因 某天朋友突然问我他的EF不能保存,让我帮忙看看,观察发现主表中存在明细表的集合,导致保存失败. 2.解决方案 方案1:DTO模型与DO模型分开,保存时映射. 分层领域模型规约名词解释: ...
- 全场景AI推理引擎MindSpore Lite， 助力HMS Core视频编辑服务打造更智能的剪辑体验
移动互联网的发展给人们的社交和娱乐方式带来了很大的改变,以vlog.短视频等为代表的新兴文化样态正受到越来越多人的青睐.同时,随着AI智能.美颜修图等功能在图像视频编辑App中的应用,促使视频编辑效率 ...
- 详解Fiddler Classic过滤、重放、转发HTTP请求
更多干货文章,更多最新文章,欢迎到作者主博客 菜鸟厚非 一.简介 今天介绍一下 Fiddler Classic 对 HTPP 的过滤.重放.转发操作,这在开发中,尤其在微服务中调试中是经常用到的功能, ...
- [Istio是什么？] 还不知道你就out了,一文40分钟快速理解
@ 目录 前言 Istio是什么? 服务网格是什么? 应用场景 为什么使用Istio? 流量管理介绍 istio架构 Envoy Sidecar Istiod 虚拟服务(VirtualService) ...
- 低代码 —— 初步认识 Appsmith
初步认识 Appsmith appsmith 是什么 appsmith 是 github 上的一个开源项目,截至此刻(20220512)有 17.7k Star. Appsmith 是一个低代码.开源 ...
- Git 后续——分支与协作
Git 后续--分支与协作 本文写于 2020 年 9 月 1 日 之前一篇文章写了 Git 的基础用法,但那其实只是「单机模式」,Git 之所以在今天被如此广泛的运用,是脱不开分支系统这一概念的. ...
- 【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
前言: Wpf开发过程中,最经常使用的功能之一,就是用户控件(UserControl)了.用户控件可以用于开发用户自己的控件进行使用,甚至可以用于打造一套属于自己的UI框架.依赖属性(Dependen ...
- Git中的三种对象
1.Git中有三种对象 commit 每执行一次git commit,git都会对当前工作目录的所有文件生成一次镜像,工作区下的目录对应的对象是tree,工作区下的文件对应的对象是blob,tree下 ...
- 2020级C++实验课-期末机考模拟考题解
做这个题解的理由很简单,有很多同学想写但是不会写,凑巧我写了,所以搞个题解. 顺序就是题单里的顺序(界面左上角菜单切换文章,右上角目录方便查看) 1:黑马白马 题意: 随机得到一个数字,如果是偶数,则 ...
- 每天一个 HTTP 状态码 100
100 Continue 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分:指示客户端应该继续当前请求:如果请求已经完成,客户端可以忽略该响应. 常用于服务器已经接受了请求头,客户端应该继续 ...