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