一、前言
儀表盤在很多汽車和物聯網相關的系統中很常用,最直覺的其實就是汽車儀表盤,這個以前主要是機械的儀表,現在逐漸改成了智能的帶屏帶作業系統的儀表,這樣美觀性和拓展性功能性大大增強了,上了作業系統的話,除了基本的儀表訓示以外,還可以聽歌導航接電話等,這應該也是目前汽車領域發展的一個大趨勢,Qt在這方面還單獨搞了個3D studio設計的,可以讓美工直接設計好效果圖,設定一些動畫效果之類的,可以說這些年Qt公司也在不斷謀求新的發展,探索新的機遇,找到新的增長點和突破口。
用Qt開發儀表盤控件非常友善,無論是用widget的painter還是qml,尤其是qml,内置的那些動畫效果非常适合做這類的應用,這次不讨論如何用qt開發儀表盤,而是直接用echart内置的儀表盤控件,做的也挺好的,不知道echart這麼小的一個檔案,還能有如此多的效果,連儀表盤都有,這個非常震驚,儀表盤的使用在官網非常詳細,與Qt的結合難點可能就在如何互動,Qt中無論是webkit也還還是webengine,都提供了runJavaScript或者evaluateJavaScript函數類來執行js函數,隻需要在html檔案寫好對應的js檔案函數就可以直接觸發執行,比如設定儀表盤的角度我這裡寫的是setGaugeValue(value),則隻需要runJavaScript或者evaluateJavaScript參數傳入 setGaugeValue(88)這個即可,隻需要根據界面上的滾動條或者滑塊的值動态改變setGaugeValue的參數即可。
二、功能特點
- 同時支援閃爍點圖、遷徙圖、區域地圖、儀表盤等。
- 可以設定标題、提示資訊、背景顔色、文字顔色、線條顔色、區域顔色等各種顔色。
- 可設定城市的名稱、值、經緯度 集合。
- 可設定地圖的放大倍數、是否允許滑鼠滾輪縮放。
- 内置世界地圖、全國地圖、省份地圖、地區地圖,可以精确到縣,所有地圖全部離線使用。
- 内置了各省市json資料檔案轉js檔案功能,如有資料更新自行轉換即可,支援單個檔案轉換和一鍵轉換所有檔案。
- 内置了從json檔案或者js檔案擷取該區域的所有名稱和經緯度資訊集合的功能,可以通過該方法擷取到資訊用來顯示。
- 依賴浏覽器元件顯示地圖,提供的demo支援webkit、webengine、ie 三種方式加載網頁。
- 拓展性極強,可以依葫蘆畫瓢自行增加各種精美的echarts元件,做出牛逼的效果。
- 内置的儀表盤元件提供互動功能,demo示範中包含了對應的代碼。
- 函數接口友好和統一,使用簡單友善,就一個類。
- 支援任意Qt版本、任意系統、任意編譯器。
三、體驗位址
- 體驗位址: https://pan.baidu.com/s/1uQsDQO5E5crUBN2J-nPeLQ 提取碼:1jkp 檔案名:bin_map.zip
- 國内站點: https://gitee.com/feiyangqingyun
- 國際站點: https://github.com/feiyangqingyun
- 個人首頁: https://blog.csdn.net/feiyangqingyun
- 知乎首頁: https://www.zhihu.com/people/feiyangqingyun/
四、效果圖
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLiFGNzIzY4MjYiFTN3MmZiBjYyQmN1kzMkNzY0EmNzAjNkNTO2IzNl9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
五、相關代碼
QString Echarts::newChartGauge(const QString &title, int value)
{
QStringList body;
body << QString(" var option = {");
body << QString(" backgroundColor: '%1',").arg(bgColor.name());
body << QString(" tooltip: {");
body << QString(" formatter: '{a} <br/>{b} : {c}%'");
body << QString(" },");
body << QString(" toolbox: {");
body << QString(" feature: {");
body << QString(" restore: {},");
body << QString(" saveAsImage: {}");
body << QString(" }");
body << QString(" },");
body << QString(" series: [");
body << QString(" {");
body << QString(" type: 'gauge',");
body << QString(" detail: {");
body << QString(" formatter: '{value}%',");
body << QString(" textStyle: {color: '%1', fontSize: 30},").arg(textColor.name());
body << QString(" },");
body << QString(" title: {");
body << QString(" textStyle: {color: '%1', fontSize: 30}").arg(textColor.name());
body << QString(" },");
body << QString(" data: [{name: '%1', value: value}]").arg(title);
body << QString(" }");
body << QString(" ]");
body << QString(" };");
QString funName = QString("setGaugeValue(value)");
QString funInit = QString("setGaugeValue(%1)").arg(value);
return newChart(body.join("\r\n "), funName, funInit);
}