文章目录
- 一、前言
- 二、原理
- 三、详细步骤
- 四、完整代码
- 五、效果展示
一、前言
在文章：Qt基于Echart的数据可视化1–Echart引入中我们已经介绍了如何在Qt中使用Echart这个强大的可视化库，但是你如果细心就会发现Echart图形不会随着窗口的调整而自动调整，即便是你对窗口进行了布局，效果如下：
二、原理
我们首先来分析引入Echart的网页代码
<!DOCTYPE html>
<html>
<head>
......
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
......
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);</script>
</body>
</html>
引入Echart的部分在网页的body标签内部，body标签内部定义了一个id为main的div，下面的script脚本是绘图代码，绘制在id为main的div中；
从代码中可以看到：
- body没有设置宽高，那就是跟随父容器，也就是实际的网页大小；
- div设置了宽度600px，高度400px，那网页变大变小，div始终是这么大，Echart肯定不会随着窗口的调整而调整；
为了使Echart随着Qt窗口的调整而调整，需要做如下操作：
- 在windows里面设置body宽高分别为比例100%，100%
- 在div标签设置div的大小为填充body宽高比例分别为100%，100%
- 开启echarts的大小变化刷新的resize函数。
三、详细步骤
1、设置html和body宽、高为100%、100%
<style>html,
body {
width: 100%;
height: 100%;
}</style>
2、隐藏网页滚动条
Qt代码上没有直接方式隐藏，没有设置策略，只能寻求html的方式，如下：
<style>html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}</style>
3、设置div为body宽、高的100%、100%
<style>#main,
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}</style>
4、触发窗口resize大小重绘函数
窗口变化之后，echarts不会自动变化，还需要主动调用echarts的resize函数。
// 窗口高度变化设置
window.onresize = function() {
myChart.resize();
}
四、完整代码
<!DOCTYPE html>
<html>
<head>
......
</head>
<body>
<!--------------------------------------->
<style>#main,
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}</style>
<!--------------------------------------->
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main"></div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
<!--------------------------------------->
//窗口高度变化设置
window.onresize = function() {
myChart.resize();
}
<!--------------------------------------->
......
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);</script>
</body>
</html>
五、效果展示
