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