Qt+ECharts開發(fā)筆記（二）：Qt窗口動態(tài)調(diào)整大小，使ECharts跟隨Qt窗口大小變換而變換
前言
??上一篇將ECharts嵌入Qt中，在開始ECharts使用之前，還有一個很重要的功能，就是在窗口變換大小的時候，ECharts的圖表尺寸也要跟隨Qt窗口變換大小而變換大小。
Demo演示
??
原理
??QWebEnginePage的大小會動態(tài)改變，然后導(dǎo)致html的body改變：
??
在windows里面設(shè)置body寬高分別為比例100%，100%
在div標(biāo)簽設(shè)置div的大小為填充body寬高比例分別為100%，100%
開啟echarts的大小變化刷新的resize函數(shù)。
實現(xiàn)步驟
步驟一：設(shè)置body樣式html寬高為100%，100%
<style>
? ?html,
? ?body {
? ? ? ?width: 100%;
? ? ? ?height: 100%;
? ?}</style>
??
步驟二：隱藏滾動條
??Qt代碼上沒有直接方式隱藏，沒有設(shè)置策略，只能尋求html的方式，如下：
<style>
? ?html,
? ?body {
? ? ? ?width: 100%;
? ? ? ?height: 100%;
? ? ? ?overflow: hidden;
? ?}</style>
??
??PS：測試中，overflow上下不能添加注釋，包含//和<!-- --)兩種都不行，會讓滾條失效，未測/**/。
步驟三：設(shè)置div為body寬高比例100%，100%
??在div標(biāo)簽設(shè)置div的大小為填充body寬高比例分別為100%，100%：
<style>
? ?#main,
? ?html,
? ?body{
? ? ? ?width: 100%;
? ? ? ?height: 100%;
? ? ? ?overflow: hidden;
? ?}
? ?#main {
? ? ? ?width: 100%;
? ? ? ?height: 100%;
? ?}</style>
??
步驟四：出發(fā)resize大小重繪函數(shù)
??窗口變化之后，echarts不會自動變化，還需要主動調(diào)用echarts的resize函數(shù)。
<script type="text/javascript">
? ?// 基于準(zhǔn)備好的dom，初始化echarts實例
? ?const myChart = echarts.init(document.getElementById('main'));
? ?// 窗口高度變化設(shè)置
? ?window.onresize = function() {
? ? ? ?myChart.resize();
? ?}
? ?// 指定圖表的配置項和數(shù)據(jù)
? ?var option = {
? ? ? ?title: {
? ? ? ? ? ?text: 'ECharts 入門示例'
? ? ? ?},
? ? ? ?tooltip: {},
? ? ? ?legend: {
? ? ? ? ? ?data: ['銷量']
? ? ? ?},
? ? ? ?xAxis: {
? ? ? ? ? ?data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
? ? ? ?},
? ? ? ?yAxis: {},
? ? ? ?series: [
? ? ? ? ? ?{
? ? ? ? ? ? ? ?name: '銷量',
? ? ? ? ? ? ? ?type: 'bar',
? ? ? ? ? ? ? ?data: [5, 20, 36, 10, 10, 20]
? ? ? ? ? ?}
? ? ? ?]
? ?};
? ?// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
? ?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>
? ?<!--設(shè)置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">
? ? ? ?// 基于準(zhǔn)備好的dom，初始化echarts實例
? ? ? ?const myChart = echarts.init(document.getElementById('main'));
? ? ? ?// 窗口高度變化設(shè)置
? ? ? ?window.onresize = function() {
? ? ? ? ? ?myChart.resize();
? ? ? ?}
? ? ? ?// 指定圖表的配置項和數(shù)據(jù)
? ? ? ?var option = {
? ? ? ? ? ?title: {
? ? ? ? ? ? ? ?text: 'ECharts 入門示例'
? ? ? ? ? ?},
? ? ? ? ? ?tooltip: {},
? ? ? ? ? ?legend: {
? ? ? ? ? ? ? ?data: ['銷量']
? ? ? ? ? ?},
? ? ? ? ? ?xAxis: {
? ? ? ? ? ?data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
? ? ? ? ? ?},
? ? ? ? ? ?yAxis: {},
? ? ? ? ? ?series: [
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ?name: '銷量',
? ? ? ? ? ? ? ? ? ?type: 'bar',
? ? ? ? ? ? ? ? ? ?data: [5, 20, 36, 10, 10, 20]
? ? ? ? ? ? ? ?}
? ? ? ? ? ?]
? ? ? ?};
? ? ? ?// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
? ? ? ?myChart.setOption(option);
? ?</script>
?</body></html>
工程模板v1.1.0
??
