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._$expand;
delete params.sort;
return { ...params }; return { ...params };
} }
constructor(public service: DataService, private datePipe: DatePipe) {} constructor(public service: DataService, private datePipe: DatePipe) {}

View File

@ -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 });
} }

View File

@ -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 });
} }

View File

@ -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 });
} }

View File

@ -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;
} }