一、前言

用過echart的人都會遇到一個問題，就算是代碼中寫了window.onresize = echart.resize，也只是橫向自適應(yīng)拉伸填充頁面，垂直方向不會變化，除非指定高度才可以，這就比較郁悶了，為何echart本身不會自適應(yīng)呢？按道理不應(yīng)該啊，莫非實現(xiàn)起來很困難？好吧先不管這個了，這個問題搜索出來一大堆解決方案，在Qt的瀏覽器控件中也有這個問題，為了解決這個問題想了兩個策略，一種是程序本身檢測尺寸變化，然后重新設(shè)置高度并載入網(wǎng)頁，一種是js函數(shù)設(shè)置對應(yīng)的寬高，什么時候執(zhí)行呢，就是在程序界面尺寸變化的時候，兩種辦法對比下來，最終選用的后者，因為效果比較好，還是異步執(zhí)行的，無需重新加載網(wǎng)頁，那個每次高度變化了就重新加載網(wǎng)頁的辦法在早期的作品中用過，看起來好傻逼比的。

二、功能特點

同時支持閃爍點圖、遷徙圖、區(qū)域地圖、儀表盤等。

可以設(shè)置標(biāo)題、提示信息、背景顏色、文字顏色、線條顏色、區(qū)域顏色等各種顏色。

可設(shè)置城市的名稱、值、經(jīng)緯度 集合。

可設(shè)置地圖的放大倍數(shù)、是否允許鼠標(biāo)滾輪縮放。

內(nèi)置世界地圖、全國地圖、省份地圖、地區(qū)地圖，可以精確到縣，所有地圖全部離線使用。

內(nèi)置了各省市json數(shù)據(jù)文件轉(zhuǎn)js文件功能，如有數(shù)據(jù)更新自行轉(zhuǎn)換即可，支持單個文件轉(zhuǎn)換和一鍵轉(zhuǎn)換所有文件。

內(nèi)置了從json文件或者js文件獲取該區(qū)域的所有名稱和經(jīng)緯度信息集合的功能，可以通過該方法獲取到信息用來顯示。

依賴瀏覽器組件顯示地圖，提供的demo支持webkit、webengine、ie 三種方式加載網(wǎng)頁。

拓展性極強，可以依葫蘆畫瓢自行增加各種精美的echarts組件，做出牛逼的效果。

內(nèi)置的儀表盤組件提供交互功能，demo演示中包含了對應(yīng)的代碼。

函數(shù)接口友好和統(tǒng)一，使用簡單方便，就一個類。

支持任意Qt版本、任意系統(tǒng)、任意編譯器。

三、體驗地址

體驗地址：https://pan.baidu.com/s/1uQsDQO5E5crUBN2J-nPeLQ 提取碼：1jkp 文件名：bin_map.zip

國內(nèi)站點：https://gitee.com/feiyangqingyun

國際站點：https://github.com/feiyangqingyun

個人主頁：https://blog.csdn.net/feiyangqingyun

知乎主頁：https://www.zhihu.com/people/feiyangqingyun/

四、效果圖

五、相關(guān)代碼

//設(shè)置窗口大小變動echarts自動拉伸填充,此方法只能橫向拉伸 list << QString(" window.onresize = echart.resize;"); //下面的方法用來設(shè)置畫布的寬度高度 list << QString(" function resize(width, height) {"); list << QString(" var chart = document.getElementById('chart');"); list << QString(" chart.style.width = width + "px";"); list << QString(" chart.style.height = height + "px";"); list << QString(" echart.resize();"); list << QString(" }");void frmEcharts::resizeMap() {if (isLoad) { #ifdef webkitQString js = QString("resize(%1, %2)").arg(webView->width()).arg(webView->height());webView->page()->mainFrame()->evaluateJavaScript(js); #elif webengineQString js = QString("resize(%1, %2)").arg(webView->width()).arg(webView->height());webView->page()->runJavaScript(js); #endif} }

總結(jié)

以上是生活随笔為你收集整理的5 ui自适应窗口_Qt编写地图综合应用5-自适应拉伸的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。