扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >Qt仪表盘的实现示例
  • 857

0
分享到

Qt仪表盘的实现示例

2024-04-02 19:04:59 857人浏览 安东尼
摘要

目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 仪表盘在很多汽车和物联网相关的系统中很常用，最直观的其实就是汽车仪表盘，这个以前主要是机械的仪表，现在逐步改成了

一、前言

仪表盘在很多汽车和物联网相关的系统中很常用，最直观的其实就是汽车仪表盘，这个以前主要是机械的仪表，现在逐步改成了智能的带屏带操作系统的仪表，这样美观性和拓展性功能性大大增强了，上了操作系统的话，除了基本的仪表指示以外，还可以听歌导航接电话等，这应该也是目前汽车领域发展的一个大趋势，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/1Ie1xGLv7tSL-9vfsv28w1Q 提取码: wf4f 文件名：bin_map.zip
国内站点：Https://gitee.com/feiyangqingyun
国际站点：https://GitHub.com/feiyangqingyun

四、效果图

在这里插入图片描述

五、相关代码


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);
}

到此这篇关于Qt 仪表盘的实现示例的文章就介绍到这了,更多相关Qt 仪表盘内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Qt仪表盘的实现示例

本文链接: https://lsjlt.com/news/160344.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Qt仪表盘的实现示例
    目录一、前言二、功能特点三、体验地址四、效果图五、相关代码一、前言 仪表盘在很多汽车和物联网相关的系统中很常用，最直观的其实就是汽车仪表盘，这个以前主要是机械的仪表，现在逐步改成了...
    99+
    2024-04-02
  • Qt如何实现仪表盘
    这篇文章主要介绍Qt如何实现仪表盘，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、前言仪表盘在很多汽车和物联网相关的系统中很常用，最直观的其实就是汽车仪表盘，这个以前主要是机械的仪表，现在逐步改成了智能的带屏带操作...
    99+
    2023-06-22
  • Qt自定义控件实现仪表盘
    目录1.预览图2. 代码头文件源文件3. 用法1.预览图 2. 代码 头文件 #ifndef MOTORMETER_H #define MOTORMETER_H #include...
    99+
    2024-04-02
  • vue Echarts实现仪表盘案例
    本文实例为大家分享了vue Echarts实现仪表盘案例的具体代码，供大家参考，具体内容如下 1、main.js 页面 import Vue from 'vue' import Ap...
    99+
    2024-04-02
  • python开发实时可视化仪表盘的示例
    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程「Python+Dash快速web应用开发」的...
    99+
    2022-06-02
    python 可视化 python 可视化仪表盘
  • vue实现echarts中的仪表盘
    本文实例为大家分享了vue实现echarts中的仪表盘的具体代码，供大家参考，具体内容如下 最终结果 一、安装 1. 首先需要安装echarts依赖包 npm install ec...
    99+
    2024-04-02
  • jquery插件实现仪表盘
    jquery插件实现仪表盘，供大家参考，具体内容如下 做了个简易的仪表盘，就是很常见的那种码表，实现没啥困难，就是需要算一点点位置 实现效果 代码部分 *{ margin: ...
    99+
    2024-04-02
  • Android实现仪表盘效果
    本文实例为大家分享了Android实现仪表盘效果的具体代码，供大家参考，具体内容如下 仪表盘效果，圆弧可变色，效果图如下： 通过自定义view实现，代码如下： public c...
    99+
    2024-04-02
  • VueEcharts简易实现仪表盘
    目录前言仪表盘的特点仪表盘的基本实现仪表盘的常见效果前言 本篇来学习写仪表盘图 仪表盘的特点 可以更直观的表现出某个指标的进度或实际情况 仪表盘的基本实现 ECharts 最基本的代...
    99+
    2022-12-17
    Vue Echarts仪表盘 Vue Echarts Vue仪表盘
  • vue怎么实现echarts中的仪表盘
    这篇文章主要介绍“vue怎么实现echarts中的仪表盘”，在日常操作中，相信很多人在vue怎么实现echarts中的仪表盘问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现echarts中的仪表盘...
    99+
    2023-06-29
  • android实现简单仪表盘效果
    本文实例为大家分享了android实现简单仪表盘效果的具体代码，供大家参考，具体内容如下 实现这个效果： 中间的文字很好写，外层的进度条就需要自定义控件了，代码如下： publ...
    99+
    2024-04-02
  • Android实现仪表盘控件开发
    仪表盘在工业软件中很常见，今天整一个图片式仪表盘控件（非几何图形绘制）。实现非常简单，一张背景图，一张指针。创建一个RelativeLayout布局文件，然后在里面布置好控件的位置，...
    99+
    2024-04-02
  • Python实现构建一个仪表板的示例代码
    目录简介内容1.创建一个Python文件2.在终端上运行该文件，在本地机器上显示3.在Heroku上部署仪表板总结这将为我们的团队节省每天重复的数据处理时间...... 简介 如果...
    99+
    2023-03-10
    Python构建仪表板 Python 仪表板
  • python如何实现实时可视化仪表盘
    这篇文章主要介绍python如何实现实时可视化仪表盘，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！python的数据类型有哪些python的数据类型：1. 数字类型，包括int（整型）、long（长整型）和float...
    99+
    2023-06-14
  • Qt 进度条的实现示例
    一、前言 　　有时我们需要在表格（QTableWidget）、树状栏（QTreeWidget）中直观显示任务进度或消耗百分比，达到报表显示的形式，可通过重写QLabel的方式实现。 ...
    99+
    2024-04-02
  • QT实现制作一个ListView列表的示例代码
    目录1、概述2、代码示例1.自定义QListWidget2.自定义QListWidgetItem3.使用3、图片演示1、概述 案例：使用Qt制作一个ListView。点击ListVi...
    99+
    2023-02-23
    QT制作ListView列表 QT ListView列表 QT ListView
  • Echart结合圆形实现仪表盘的绘制详解
    效果图 注意：使用startAngle: 200,endAngle: -20,在数据为零时，会出现一个实心圆，需要调整一下角度。 效果 代码 var option = { ...
    99+
    2024-04-02
  • Qt超时锁屏的实现示例
    概述 Qt实现超时锁屏的功能（工控机触摸屏），当手长时间不触摸屏幕的时候，程序超时会显示锁屏窗口。 效果 主窗口超时显示锁屏窗口： 系统窗口超时显示锁屏窗口： 实现思路 首先开...
    99+
    2024-04-02
  • Hystrix Dashboard断路监控仪表盘的实现详细介绍
    正常状态是UP，跳闸是⼀种状态CIRCUIT_OPEN，可以通过/health查看，前提是工程中需要引入SpringBoot的actuator（健康监控），它提供了很多监控所需的接口...
    99+
    2024-04-02
  • Android怎么自定义view实现科技感的仪表盘
    这篇文章主要讲解了“Android怎么自定义view实现科技感的仪表盘”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Android怎么自定义view实现科技感的仪表盘”吧！效果图实现View...
    99+
    2023-06-04
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作