yoyo-ng-modulewindy
Version:
服务于52ABP模板的前端开源的相关组件内容。整合了ng-alain和你NG ZORRO的内容
191 lines • 6.33 kB
JavaScript
import { Component, Input, ViewChild, ElementRef, NgZone, ChangeDetectionStrategy, } from '@angular/core';
import { toNumber } from 'yoyo-ng-module/util';
var G2GaugeComponent = /** @class */ (function () {
function G2GaugeComponent(zone) {
this.zone = zone;
this.color = '#2F9CFF';
this.bgColor = '#F0F2F5';
this.initFlag = false;
}
Object.defineProperty(G2GaugeComponent.prototype, "height", {
get: function () {
return this._height;
},
set: function (value) {
this._height = toNumber(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(G2GaugeComponent.prototype, "percent", {
get: function () {
return this._percent;
},
set: function (value) {
this._percent = toNumber(value);
},
enumerable: true,
configurable: true
});
G2GaugeComponent.prototype.ngOnInit = function () {
var _this = this;
this.initFlag = true;
this.zone.runOutsideAngular(function () { return setTimeout(function () { return _this.install(); }, 100); });
};
G2GaugeComponent.prototype.createData = function () {
return [{ name: this.title, value: +this.percent }];
};
G2GaugeComponent.prototype.draw = function () {
if (!this.chart)
return;
this.chart.guide().clear();
var data = this.createData();
// 绘制仪表盘背景
this.chart.guide().arc({
zIndex: 0,
top: false,
start: [0, 0.95],
end: [100, 0.95],
style: {
// 底灰色
stroke: this.bgColor,
lineWidth: 12,
},
});
// 绘制指标
this.chart.guide().arc({
zIndex: 1,
start: [0, 0.95],
end: [data[0].value, 0.95],
style: {
stroke: this.color,
lineWidth: 12,
},
});
this.chart.changeData(data);
};
G2GaugeComponent.prototype.install = function () {
this.node.nativeElement.innerHTML = '';
var Shape = G2.Shape;
// 自定义Shape 部分
Shape.registerShape('point', 'pointer', {
drawShape: function (cfg, group) {
var point = cfg.points[0]; // 获取第一个标记点
point = this.parsePoint(point);
var center = this.parsePoint({
// 获取极坐标系下画布中心点
x: 0,
y: 0,
});
// 绘制指针
group.addShape('line', {
attrs: {
x1: center.x,
y1: center.y,
x2: point.x,
y2: point.y,
stroke: cfg.color,
lineWidth: 2,
lineCap: 'round',
},
});
var origin = cfg.origin;
group.addShape('text', {
attrs: {
x: center.x,
y: center.y + 80,
text: origin._origin.value + "%",
textAlign: 'center',
fontSize: 24,
fill: 'rgba(0, 0, 0, 0.85)',
},
});
return group.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 9.75,
stroke: cfg.color,
lineWidth: 2,
fill: '#fff',
},
});
},
});
var data = this.createData();
var chart = new G2.Chart({
container: this.node.nativeElement,
forceFit: true,
height: this.height,
padding: [10, 10, 30, 10],
});
chart.source(data);
chart.coord('polar', {
startAngle: -1.2 * Math.PI,
endAngle: 0.2 * Math.PI,
});
chart.scale('value', {
min: 0,
max: 100,
nice: true,
tickCount: 6,
});
chart.axis('1', false);
// 刻度值
chart.axis('value', {
zIndex: 2,
line: null,
label: {
offset: -12,
formatter: this.format,
},
tickLine: null,
grid: null,
});
chart.legend(false);
chart
.point({
generatePoints: true,
})
.position('value*1')
.shape('pointer')
.color(this.color)
.active(false);
this.chart = chart;
this.draw();
};
G2GaugeComponent.prototype.uninstall = function () {
if (this.chart)
this.chart.destroy();
};
G2GaugeComponent.prototype.ngOnChanges = function () {
if (this.initFlag)
this.draw();
};
G2GaugeComponent.prototype.ngOnDestroy = function () {
this.uninstall();
};
G2GaugeComponent.decorators = [
{ type: Component, args: [{
selector: 'g2-gauge',
template: "<div #container></div>",
changeDetection: ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
G2GaugeComponent.ctorParameters = function () { return [
{ type: NgZone }
]; };
G2GaugeComponent.propDecorators = {
title: [{ type: Input }],
height: [{ type: Input }],
color: [{ type: Input }],
bgColor: [{ type: Input }],
format: [{ type: Input }],
percent: [{ type: Input }],
node: [{ type: ViewChild, args: ['container',] }]
};
return G2GaugeComponent;
}());
export { G2GaugeComponent };
//# sourceMappingURL=gauge.component.js.map