diff --git a/src/app/routes/datatable/components/compliance/index/index.component.ts b/src/app/routes/datatable/components/compliance/index/index.component.ts
index 162d6391..4de2d93e 100644
--- a/src/app/routes/datatable/components/compliance/index/index.component.ts
+++ b/src/app/routes/datatable/components/compliance/index/index.component.ts
@@ -5,7 +5,6 @@ import { format } from 'date-fns';
import { SFComponent, SFDateWidgetSchema, SFRadioWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline';
import { Chart } from '@antv/g2';
-const DataSet = require('@antv/data-set');
@Component({
selector: 'app-datatable-compliance-index',
templateUrl: './index.component.html',
diff --git a/src/app/routes/datatable/components/financetable/curve/curve.component.html b/src/app/routes/datatable/components/financetable/curve/curve.component.html
new file mode 100644
index 00000000..bcfe240b
--- /dev/null
+++ b/src/app/routes/datatable/components/financetable/curve/curve.component.html
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/src/app/routes/datatable/components/financetable/curve/curve.component.less b/src/app/routes/datatable/components/financetable/curve/curve.component.less
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/routes/datatable/components/financetable/curve/curve.component.ts b/src/app/routes/datatable/components/financetable/curve/curve.component.ts
new file mode 100644
index 00000000..620d2029
--- /dev/null
+++ b/src/app/routes/datatable/components/financetable/curve/curve.component.ts
@@ -0,0 +1,168 @@
+import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
+import { DataService } from '../../../services/data.service';
+// import DataSet from '@antv/data-set';
+const DataSet = require('@antv/data-set');
+import { Chart } from '@antv/g2';
+@Component({
+ selector: 'app-financetable-curve',
+ templateUrl: './curve.component.html',
+ styleUrls: ['./curve.component.less']
+})
+export class FinanceTableCurveComponent implements OnInit {
+ constructor(private service: DataService, private ngZone: NgZone) {}
+
+ ngOnInit(): void {}
+
+ handleClick(data: G2MiniAreaClickItem): void {
+ this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
+ }
+
+ render(el: ElementRef): void {
+ this.ngZone.runOutsideAngular(() => this.initBar(el.nativeElement));
+ }
+ private initBar(el: HTMLElement): void {
+ const data = [
+ { name: '已收金额（元）', 月份: 'Jan.', 月均降雨量: 18.9 },
+ { name: '已收金额（元）', 月份: 'Feb.', 月均降雨量: 28.8 },
+ { name: '已收金额（元）', 月份: 'Mar.', 月均降雨量: 39.3 },
+ { name: '已收金额（元）', 月份: 'Apr.', 月均降雨量: 81.4 },
+ { name: '已收金额（元）', 月份: 'May', 月均降雨量: 47 },
+ { name: '已收金额（元）', 月份: 'Jun.', 月均降雨量: 20.3 },
+ { name: '已收金额（元）', 月份: 'Jul.', 月均降雨量: 24 },
+ { name: '已收金额（元）', 月份: 'Aug.', 月均降雨量: 35.6 },
+ { name: '已付运费（元）', 月份: 'Jan.', 月均降雨量: 12.4 },
+ { name: '已付运费（元）', 月份: 'Feb.', 月均降雨量: 23.2 },
+ { name: '已付运费（元）', 月份: 'Mar.', 月均降雨量: 34.5 },
+ { name: '已付运费（元）', 月份: 'Apr.', 月均降雨量: 99.7 },
+ { name: '已付运费（元）', 月份: 'May', 月均降雨量: 52.6 },
+ { name: '已付运费（元）', 月份: 'Jun.', 月均降雨量: 35.5 },
+ { name: '已付运费（元）', 月份: 'Jul.', 月均降雨量: 37.4 },
+ { name: '已付运费（元）', 月份: 'Aug.', 月均降雨量: 42.4 }
+ ];
+
+ const chart = new Chart({
+ container: el,
+ autoFit: true,
+ height: 500
+ });
+ chart.data(data);
+ chart.scale('月均降雨量', {
+ nice: true
+ });
+ chart.tooltip({
+ showMarkers: false,
+ shared: true
+ });
+ // 图表下方图形文字自定义
+ chart.legend({
+ items: [
+ {
+ name: '已收金额（元）',
+ value: 'node_load1',
+ marker: {
+ symbol: 'circle',
+ style: { fill: '#6395f9' }
+ }
+ },
+ {
+ name: '已付运费（元）',
+ value: 'node_load1',
+ marker: {
+ symbol: 'circle',
+ style: { fill: '#62daab' }
+ }
+ }
+ ]
+ });
+
+ chart
+ .interval()
+ .position('月份*月均降雨量')
+ .color('name')
+ .adjust([
+ {
+ type: 'dodge',
+ marginRatio: 0
+ }
+ ]);
+
+ chart.render();
+ }
+
+ render2(el: ElementRef): void {
+ this.ngZone.runOutsideAngular(() => this.initCurve(el.nativeElement));
+ }
+
+ private initCurve(el: HTMLElement): void {
+ const chart = new Chart({
+ container: el,
+ autoFit: true,
+ height: 400
+ });
+ // 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
+ const data = [
+ { data: '1月', label: '平均附加费率', value: 5 },
+ { data: '2月', label: '平均附加费率', value: 10 },
+ { data: '3月', label: '平均附加费率', value: 25 },
+ { data: '4月', label: '平均附加费率', value: 35 },
+ { data: '5月', label: '平均附加费率', value: 15 },
+ { data: '6月', label: '平均附加费率', value: 5 },
+ { data: '7月', label: '平均附加费率', value: 95 },
+ { data: '8月', label: '平均附加费率', value: 45 }
+ ];
+
+ chart.data(data);
+ //刻度自定义
+ chart.scale({
+ data: {
+ range: [0, 1]
+ },
+ value: {
+ min: 0,
+ nice: true
+ }
+ });
+ // 图表下方图形文字自定义
+ chart.legend({
+ items: [
+ {
+ name: '平均附加费率',
+ value: 'node_load1',
+ marker: {
+ symbol: 'circle',
+ style: { fill: '#6193f7' }
+ }
+ }
+ ]
+ });
+ // 提示自定义
+ chart.tooltip({
+ showCrosshairs: true,
+ shared: true
+ });
+
+ //数据格式化
+ chart.axis('value', {
+ label: {
+ formatter: val => {
+ return val + ' %';
+ }
+ }
+ });
+ // 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
+ chart
+ .line()
+ .position('data*value')
+ .color('label')
+ .tooltip('label*value', (name: any, value: any) => {
+ return {
+ name: name,
+ value: value + '%'
+ };
+ });
+ // 在x*y的坐标上按z值绘制圆点
+ // chart.point().position('data*value').size(4).color('label').shape('circle');
+ chart.render();
+ }
+}
diff --git a/src/app/routes/datatable/components/financetable/financetable.component.html b/src/app/routes/datatable/components/financetable/financetable.component.html
index 56092666..a25ffb3f 100644
--- a/src/app/routes/datatable/components/financetable/financetable.component.html
+++ b/src/app/routes/datatable/components/financetable/financetable.component.html
@@ -1,6 +1,68 @@
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+