实现一个仪表盘

已于 2022-12-13 17:19:52 修改
阅读量1.2k 收藏 4
点赞数 3
分类专栏： css 文章标签： css javascript css3
于 2022-12-13 17:10:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beauty_600/article/details/128297869
版权

在这里插入图片描述
UI 甩过来了这样的一张图，让我实现，作为一位面向Google百度编程的程序媛，立马打开了搜索引擎，找遍了都没有找到合适的插件。

怎么办呢？只能自己来了呀！首先我们简单来列一下这张图重要的几个点：

  • 实现圆环进度效果
  • 实现大指针（那根针一样的东西 哈哈哈）的进度指向效果
  • 实现圆环上的图标指针随着进度移动效果
  • 实现背景渐变

接下来我们就从这几个点逐步击破，实现效果，哈哈哈哈哈哈哈哈哈哈哈 开始吧！！！

实现圆环进度效果

这里我们可以用到css的锥形渐变，我们可以通过计算值所占的比例来计算进度，再用伪元素把中间部分盖掉，这样我们就得到了一个圆环啦。但是呢我们需要的是半圆环，所以可以用clip-path 来进行 矩形裁剪，只留上半部分。
在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

<div class="dashboard_content">
	<div class="box">
		<span class="progressBar"></span>
	</div>
</div>

.dashboard_content {
	position: relative;
	z-index: 2;
	width: 300px;
	height: 300px;
	margin-top: 10px;
	
   .box {
     position: absolute;
     width: 300px;
     height: 300px;
     // 矩形裁剪
     clip-path: inset(0% 0% 50% 0%);     
     
     .progressBar {
       --gauge-percentage: calc(90 / 200 * 100%);
       --gauge-circle-color: #60e8fc;
       --gauge-circle-color-lighter: #072d5b;
       display: flex;
       justify-content: center;
       align-items: center;
       width: 300px;
       height: 300px;
       color: #000;
       transform: rotate(-90deg);
       background: conic-gradient(
         var(--gauge-circle-color) var(--gauge-percentage),
         var(--gauge-circle-color-lighter) 0
       );
       transition: all 0.5s cubic-bezier(0.14, 1.24, 0.96, 0.77);
       border-radius: 50%;

       &::before {
         content: '';
         position: absolute;
         display: flex;
         justify-content: center;
         align-items: center;
         width: calc(100% - 16px);
         height: calc(100% - 16px);
         background: #072d5b;
         border-radius: inherit;
       }
     }
   }
}

实现大指针

绘制指针

指针就相当于一个半圆和三角形拼起来
在这里插入图片描述 在这里插入图片描述

计算指针旋转角

大圆环的直径是300，小圆环（假设有圆）把指针也看做一个圆，指针的长度就是圆的半径，圆心为针头，直径是160。小圆环可旋转的范围大概是黄色位置到绿色位置。
在这里插入图片描述
大圆和小圆的相对位置如下图所示：
在这里插入图片描述

如何计算绿色指针指向大圆的180°时候，小圆大概是多少度，也就是计算小圆环可旋转的范围是多少度。所以我们要计算 ∠EAC 只要计算 ∠BAC 就行啦。
已知 边长BC是【大圆半径】：150，边长AB是【大圆半径 减 向上偏移量（加上指针宽度指针宽度14）】：64。
根据正切定理：
在这里插入图片描述
tan∠BAC = BC / AB = 150 / 64 ≈ 2.3；哈哈哈哈哈然后又开始面向百度编程了。
在这里插入图片描述
所以我们就知道了∠BAC 是67°，即是 ∠EAC 是23°。那么小圆环可旋转的范围：-23° ~ 203°，总共 226°。
在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

<div class="dashboard_content">
    <div class="conic_pointer">
      <div class="conic_pointer_circle"></div>
      <div class="conic_pointer_rect"></div>
    </div>
	<div class="box">
		<span class="progressBar"></span>
	</div>
</div>

.conic_pointer {
   position: absolute;
   width: 160px;
   height: 14px;
   background: red;
   z-index: 2;
   margin-left: calc((300px - 160px) / 2);
   margin-top: calc(120px - 20px);
   transform: rotate((0.9 * 226deg) - 23deg);
   &_circle {
     left: calc(50% - 7px);
     position: absolute;
     width: 14px;
     height: 14px;
     background: #fff;
     border-radius: 50%;
   }
   &_rect {
     position: absolute;
     left: 0;
     width: 80px;
     height: 14px;
     background-color: #fff;
     clip-path: polygon(100% 0px, 100% 100%, 0px 50%);
   }
 }

实现圆环上的图标

在这里插入图片描述
图标是根据进度进行移动的，并且进行了相应的角度旋转。
以下偏移都以扇形0°位置作为参照，我们把图标的位置分成五种情况：

1. 在扇形最左侧

在这里插入图片描述

宽度：0
高度：0

2. 在扇形最左侧到中间

在这里插入图片描述

在这里插入图片描述

已知 边长b 为150，根据三角函数 sin(∠C) = c / b；cos(∠C) = a / b；180° 等于 π，夹角 = 夹角比 * π。
我们假设总占比为1，进度占比为0.7。

// 指针占比
let a = 0.7;
// 扇形占比
let b = 1;
// 与底边的夹角比
let angle = a;

宽度：扇形半径 - Math.cos(Math.PI * 夹角比) * 扇形半径
高度：Math.sin(Math.PI * 夹角比) * 扇形半径

3. 在扇形最中间

在这里插入图片描述

宽度：大圆半径
高度：大圆半径

4. 在扇形中间到最右侧

在这里插入图片描述
在这里插入图片描述
已知 边长b 为150，根据三角函数 sin(∠C) = c / b；cos(∠C) = a / b；180° 等于 π，夹角 = 夹角比 * π。
我们假设总占比为1，进度占比为0.7。

// 指针占比
let a = 0.7;
// 扇形占比
let b = 1;
// 与底边的夹角比
let angle = b - a;

宽度：Math.cos(Math.PI * 夹角比) * 扇形半径 + 扇形半径
高度：Math.sin(Math.PI * 夹角比) * 扇形半径

5. 在扇形最右侧

在这里插入图片描述

宽度：大圆半径 * 2
高度：0

下面是具体的计算方法，拿参数存是为了在css中使用变量

// 小指针偏移
let testW = ref<any>();
let testH = ref<any>();
// 小指针旋转角
let ringRotate = ref<any>();
// 大指针旋转角
let pointerRotate = ref<any>();
let ringPercentage = ref<any>();
// 左侧颜色
let ringLeftColor = ref<any>();
// 右侧颜色
let ringRightColor = ref<any>();
/**
 *
 * @param r 占比
 */
function calculationPosition(percent = 0) {
  // 指针占比
  let a = percent;
  // 扇形占比
  let b = 1;
  // 小指针的总旋转角是180°
  ringRotate.value = a * 180 + 'deg';
  // 大指针的总旋转角是226°
  pointerRotate.value = (a * 226 - 23).toFixed(2) + 'deg';
  ringPercentage.value = (a / 2) * 100 + '%';
  ringLeftColor.value = a > 0 ? '#60e8fc' : '#072d5b';
  ringRightColor.value = a == b ? '#60e8fc' : '#072d5b';
  // 与底边的夹角比
  let sectorRatio;
  // 扇形半径
  let sectorRadius = 150;
  // 横向偏移
  let lateralOffset = -11;
  // 在扇形左侧
  if (a < b / 2) {
    sectorRatio = a;
    testH.value = (Math.sin(Math.PI * sectorRatio) * Number(sectorRadius))?.toFixed(2) || 0;
    testW.value =
      (
        Number(sectorRadius) -
        Math.cos(Math.PI * sectorRatio) * Number(sectorRadius)
      )?.toFixed(2) || 0;
  }
  // 在扇形右侧
  else if (a > b / 2) {
    sectorRatio = b - a;
    lateralOffset = -19;
    testH.value = (Math.sin(Math.PI * sectorRatio) * Number(sectorRadius))?.toFixed(2) || 0;
    testW.value =
      (
        Math.cos(Math.PI * sectorRatio) * Number(sectorRadius) +
        Number(sectorRadius)
      )?.toFixed(2) || 0;
  }
  // 扇形最左边
  if (a == 0) {
    testH.value = 0;
    testW.value = 0;
  } else if (a == b) {
    lateralOffset = -19;
    testH.value = 0;
    testW.value = Number(sectorRadius) * 2;
  } else if (a == b / 2) {
    testH.value = Number(sectorRadius);
    testW.value = Number(sectorRadius);
  }
  testH.value =
    floatObj.add(-15, floatObj.subtract(Number(sectorRadius), testH.value)) + 'px';
  testW.value = floatObj.add(Number(lateralOffset), testW.value) + 'px';
}

这个可以用伪元素
在这里插入图片描述

.dashboard_content {
  &::before {
    content: '';
    position: absolute;
    top: 149px;
    width: 8px;
    height: 8px;
    //background: #60e8fc;
    background: v-bind(ringLeftColor);
    clip-path: circle(50% at 50% 0%);
    border-radius: inherit;
    z-index: 3;
  }
  &::after {
    content: '';
    position: absolute;
    top: 149px;
    left: 292px;
    width: 8px;
    height: 8px;
    //background: #60e8fc;
    background: v-bind(ringRightColor);
    clip-path: circle(50% at 50% 0%);
    border-radius: inherit;
    z-index: 3;
  }
}

实现背景渐变

走到了这一步差不多已经做完啦！！！长吐了一口气…嘿嘿嘿
画一个带渐变色的圆形层级放最上面。
在这里插入图片描述

<div class="box_bg"> </div>

.box_bg {
  position: absolute;
  width: calc(300px - 16px);
  height: calc(300px - 16px);
  top: 8px;
  left: 8px;
  &::before {
    content: '';
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #00061c;
    border-radius: 50%;
  }
  &::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(180deg, #072d5b 0%, transparent 60%);
  }
}

在这里插入图片描述

你在说啥-Lynn
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css绘制自定义数据仪表盘
weixin_39168678的博客
02-28 3519
效果如下： 指针可以随自定义数据的改变而改变， H5 &lt;body&gt; &lt;div class="dial_father"&gt;&lt;!--表盘 --&gt; &lt;div class="dial_box"&gt; &lt;/div&gt; &lt;!-- box --&gt;
vue+echarts实现多个仪表盘图表
Summer_JK的博客
06-16 1229
vue+echarts实现多个仪表盘图表根据echarts官网单个仪表盘修改成多个仪表盘，代码如下： 如图所示：
CSS 实现汽车仪表盘（一个项目学会 N 个键技术点）
weixin_45768768的博客
01-15 1221
纯 CSS 无图片，模拟汽车仪表盘，支持转速、迈速、档位联动、支持声浪。学习仓库源码快速进阶，包括但不限于 React TypeScript Git Scss Eslint
uniapp+css封装圆环仪表盘（拒绝canvas画图）
weixin_48293798的博客
06-06 515
uniapp+css封装圆环仪表盘（拒绝canvas画图）
纯JS+Vue和canvas实现一个仪表盘
为了皮肤，争取早日到Lv4。
07-31 3234
【代码】纯JS+Vue实现一个仪表盘。
第一个实例：QT实现汽车电子仪表盘
smartvxworks的博客
09-03 2737
本实例通过QT实现汽车电子仪表盘的UI设计与实现。Qt 是一个1991年由Qt Company开发的跨平台C++图形用户界面应用程序开发框架。它既可以开发GUI程序，也可用于开发非GUI程序，比如控制台工具和服务器。Qt是面向对象的框架，使用特殊的代码生成扩展（称为元对象编译器(Meta Object Compiler, moc)）以及一些宏，Qt很容易扩展，并且允许真正地组件编程。2008年，Qt Company科技被诺基亚公司收购，Qt也因此成为诺基亚旗下的编程语言工具。
python 仪表盘实现_使用python绘制一个仪表盘显示
weixin_39737636的博客
11-20 1329
使用Python绘制一个看起来比较高大上的仪表盘显示数据，让我们做出来的表格更加美观。工具/原料电脑pycharm方法/步骤1打开我们的Python编辑器，首先我们需要添加用到的包文件，如图所示，在文件，设置选项下，点击右侧的加号，然后输入我们需要添加的包名，搜索。2安装完成之后，我们创建的新文件中，输入如图所示的代码，设置我们创建的仪表盘图标的标题，以及相关内容。3保存我们的文件，然后点击运行下...
qt实现一个简单的仪表盘
qq_30400965的博客
09-07 3028
代码结构 其中dialplate 在Forms中 右键add new Qt–qt设计师界面类 下一步 类名 dialpate 下一步 完成 我这里类名都是小写的 注意一下 dialplate.h // An highlighted block #ifndef dialplate_H #define dialplate_H #include <QWidget> #include<QPainter> namespace Ui { class dialplate; } cl.
QML Canvas绘制一个简单的仪表盘
龚建波
02-23 2121
QML 的 Canvas 提供了一个 2D 画布，支持所有 HTML5 2D 上下文像素操作。使用 QML Canvas 应该避免频繁的更新和动画处理，如果可能的话，最好使用QQuickPaintedItem并通过QPainter在C ++中实现绘图，而不是使用更昂贵且性能可能更低的JavaScript和Context2D方法。 这次我试着画了一个简单的仪表盘，效果和完整代码如下（如果要好看的表...
echarts仪表盘点击打分实现
热门推荐
FJJJJJ
06-02 1万+
Echarts仪表盘刻度点击 项目中需要使用仪表盘来做一个打分的功能，·下面是一个官网的仪表盘，是没有刻度的点击事件的，所以就要手动实现一个了， 思路 这里的一个方框指的是一个canvas，然后根据比例获取到仪表盘的一个中心，然后根据鼠标点击的相对canvas的坐标值，能够算出指针角度的tan值，然后根据tan值来判断指针所指的刻度，然后设值渲染。 这边就直接上代码了。 <div v...
实现圆形仪表盘样式进度条
04-04
这是一个实现支持圆形仪表盘样式进度条效果案例，源码LineProgressView，实现圆形仪表盘样式进度条。支持多项属性的自定义包括数量、颜色、圆弧角度、延迟等等。 使用方法： 将demo中的文件夹LineProgressView复制...
Android自定义View实现渐变色仪表盘
08-26
指针指示当前数据位置是渐变色仪表盘的另一个重要组件。我们使用Bitmap类来绘制指针，然后使用Canvas类来绘制指针在圆弧上的位置。 六、数据文本跟随弧度显示 数据文本跟随弧度显示是渐变色仪表盘的另一个重要组件...
Android实现仪表刻度盘
08-27
本案例中，我们将讨论如何使用Android的Canvas API来实现一个仪表刻度盘，这通常用于显示实时数据，如温度、湿度或其他指标。Canvas是Android提供的一种低级绘图工具，它允许开发者在屏幕上绘制各种图形，包括线条、...
echarts汽车仪表盘动画效果
07-24
在本案例中，Canvas是实现仪表盘图形绘制的核心，可以绘制出圆形的仪表盘背景、指针、刻度线、数值标签等元素。开发者可以通过Canvas的drawImage()方法来加载和显示图片，如仪表盘的背景图片；使用beginPath(), arc...
如何使用虚拟仪器实现汽车仪表盘的仿真设计
07-07
针对汽车传统仪器测试方法成本大、效率低的问题，采用虚拟...本文采用 Ｌａｂｖｉｅｗ作为汽车仪表盘仿真平台，根据汽车仪表盘功能，结合虚拟仪器技术实现了汽车仪表盘车速、油耗、里程以及报警指示功能的建模与仿真。
网站基本布局CSS
m0_46608027的博客
07-24 825
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
css 作业 2
最新发布
没有 bug 的代码是不完美的！
07-25 658
写完了
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
qq_2511276124的博客
07-24 307
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
echarts实现一个仪表盘代码
09-09
### 回答1： 以下是一个简单的使用 Echarts 实现仪表盘的代码示例： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 仪表盘示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { tooltip: { formatter: "{a} <br/>{b} : {c}%" }, series: [ { name: '业务指标', type: 'gauge', detail: {formatter:'{value}%'}, data: [{value: 50, name: '完成率'}] } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 这个示例使用了 Echarts 的 `gauge` 类型，通过设置 `detail` 属性来显示指针的值。你可以根据需要调整参数来满足你的需求。 ### 回答2： ECharts 是一款基于 JavaScript 的数据可视化库，可以帮助用户通过简洁、直观的方式展示数据。要实现一个仪表盘，可以根据 ECharts 的官方文档和示例进行操作。 首先，需要引入 ECharts 的库文件，并创建一个容器用于放置仪表盘图表。可以使用如下代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仪表盘示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> </head> <body> <div id="chartContainer" style="width: 600px; height: 400px;"></div> <script> // 使用 ECharts 初始化图表 var chart = echarts.init(document.getElementById('chartContainer')); // 定义仪表盘的配置项和数据 var option = { series: [ { type: 'gauge', detail: {show: false}, data: [{value: 50, name: '完成率'}] } ] }; // 将配置项应用于图表 chart.setOption(option); </script> </body> </html> ``` 在上述代码中，`<script>` 标签中的 JavaScript 部分用于初始化图表、定义仪表盘的配置项和数据，并将配置项应用于图表。`chartContainer` 是用于放置图表的容器的 ID，可以根据需要进行调整。 在 `option` 配置项中，`type` 指定了图表的类型为 `gauge`，`detail` 设置了仪表盘的详情显示设置，`data` 数组中的对象设置了仪表盘的数据。其中 value 表示仪表盘当前显示的数值，name 表示该数据的名称。 运行上述代码，就可以在浏览器中看到一个简单的仪表盘图表。根据需要，可以根据 ECharts 提供的配置项进行更丰富的设置和样式调整。 ### 回答3： ECharts是一款非常强大的数据可视化工具，我们可以使用它实现一个仪表盘。下面是一个使用ECharts绘制仪表盘的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts 仪表盘示例</title> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 400px; height: 300px;"></div> <script> // 初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { series: [ { type: 'gauge', detail: {formatter: '{value}%'}, data: [{value: 50, name: '完成率'}] } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 在代码中我们首先引入了ECharts的库文件，可以通过`<script>`标签的`src`属性来引入。然后在`<div>`标签中创建了一个容器，用于显示仪表盘。接着使用JavaScript代码初始化了ECharts实例，并以一个`<div>`元素的id作为参数传入。在配置项中定义了一个仪表盘的系列及其数据，其中`value`表示完成率，`name`表示名称。最后使用`setOption`方法将配置项传入ECharts实例并显示出来。 通过以上代码，我们可以在页面中看到一个简单的仪表盘，其中的完成率为50%。你可以根据实际需求进行配置调整，如更改仪表盘的样式、添加更多的数据和指针等。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值