前言

上一篇將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視窗大小變換

前言

Demo演示

原理

實現步驟

步驟一：設定body樣式html寬高為100%，100%

步驟二：隱藏滾動條

步驟三：設定div為body寬高比例100%，100%

步驟四：出發resize大小重繪函式

Demo

工程模板v1.1.0

相關文章