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