其他分享
首页 > 其他分享> > Qt+ECharts开发笔记(二):Qt窗口动态调整大小,使ECharts跟随Qt窗口大小变换而变换大小

Qt+ECharts开发笔记(二):Qt窗口动态调整大小,使ECharts跟随Qt窗口大小变换而变换大小

作者:互联网

前言

  上一篇将ECharts嵌入Qt中,在开始ECharts使用之前,还有一个很重要的功能,就是在窗口变换大小的时候,ECharts的图表尺寸也要跟随Qt窗口变换大小而变换大小。

 

Demo演示

  请添加图片描述

 

原理

  QWebEnginePage的大小会动态改变,然后导致html的body改变:
  在这里插入图片描述

 

实现步骤

步骤一:设置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

  在这里插入图片描述

标签:body,Qt,100%,echarts,html,大小,main,ECharts
来源: https://www.cnblogs.com/qq21497936/p/16457920.html