功率因数cosφ仪表盘

一、截图

　　

二、说明

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

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

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

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

三、代码

　　html代码

<nz-card style="position:absolute; 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; 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'],
                    ],
                     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'],
                  ],
                   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;
    }
  }

}