快捷導(dǎo)航

Qt 儀表盤的實(shí)現(xiàn)示例

更新時(shí)間：2021年12月20日 11:00:19 作者：feiyangqingyun

儀表盤在很多汽車和物聯(lián)網(wǎng)相關(guān)的系統(tǒng)中很常用，本文就來介紹一下Qt 儀表盤的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、前言

儀表盤在很多汽車和物聯(lián)網(wǎng)相關(guān)的系統(tǒng)中很常用，最直觀的其實(shí)就是汽車儀表盤，這個(gè)以前主要是機(jī)械的儀表，現(xiàn)在逐步改成了智能的帶屏帶操作系統(tǒng)的儀表，這樣美觀性和拓展性功能性大大增強(qiáng)了，上了操作系統(tǒng)的話，除了基本的儀表指示以外，還可以聽歌導(dǎo)航接電話等，這應(yīng)該也是目前汽車領(lǐng)域發(fā)展的一個(gè)大趨勢(shì)，Qt在這方面還單獨(dú)搞了個(gè)3D studio設(shè)計(jì)的，可以讓美工直接設(shè)計(jì)好效果圖，設(shè)置一些動(dòng)畫效果之類的，可以說這些年Qt公司也在不斷謀求新的發(fā)展，探索新的機(jī)遇，找到新的增長(zhǎng)點(diǎn)和突破口。

用Qt開發(fā)儀表盤控件非常方便，無論是用widget的painter還是qml，尤其是qml，內(nèi)置的那些動(dòng)畫效果非常適合做這類的應(yīng)用，這次不討論如何用qt開發(fā)儀表盤，而是直接用echart內(nèi)置的儀表盤控件，做的也挺好的，不知道echart這么小的一個(gè)文件，還能有如此多的效果，連儀表盤都有，這個(gè)非常震驚，儀表盤的使用在官網(wǎng)非常詳細(xì)，與Qt的結(jié)合難點(diǎn)可能就在如何交互，Qt中無論是webkit也還還是webengine，都提供了runJavaScript或者evaluateJavaScript函數(shù)類來執(zhí)行js函數(shù)，只需要在html文件寫好對(duì)應(yīng)的js文件函數(shù)就可以直接觸發(fā)執(zhí)行，比如設(shè)置儀表盤的角度我這里寫的是setGaugeValue(value)，則只需要runJavaScript或者evaluateJavaScript參數(shù)傳入 setGaugeValue(88)這個(gè)即可，只需要根據(jù)界面上的滾動(dòng)條或者滑塊的值動(dòng)態(tài)改變setGaugeValue的參數(shù)即可。

二、功能特點(diǎn)

同時(shí)支持閃爍點(diǎn)圖、遷徙圖、區(qū)域地圖、儀表盤等。
可以設(shè)置標(biāo)題、提示信息、背景顏色、文字顏色、線條顏色、區(qū)域顏色等各種顏色。
可設(shè)置城市的名稱、值、經(jīng)緯度集合。
可設(shè)置地圖的放大倍數(shù)、是否允許鼠標(biāo)滾輪縮放。
內(nèi)置世界地圖、全國(guó)地圖、省份地圖、地區(qū)地圖，可以精確到縣，所有地圖全部離線使用。
內(nèi)置了各省市json數(shù)據(jù)文件轉(zhuǎn)js文件功能，如有數(shù)據(jù)更新自行轉(zhuǎn)換即可，支持單個(gè)文件轉(zhuǎn)換和一鍵轉(zhuǎn)換所有文件。
內(nèi)置了從json文件或者js文件獲取該區(qū)域的所有名稱和經(jīng)緯度信息集合的功能，可以通過該方法獲取到信息用來顯示。
依賴瀏覽器組件顯示地圖，提供的demo支持webkit、webengine、ie 三種方式加載網(wǎng)頁。
拓展性極強(qiáng)，可以依葫蘆畫瓢自行增加各種精美的echarts組件，做出牛逼的效果。
內(nèi)置的儀表盤組件提供交互功能，demo演示中包含了對(duì)應(yīng)的代碼。
函數(shù)接口友好和統(tǒng)一，使用簡(jiǎn)單方便，就一個(gè)類。
支持任意Qt版本、任意系統(tǒng)、任意編譯器。

三、體驗(yàn)地址

體驗(yàn)地址：https://pan.baidu.com/s/1Ie1xGLv7tSL-9vfsv28w1Q 提取碼: wf4f 文件名：bin_map.zip
國(guó)內(nèi)站點(diǎn)：https://gitee.com/feiyangqingyun
國(guó)際站點(diǎn)：https://github.com/feiyangqingyun

四、效果圖

在這里插入圖片描述

五、相關(guān)代碼

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/> : {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);
}

到此這篇關(guān)于Qt 儀表盤的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Qt 儀表盤內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: