功率因数cosφ仪表盘
2024-05-10 11:55:07
一、截图
二、说明
本篇博客主要是有三个亮点：
① 刻度标注在仪表盘标线外
② 仪表盘存在两个刻度值，分别是（正）0.5~1 和（负）-1~-0.5
③ 仪表盘内标注，分别是“超前”和“滞后”
三、代码
html代码
1 <nz-card style="position:absolute;width: 100%;height: 200px;background-color: #0e0b2a;border: solid 0px #0e0b2a;margin-top: 10px;color: white;padding: 0px;margin: 0px;" >
2 <p style="padding: 3px 10px;color: #8cc5fe;">{{title}}</p>
3 <div echarts [options]="option1" style="position: relative;left: 30px;/* height: 100%; */-webkit-tap-highlight-color: transparent;user-select: none;max-height: 180px;overflow-y: hidden;top: 0px;width: 100%;overflow-x: hidden;" class="demo-chart"></div>
4 </nz-card>ts代码
1 import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
2 import * as echarts from 'echarts';
3 import { EChartOption } from 'echarts';
4
5 @Component({
6 selector: 'app-powerfactor',
7 templateUrl: './powerfactor.component.html',
8 styleUrls: ['./powerfactor.component.css']
9 })
10 export class PowerfactorComponent implements OnInit {
11
12 @Input() title;
13 @Input() newpower ;
14 @Input() min;
15 @Input() max;
16 @Input() splitNumber;
17 public option1:EChartOption ;
18 constructor() {
19 }
20
21
22 ngOnInit() {
23
24 this.setPowerData();
25 }
26
27 ngOnChanges(changes: SimpleChanges): void {
28 if(parseFloat(this.newpower) >0.5){
29 this.newpower = -this.newpower;
30 }else{
31 //Do-nothing
32 }
33 this.setPowerData();
34 }
35
36 //处理功率因数数据
37 producePowerData(sign){
38 const _self=this;
39 if((sign == 0) && (_self.newpower) && (parseFloat(_self.newpower)<0 )){
40 return _self.newpower;
41 }else if((sign == 1) && (_self.newpower) && (parseFloat(_self.newpower)>0 )){
42 return _self.newpower;
43 }else{
44 return 0;
45 }
46 }
47
48
49 //处理显示指针
50 producePowerPointer(sign){
51 //sign,0代表'滞后',1代表'超前'
52 const _self = this;
53 if((sign == 0) && (parseFloat(_self.newpower) < 0)){
54 return true;
55 }else if((sign == 1) && (parseFloat(_self.newpower) > 0)){
56 return true;
57 }else{
58 return false;
59 }
60 }
61
62
63 //绘图函数
64 setPowerData(){
65 let powerdata = 0;
66 if("--" == this.newpower){
67 powerdata = 0;
68 }else{
69 powerdata = this.newpower;
70 }
71
72 this.option1 = {
73 series: [
74 //滞后表盘样式
75 {
76 type: "gauge",
77 center:["35%", "45%"], // 仪表位置 ,左右，上下
78 radius: "54%", //仪表大小
79 startAngle: -270, //开始角度
80 endAngle: -360, //结束角度
81 min:-1,
82 max:-0.5,
83 splitNumber:5,
84 axisLine: {
85 show: true,
86 lineStyle: { // 属性lineStyle控制线条样式
87 color: [
88 [0.02,'#f68d26'], // 100% 处的颜色
89 [1, '#3838d2'],
90 ],
91 width: 12
92 },
93
94 },
95 splitLine: {
96 show: true,
97 lineStyle:{
98 opacity :0,
99 }
100 },
101 axisTick: {
102 show: false
103 },
104 axisLabel: {
105 show: true,
106 distance: -20,
107 color: '#333',
108 formatter: function(v){
109 switch (v+''){
110 case '-0.5': return '';
111 case '-0.6': return '';
112 case '-0.7': return '滞后';
113 case '-0.8': return '';
114 case '-0.9': return '';
115 case '1': return '';
116 default: return '';
117 }
118 },
119
120 },
121 itemStyle :{
122 color :'black'
123 },
124 pointer : { //指针样式
125 show:false,
126 length: '80%',
127 width :10,
128 itemStyle :{
129 color :'black'
130 }
131
132 },
133 detail: {
134 show: false
135 }
136 },
137 //超前表盘样式
138 {
139 type: "gauge",
140 center:["35%", "45%"], // 仪表位置 ,左右，上下
141 radius: "54%", //仪表大小
142 startAngle: -180, //开始角度
143 endAngle: -270, //结束角度
144 min:0.5,
145 max:1,
146 splitNumber:5,
147 axisLine: {
148 show: true,
149 lineStyle: { // 属性lineStyle控制线条样式
150 color: [
151 [0.98,'#22a0f3'], // 100% 处的颜色
152 [1, '#f68d26'],
153 ],
154 width: 12,
155
156 },
157
158 },
159 splitLine: {
160 show: true,
161 lineStyle:{
162 opacity :0,
163 }
164 },
165 axisTick: {
166 show: false
167 },
168 axisLabel: {
169 show: true,
170 distance: -20,
171 color: '#22a0f3',
172 formatter: function(v){
173 switch (v+''){
174 case '0.5': return '';
175 case '0.6': return '';
176 case '0.7': return '超前';
177 case '0.8': return '';
178 case '0.9': return '';
179 case '1': return '';
180 default: return '';
181 }
182 },
183
184 },
185 itemStyle :{
186 color :'black'
187 },
188 pointer : { //指针样式
189 show:false,
190 length: '80%',
191 width :10,
192 itemStyle :{
193 color :'black'
194 }
195
196 },
197 detail: {
198 show: false
199 }
200 },
201 {
202 type : "gauge",
203 center:["35%", "45%"], // 默认全局居中
204 radius : "86%",
205 startAngle: -270, //开始角度
206 endAngle: -360, //结束角度
207 min:-1,
208 max:-0.5,
209 splitNumber:5,
210 axisLine : {
211 show : false,
212 lineStyle : {
213 color:[ [0.02,'#f68d26'],[1,'#3740d5']],
214 width : 0
215 }
216 },
217 splitLine : {
218 show:false,
219 length : 30,
220 lineStyle : {
221 width : 2
222 }
223 },
224 axisTick : { //刻度线样式（及短线样式）
225 length : 20,
226 show:false,
227 },
228 axisLabel : { //文字样式（及“10”、“20”等文字样式）
229 color : "#405a74",
230 distance : -26, //文字离表盘的距离
231 fontSize:12,
232 formatter: function(v){
233 switch (v+''){
234 case '-0.5': return '0.5';
235 case '-0.6': return '';
236 case '-0.7': return '0.7';
237 case '-0.8': return '';
238 case '-0.9': return '0.9';
239 case '-1': return '1';
240 default: return '';
241 }
242 },
243
244 },
245 itemStyle :{
246 color :'#13b4eb'
247 },
248 pointer : { //指针样式
249 show: this.producePowerPointer(0),
250 length: '36%',
251 width :4,
252
253 },
254 detail: {
255 show:this.producePowerPointer(0),
256 formatter:'{value}',
257 offsetCenter: [0, "36%"],
258 height:30,
259 textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
260 color: '#13b4eb',
261 fontSize : 26
262 },
263 },
264 data: [{
265 value:this.producePowerData(0),
266 // value: this.produceNegativePowerData(),
267 label: {
268 textStyle: {
269 fontSize: 12
270 }
271 }
272 }]
273 },
274
275 {
276 type : "gauge",
277 center:["35%", "45%"], // 默认全局居中
278 radius : "86%",
279 startAngle: -180, //开始角度
280 endAngle: -270, //结束角度
281 min:0.5,
282 max:1,
283 splitNumber:5,
284 axisLine : {
285 show : false,
286 lineStyle : { // 属性lineStyle控制线条样式
287 color:[ [0.98,'#3740d5'],[1,'#f68d26']],
288 width : 0//表盘宽度
289 }
290 },
291 splitLine : { //分割线样式（及10、20等长线样式）
292 show:false,
293 length : 30,
294 lineStyle : { // 属性lineStyle控制线条样式
295 width : 2
296 }
297 },
298 axisTick : { //刻度线样式（及短线样式）
299 length : 20,
300 show:false,
301 },
302 axisLabel : { //文字样式（及“10”、“20”等文字样式）
303 color : "#405a74",
304 distance : -26, //文字离表盘的距离
305 fontSize:12,
306 formatter: function(v){
307 switch (v+''){
308 case '0.5': return '0.5';
309 case '0.6': return '';
310 case '0.7': return '0.7';
311 case '0.8': return '';
312 case '0.9': return '0.9';
313 case '1': return '1';
314 default: return '';
315 }
316 },
317
318 },
319 itemStyle :{
320 color :'#13b4eb',
321 fontSize:12
322 },
323 pointer : { //指针样式
324 show:this.producePowerPointer(1),
325 length: '36%',
326 width :4,
327
328 },
329 detail: {
330 show:this.producePowerPointer(1),
331 formatter:'{value}',
332 offsetCenter: [0, "36%"],
333 height:30,
334 textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
335 color: '#13b4eb',
336 fontSize : 26
337 },
338 },
339 data: [{
340 value:this.producePowerData(1),
341 label: {
342 textStyle: {
343 fontSize: 12
344 }
345 }
346 }]
347 }
348 ]
349 };
350 }
351
352
353 //处理颜色百分比方法
354 processColorPercent(){
355 const _self = this;
356 if(_self.newpower && _self.max){
357 let c_percent = _self.newpower/_self.max;
358 return c_percent;
359 }else{
360 let c_percent = 0;
361 return c_percent;
362 }
363 }
364
365 }
转载于:https://www.cnblogs.com/mycnblogs-guoguo/p/10382150.html
功率因数cosφ仪表盘相关推荐
- c语言功率算电量,电功率你理解透了吗？怎么算功率因数？1度电是多少？
原标题:电功率你理解透了吗?怎么算功率因数?1度电是多少? 1.电功率 电功率即电流在单位时间内所做的功,也就是说电流在1S内做的功. 在交流电路中,电功率分为视在功率.有功功率和无功功率. 1.1有 ...
- 一文了解无功功率、无功补偿、功率因数
一.无功功率 电网中的许多电力设备多是根据电磁感应原理工作的,他们在能量转换过程中建立交变的磁场,在一个周期内吸收的功率和释放的功率相等. 电源能量在通过纯电感或纯电容电路时并没有能量消耗,仅在负荷与 ...
- 【收藏】电气设计相关计算公式大全（附举例）
一.常用的需要系数负荷计算方法 1.用电设备组的计算负荷(三相): 有功计算负荷 Pjs=Kx·Pe(Kw): 无功计算负荷 Qjs=Pjs·tgψ(Kvar): 视 ...
- 和功率的计算公式_电机功率计算公式是什么？
三相平衡功率公式:P=1.732UIcosφ 其中 P-三相平衡功率 1.732-根号3 U-线电压,一般是380伏,变压器出来的电压常常是400伏左右 I-线电流 cosφ- ,是0到1之间的数值, ...
- sql 计算 某字段 不同值出现 的次数_教你如何合理选用和计算电线规格，电线回路分配和注意事项...
电工是装修中非常重要的隐藏工程,其涉及的每一个细节都是不容忽视的,选用电线更是责任重大,如果使用的电线配置不合理或者用劣质电线,就存在发生电气火灾的隐患.因此,根据不同场所要进行合理选择和使用. 一: ...
- [渝粤教育] 莆田学院 电机与拖动基础（一） 参考 资料
教育 -电机与拖动基础(一)-章节资料考试资料-莆田学院[] 绪论节测试 1.[单选题]电机的基本原理就是基于( ),实现机电能量转换. A.牛顿三大定律 B.电磁感应 C.质量守恒 D.洛伦兹力定律 ...
- jq中查找上级_【节能学院】电能管理系统在福州三岐小学项目中的设计及应用...
1 项目概述 该项目总投资约2.6亿元,建筑规模为4.8万㎡,建设地点在南屿镇葛岐村.晓岐村.项目设有教学楼A区.教学楼B区.教学楼C区.综合楼一区.综合楼二区.室内篮球场.室内游泳馆.足球场等. 此 ...
- 交流电的有效值rms值_交流电路的功率三角因数原来是这样理解的
点击"电工电气学习"关注即可免费订阅! 电工学习网:www.diangon.com 关注电工学习网官方微信公众号"电工电气学习",收获更多经验知识. 交流电路中 ...
- 以下不属于时序逻辑电路的有_电工电子技术（不建议浪费时间学习的科目）
(声明:本资料来自网络,侵权请告知删除.文末有全套高清版资料下载链接,敬请下载学习) 2019年7月在天津召开的土力学及岩土工程年会上,有一场青年教师的土力学讲课竞赛,由我作一些点评,其中关于土颗粒与 ...
- yb3防爆电机型号含义_YBK3防爆电机介绍
YBK3防爆电机介绍及标准 YBK3防爆电机全称:YBK3煤矿井下用隔爆型三相异步电动机,是在YBK2防爆电机的基础上结合当前国内先进的电磁技术研制而成,该电机具有高效.节能.寿命长.性能好.噪音低. ...
最新文章
- Microsoft.Data.ConnectionUI.DataConnectionDialog
- php中jwt权限认证,php 后端实现JWT认证方法示例
- 自学python困难吗_Python学习难不难?零基础好学吗?
- 小程序中ajax返回数据,请问在小程序中如何从请求success中将数据返回给对象data？...
- Solr实战（二）：索引操作
- 记一次ubuntu阿里的下载源的问题
- JS高级——JSON、数据存储学习笔记
- 一个WordPress站点绑定多个域名
- 通讯与计算机网络作业,通讯与计算机网络作业平时作业(填空题问答和计算题)讲述.doc...
- 如何让自己的email地址永久有效
- 想搭建一个手游平台怎么做？需要了解哪些细节？
- NATAPP内网穿透
- 将类似html数据打印机,白激光打印机的工作原理.doc
- 【C/C++基础进阶系列】实战记录 -- 内存泄漏检测相关总结
- javascript基础常识问答（三）
- 1 根文件系统 简单来说，（根文件系统）
- 遭遇svchoct.exe,vonine.exe,HBKernel32.sys,ssdtti.sys,System.exe,ublhbztl.sys等2
- 【线上分享】全球多媒体视频内容保护最佳实践
- 5G独立组网（SA）和 非独立组网（NSA）
- 【渝粤教育】电大中专计算机职业素养 (9)作业 题库
热门文章
- 生信高性能服务器,【玩转腾讯云】使用云服务器进行生信数据分析
- java生成word 框勾_Java根据word模板生成word文档之设计详细思路—word标签定义 | 学步园...
- AD19快速制作多管脚元件符号
- 用pc抓取vlan tag数据包
- ArcGIS中裁剪（clip）出现000117错误的解决办法
- 计算机应用与基础app,手机APP支持下《计算机应用基础》课程探究性学习活动设计与实验研究...
- 上顿号符号_顿号在键盘上怎么打？每日一答
- 双稳态电路的两个稳定状态是什么_555定时器原理知多少？四种应用电路分享
- 计算机专业如何发表论文,如何发表一篇计算机研究生论文
- Axure RP9使用指南