This commit is contained in:
wangshiming
2022-04-18 19:59:21 +08:00
parent 539a832228
commit 2ce3afa020
5 changed files with 36 additions and 25 deletions

View File

@ -111,6 +111,7 @@ export class DatatableMancustomtableComponent implements OnInit {
};
delete params._$expand;
delete params.sort;
return { ...params };
}
constructor(public service: DataService, private datePipe: DatePipe) {}

View File

@ -156,7 +156,7 @@ export class DatatableOwnerComponent implements OnInit {
} else if(this.mode === 'date') {
this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00']
} else{
this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00']
this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + ' 00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00']
}
this.st.reload({ ...this.reqParams });
}

View File

@ -121,7 +121,7 @@ export class DatatableFinancetableComponent implements OnInit {
} else if (this.mode === 'date') {
this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00']
} else {
this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00']
this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + ' 00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00']
}
this.st.reload({ ...this.reqParams });
}

View File

@ -118,7 +118,7 @@ export class DatatableOperationtableComponent implements OnInit {
} else if (this.mode === 'date') {
this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00']
} else {
this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00']
this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + ' 00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00']
}
this.st.reload({ ...this.reqParams });
}

View File

@ -13,9 +13,10 @@ export class OperationtablePieComponent implements OnInit {
@ViewChild('pie', { static: false }) pie!: G2PieComponent;
chartData: any = [];
el: any;
chart: any;
enterpriseInfoIdPie = ''
interManlist: any = []
innerView: any =[];
constructor(private service: DataService, private ngZone: NgZone) {
}
@ -27,7 +28,11 @@ export class OperationtablePieComponent implements OnInit {
this.service.request(this.service.$api_operationalReportWaybillStatusDistribution, {id: this.enterpriseInfoIdPie}).subscribe(res => {
if (res) {
this.chartData = res
this.ngZone.runOutsideAngular(() => this.init(this.el));
// this.ngZone.runOutsideAngular(() => this.init(this.el));
setTimeout(() => {
this.chart?.data(this.chartData);
this.chart?.render();
}, 1000)
}
})
}
@ -39,21 +44,26 @@ export class OperationtablePieComponent implements OnInit {
}
render(el: ElementRef<HTMLDivElement>): void {
this.el = el.nativeElement
setTimeout(() => {
this.ngZone.runOutsideAngular(() => this.init(this.el));
}, 500)
}
private init(el: HTMLElement): void {
const chart = new Chart({
this.chart = new Chart({
container: el,
autoFit: true,
height: 400,
});
// 新建一个 view 用来单独渲染Annotation
const innerView = chart.createView();
chart.coordinate('theta', {
// const innerView = chart.createView();
this.innerView = this.chart.createView();
this.chart.coordinate('theta', {
radius: 0.6,
innerRadius: 0.7,
});
chart.data(this.chartData);
// this.chart.data(this.chartData);
// chart.scale('percent', {
// formatter: val => {
@ -62,10 +72,10 @@ export class OperationtablePieComponent implements OnInit {
// },
// });
chart.tooltip(false);
this.chart.tooltip(false);
// 声明需要进行自定义图例字段: 'item'
chart.legend('item', {
this.chart.legend('item', {
position: 'right', // 配置图例显示位置
custom: true, // 关键字段,告诉 G2要使用自定义的图例
items: this.chartData.map((obj: any, index: any) => {
@ -77,7 +87,7 @@ export class OperationtablePieComponent implements OnInit {
symbol: 'square', // marker 的形状
style: {
r: 5, // marker 图形半径
fill: chart.getTheme().colors10[index], // marker 颜色,使用默认颜色,同图形对应
fill: this.chart.getTheme().colors10[index], // marker 颜色,使用默认颜色,同图形对应
},
}, // marker 配置
};
@ -90,7 +100,7 @@ export class OperationtablePieComponent implements OnInit {
},
});
const interval = chart
const interval = this.chart
.interval()
.adjust('stack')
.position('percent')
@ -102,7 +112,7 @@ export class OperationtablePieComponent implements OnInit {
})
.state({
active: {
style: element => {
style: (element: any) => {
const shape = element.shape;
return {
lineWidth: 1,
@ -114,17 +124,17 @@ export class OperationtablePieComponent implements OnInit {
});
// 移除图例点击过滤交互
chart.removeInteraction('legend-filter');
chart.interaction('element-active');
this.chart.removeInteraction('legend-filter');
this.chart.interaction('element-active');
chart.render(true);
this.chart.render(true);
// 默认选择
interval.elements[0].setState('selected', true);
const ele = interval.elements[0].getData();
// 监听 element 上状态的变化来动态更新 Annotation 信息
chart.on('element:statechange', (ev: any) => {
this.chart.on('element:statechange', (ev: any) => {
const { state, stateStatus, element } = ev.gEvent.originalEvent;
// 本示例只需要监听 active 的状态变化
@ -142,10 +152,10 @@ export class OperationtablePieComponent implements OnInit {
// 绘制 annotation
let lastItem: any;
function updateAnnotation(data: any) {
const updateAnnotation = (data: any) => {
if (data.item !== lastItem) {
innerView.annotation().clear(true);
innerView
this.innerView.annotation().clear(true);
this.innerView
.annotation()
.text({
position: ['50%', '50%'],
@ -168,7 +178,7 @@ export class OperationtablePieComponent implements OnInit {
offsetX: -10,
offsetY: 20,
})
innerView.render(true);
this.innerView.render(true);
lastItem = data.item;
@ -176,9 +186,9 @@ export class OperationtablePieComponent implements OnInit {
}
// 清空 annotation
function clearAnnotation() {
innerView.annotation().clear(true);
innerView.render(true);
function clearAnnotation(this: any) {
this.innerView?.annotation()?.clear(true);
this.innerView.render(true);
lastItem = null;
}