前言

  上一篇将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窗口大小变换而变换大小的更多相关文章

  1. Django开发笔记二

    Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.xadmin添加主题.修改标题页脚和收起左侧菜单 # ...

  2. Qt+ECharts开发笔记（五）：ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo

    前言   上一篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.  本篇的demo实现了自动排序的柱状图,实现了一个自动排序柱状图的基本交互方式,即Qt ...

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

    前言   上一篇成功是EChart随着Qt窗口变化而变化,本篇将开始正式介绍柱状图介绍.基础使用,并将其封装一层Qt.  本篇的demo实现了隐藏js代码的方式,实现了一个条形图的基本交互方式,即Qt ...

  4. Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo

    前言   前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt.  本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.   Demo演示 ...

  5. SDL开发笔记(二)：音频基础介绍、使用SDL播放音频

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  6. EasyUI 开发笔记(二)

    接上篇 :EasyUI 开发笔记(一)  (http://www.cnblogs.com/yiayi/p/3485258.html) 这期就简单介绍下, easyui 的 list 展示, 在easy ...

  7. Python 使用Qt进行开发（二）

    上次简单实现了显示窗口,下面我们在窗口中加入一些部件. 1,我们在窗口中使用 setToolTip() 方法添加一个文本提示,在窗口中鼠标暂停几秒即可显示该文本信息. class test(): de ...

  8. Vue-cli开发笔记二----------接口调用、配置全局变量

    我做的一个项目,本身是没用任何框架,纯手写的前端及数据交互,项目已经完结.最近学Vue,于是借用这个项目,改装成vue项目. (一)接口问题:使用axios的调用方法,proxyTable解决开发环境 ...

  9. RBL开发笔记二

     17:13:55 2014-08-25 有以下几个点:  第一 :怎么在预处理阶段能够做到识别某个宏是否给定义了  这里就定义了一个SystemConfig.h 专门做这个事情  当然是需要make ...

随机推荐

  1. WEB安全信息收集

    目录 信息收集 子域名&敏感信息 敏感信息收集--Googlehack 敏感信息收集--收集方向 空间测绘引擎域名资产收集 子域名收集 WEB指纹 端口扫描 IP查询 cms识别 WAF识别 ...

  2. Infrastructure 知识: DNS 命令: dig, host

    dig 基本用法: dig @server name type 或者用-t type来指定(更常见) dig @server -t type name 例子详解 # 最简单的使用 $ dig www. ...

  3. STM32 DMA(UART)

    转载自https://blog.csdn.net/as480133937/article/details/104827639/

  4. 数据结构_C语言_二叉树先序、中序、后序遍历

    # include <stdio.h> # include <stdlib.h> typedef struct BiTreeNode { char data; struct B ...

  5. Linux 实现静态路由实验

    环境: 四台主机: A主机:eth0 NAT模式 R1主机:eth0 NAT模式,eth1 仅主机模式 R2主机:eth0 桥接模式,eth1仅主机模式 B主机:eth0 桥接模式 手动修改IP地址 ...

  6. 在vue-cli中安装scss，且可以全局引入scss的步骤

    简历魔板__个人简历模板在线生成 在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知 ...

  7. 国产开源优秀新一代MPP数据库StarRocks入门之旅-数仓新利器（上）

    概述 背景 Apache Doris官方地址 https://doris.apache.org/ Apache Doris GitHub源码地址 https://github.com/apache/i ...

  8. Docker学习重点(7)~DockerFile

    一.DockerFile DockerFile是用来构建docker镜像的文件,可以理解为命令参数脚本! 1.构建步骤: 编写一个dockerfile文件 docker build 构建成为一个镜像 ...

  9. Java 统计新客户

    上周做了一个订单数据统计的任务,统计的是订单的新客户数量,本文做一个解题过程的记录和整理. 新客户的定义 新客户指的是选取时间段有订单,时间段之前没有订单. 比如下面的订单数据: 时间段 2月1日之前 ...

  10. 696. Count Binary Substrings - LeetCode

    Question 696. Count Binary Substrings Example1 Input: "00110011" Output: 6 Explanation: Th ...