功率因数cosφ仪表盘

一、截图

　　

二、说明

　　本篇博客主要是有三个亮点：

　　　　① 刻度标注在仪表盘标线外

　　　　② 仪表盘存在两个刻度值，分别是（正）0.5~1 和（负）-1~-0.5

　　　　③ 仪表盘内标注，分别是“超前”和“滞后”

三、代码

　　html代码

 <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;" >
   <p style="padding: 3px 10px;color: #8cc5fe;">{{title}}</p>
   <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>
 </nz-card>

　　ts代码

　　

 import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
 import * as echarts from 'echarts';
 import { EChartOption } from 'echarts';

 @Component({
   selector: 'app-powerfactor',
   templateUrl: './powerfactor.component.html',
   styleUrls: ['./powerfactor.component.css']
 })
 export class PowerfactorComponent implements OnInit {

   @Input() title;
   @Input() newpower  ;
   @Input() min;
   @Input() max;
   @Input() splitNumber;
   public option1:EChartOption ;
   constructor() {
    }

   ngOnInit() {

     this.setPowerData();
   }

   ngOnChanges(changes: SimpleChanges): void {
     if(parseFloat(this.newpower) >0.5){
       this.newpower = -this.newpower;
     }else{
       //Do-nothing
     }
     this.setPowerData();
   }

   //处理功率因数数据
   producePowerData(sign){
     const _self=this;
     if((sign == 0) && (_self.newpower) && (parseFloat(_self.newpower)<0 )){
       return _self.newpower;
     }else if((sign == 1) && (_self.newpower) && (parseFloat(_self.newpower)>0 )){
       return _self.newpower;
     }else{
       return 0;
     }
   }

   //处理显示指针
   producePowerPointer(sign){
     //sign,0代表'滞后',1代表'超前'
     const _self = this;
     if((sign == 0) && (parseFloat(_self.newpower) < 0)){
       return true;
     }else if((sign == 1) && (parseFloat(_self.newpower) > 0)){
       return true;
     }else{
       return false;
     }
   }

   //绘图函数
   setPowerData(){
     let powerdata = 0;
     if("--" == this.newpower){
       powerdata = 0;
     }else{
       powerdata = this.newpower;
     }

     this.option1 = {
       series: [
           //滞后表盘样式
           {
               type: "gauge",
               center:["35%", "45%"], // 仪表位置 ,左右，上下
               radius: "54%", //仪表大小
               startAngle: -270, //开始角度
               endAngle: -360, //结束角度
               min:-1,
               max:-0.5,
               splitNumber:5,
               axisLine: {
                   show: true,
                   lineStyle: { // 属性lineStyle控制线条样式
                     color: [
                         [0.02,'#f68d26'], // 100% 处的颜色
                         [1, '#3838d2'],
                     ],
                     width: 12
                 },

               },
               splitLine: {
                   show: true,
                   lineStyle:{
                       opacity :0,
                   }
               },
               axisTick: {
                   show: false
               },
               axisLabel: {
                   show: true,
                   distance: -20,
                   color: '#333',
                   formatter: function(v){
                     switch (v+''){
                         case '-0.5': return '';
                         case '-0.6': return '';
                         case '-0.7': return '滞后';
                         case '-0.8': return '';
                         case '-0.9': return '';
                         case '1': return '';
                         default: return '';
                     }
                 },

               },
               itemStyle :{
                          color :'black'
                      },
              pointer : { //指针样式
                      show:false,
                      length: '80%',
                      width :10,
                      itemStyle :{
                          color :'black'
                     }

               },
               detail: {
                   show: false
               }
           },
           //超前表盘样式
           {
             type: "gauge",
             center:["35%", "45%"], // 仪表位置 ,左右，上下
             radius: "54%", //仪表大小
             startAngle: -180, //开始角度
             endAngle: -270, //结束角度
             min:0.5,
             max:1,
             splitNumber:5,
             axisLine: {
                 show: true,
                 lineStyle: { // 属性lineStyle控制线条样式
                   color: [
                       [0.98,'#22a0f3'], // 100% 处的颜色
                       [1, '#f68d26'],
                   ],
                   width: 12,

               },

             },
             splitLine: {
                 show: true,
                 lineStyle:{
                     opacity :0,
                 }
             },
             axisTick: {
                 show: false
             },
             axisLabel: {
                 show: true,
                 distance: -20,
                 color: '#22a0f3',
                 formatter: function(v){
                   switch (v+''){
                       case '0.5': return '';
                       case '0.6': return '';
                       case '0.7': return '超前';
                       case '0.8': return '';
                       case '0.9': return '';
                       case '1': return '';
                       default: return '';
                   }
               },

             },
             itemStyle :{
                        color :'black'
                    },
            pointer : { //指针样式
                    show:false,
                    length: '80%',
                    width :10,
                    itemStyle :{
                        color :'black'
                   }

             },
             detail: {
                 show: false
             }
         },
           {
               type : "gauge",
               center:["35%", "45%"],  // 默认全局居中
               radius : "86%",
               startAngle: -270, //开始角度
               endAngle: -360, //结束角度
               min:-1,
               max:-0.5,
               splitNumber:5,
               axisLine : {
                   show : false,
                   lineStyle : {
                       color:[ [0.02,'#f68d26'],[1,'#3740d5']],
                       width : 0
                   }
               },
               splitLine : {
                   show:false,
                   length : 30,
                   lineStyle : {
                       width : 2
                   }
               },
               axisTick : { //刻度线样式（及短线样式）
                    length : 20,
                    show:false,
               },
               axisLabel : { //文字样式（及“10”、“20”等文字样式）
                   color : "#405a74",
                   distance : -26, //文字离表盘的距离
                   fontSize:12,
                   formatter: function(v){
                     switch (v+''){
                         case '-0.5': return '0.5';
                         case '-0.6': return '';
                         case '-0.7': return '0.7';
                         case '-0.8': return '';
                         case '-0.9': return '0.9';
                         case '-1': return '1';
                         default: return '';
                     }
                   },

               },
               itemStyle :{
                          color :'#13b4eb'
                  },
                pointer : { //指针样式
                      show: this.producePowerPointer(0),
                      length: '36%',
                      width :4,

               },
               detail: {
                   show:this.producePowerPointer(0),
                  formatter:'{value}',
                   offsetCenter: [0, "36%"],
                   height:30,
                   textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                      color: '#13b4eb',
                      fontSize : 26
                  },
               },
               data: [{
                   value:this.producePowerData(0),
                   // value: this.produceNegativePowerData(),
                   label: {
                       textStyle: {
                           fontSize: 12
                       }
                   }
               }]
           },

         {
             type : "gauge",
             center:["35%", "45%"],  // 默认全局居中
             radius : "86%",
             startAngle: -180, //开始角度
             endAngle: -270, //结束角度
             min:0.5,
             max:1,
             splitNumber:5,
             axisLine : {
                 show : false,
                 lineStyle : { // 属性lineStyle控制线条样式
                     color:[ [0.98,'#3740d5'],[1,'#f68d26']],
                     width : 0//表盘宽度
                 }
             },
             splitLine : { //分割线样式（及10、20等长线样式）
                 show:false,
                 length : 30,
                 lineStyle : { // 属性lineStyle控制线条样式
                     width : 2
                 }
             },
             axisTick : { //刻度线样式（及短线样式）
                  length : 20,
                  show:false,
             },
             axisLabel : { //文字样式（及“10”、“20”等文字样式）
                 color : "#405a74",
                 distance : -26, //文字离表盘的距离
                 fontSize:12,
                 formatter: function(v){
                   switch (v+''){
                       case '0.5': return '0.5';
                       case '0.6': return '';
                       case '0.7': return '0.7';
                       case '0.8': return '';
                       case '0.9': return '0.9';
                       case '1': return '1';
                       default: return '';
                   }
                 },

             },
             itemStyle :{
                        color :'#13b4eb',
                        fontSize:12
                },
              pointer : { //指针样式
                    show:this.producePowerPointer(1),
                    length: '36%',
                    width :4,

             },
             detail: {
                 show:this.producePowerPointer(1),
                formatter:'{value}',
                 offsetCenter: [0, "36%"],
                 height:30,
                 textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#13b4eb',
                    fontSize : 26
                },
             },
             data: [{
                 value:this.producePowerData(1),
                 label: {
                     textStyle: {
                         fontSize: 12
                     }
                 }
             }]
         }
       ]
     };
   }

   //处理颜色百分比方法
   processColorPercent(){
     const _self = this;
     if(_self.newpower && _self.max){
         let c_percent = _self.newpower/_self.max;
         return c_percent;
     }else{
         let c_percent = 0;
         return c_percent;
     }
   }

 }