功率因数cosφ仪表盘
一、截图
二、说明
本篇博客主要是有三个亮点：
① 刻度标注在仪表盘标线外
② 仪表盘存在两个刻度值，分别是（正）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 }
