@yelon/chart
Version:
Cache the dictionary, city data etc.
193 lines (188 loc) • 7.52 kB
JavaScript
import * as i0 from '@angular/core';
import { numberAttribute, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { G2BaseComponent } from '@yelon/chart/core';
import { NzSkeletonComponent, NzSkeletonModule } from 'ng-zorro-antd/skeleton';
import { CommonModule } from '@angular/common';
class G2GaugeComponent extends G2BaseComponent {
// #region fields
title;
height;
color = '#2f9cff';
bgColor; // = '#f0f2f5';
format;
percent;
padding = [10, 10, 30, 10];
// #endregion
install() {
// 自定义Shape 部分
this.winG2.registerShape('point', 'pointer', {
draw(cfg, container) {
const group = container.addGroup({});
// 获取极坐标系下画布中心点
const center = this.parsePoint({ x: 0, y: 0 });
// 绘制指针
group.addShape('line', {
attrs: {
x1: center.x,
y1: center.y,
x2: cfg.x,
y2: cfg.y,
stroke: cfg.color,
lineWidth: 2.5,
lineCap: 'round'
}
});
group.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 5.75,
stroke: cfg.color,
lineWidth: 2,
fill: '#fff'
}
});
return group;
}
});
const { el, height, padding, format, theme } = this;
const chart = (this._chart = new this.winG2.Chart({
container: el.nativeElement,
autoFit: true,
height,
padding,
theme
}));
chart.legend(false);
chart.animate(false);
chart.tooltip(false);
chart.coordinate('polar', {
startAngle: (-9 / 8) * Math.PI,
endAngle: (1 / 8) * Math.PI,
radius: 0.75
});
chart.scale('value', {
min: 0,
max: 100,
nice: true,
tickCount: 6
});
chart.axis('1', false);
chart.axis('value', {
line: null,
label: {
offset: -14,
formatter: format
},
tickLine: null,
grid: null
});
chart.point().position('value*1').shape('pointer');
this.ready.next(chart);
this.changeData();
chart.render();
}
changeData() {
const { _chart, percent, color, bgColor, title } = this;
if (!_chart)
return;
const data = [{ name: title, value: percent }];
const val = data[0].value;
_chart.annotation().clear(true);
_chart.geometries[0].color(color);
// 绘制仪表盘背景
_chart.annotation().arc({
top: false,
start: [0, 0.95],
end: [100, 0.95],
style: {
stroke: bgColor,
lineWidth: 12,
lineDash: null
}
});
_chart.annotation().arc({
start: [0, 0.95],
end: [data[0].value, 0.95],
style: {
stroke: color,
lineWidth: 12,
lineDash: null
}
});
_chart.annotation().text({
position: ['50%', '85%'],
content: title,
style: {
fontSize: 12,
fill: this.theme === 'dark' ? 'rgba(255, 255, 255, 0.43)' : 'rgba(0, 0, 0, 0.43)',
textAlign: 'center'
}
});
_chart.annotation().text({
position: ['50%', '90%'],
content: `${val} %`,
style: {
fontSize: 20,
fill: this.theme === 'dark' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.85)',
textAlign: 'center'
},
offsetY: 15
});
_chart.changeData(data);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: G2GaugeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: G2GaugeComponent, isStandalone: true, selector: "g2-gauge", inputs: { title: "title", height: ["height", "height", numberAttribute], color: "color", bgColor: "bgColor", format: "format", percent: ["percent", "percent", numberAttribute], padding: "padding" }, host: { properties: { "class.g2-gauge": "true" } }, exportAs: ["g2Gauge"], usesInheritance: true, ngImport: i0, template: `@if (!loaded) {
<nz-skeleton />
}`, isInline: true, dependencies: [{ kind: "component", type: NzSkeletonComponent, selector: "nz-skeleton", inputs: ["nzActive", "nzLoading", "nzRound", "nzTitle", "nzAvatar", "nzParagraph"], exportAs: ["nzSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: G2GaugeComponent, decorators: [{
type: Component,
args: [{
selector: 'g2-gauge',
exportAs: 'g2Gauge',
template: `@if (!loaded) {
<nz-skeleton />
}`,
host: {
'[class.g2-gauge]': 'true'
},
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
imports: [NzSkeletonComponent]
}]
}], propDecorators: { title: [{
type: Input
}], height: [{
type: Input,
args: [{ transform: numberAttribute }]
}], color: [{
type: Input
}], bgColor: [{
type: Input
}], format: [{
type: Input
}], percent: [{
type: Input,
args: [{ transform: numberAttribute }]
}], padding: [{
type: Input
}] } });
const COMPONENTS = [G2GaugeComponent];
class G2GaugeModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: G2GaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: G2GaugeModule, imports: [CommonModule, NzSkeletonModule, G2GaugeComponent], exports: [G2GaugeComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: G2GaugeModule, imports: [CommonModule, NzSkeletonModule, COMPONENTS] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: G2GaugeModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, NzSkeletonModule, ...COMPONENTS],
exports: COMPONENTS
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { G2GaugeComponent, G2GaugeModule };
//# sourceMappingURL=gauge.mjs.map