Merge branch 'develop' of https://gitlab.eascs.com/tms-ui/tms-obc-web into develop

src/app/routes/datatable/components/compliance/index/index.component.ts

@@ -82,14 +82,6 @@ export class DatatableComplianceIndexComponent implements OnInit {
 
   }
 
-  data = [
-    { Date: '22 February', 订单合格率: 50000, 付款及时率: 125000 },
-    { Date: '28 February', 订单合格率: 60000, 付款及时率: 150000 },
-    { Date: '3 March', 订单合格率: 100000, 付款及时率: 250000 },
-    { Date: '20 March', 订单合格率: 200000, 付款及时率: 500000 },
-    { Date: '7 April', 订单合格率: 250000, 付款及时率: 625000 },
-    { Date: '13 June', 订单合格率: 210000, 付款及时率: 525000 }
-  ];
   render(el: ElementRef<HTMLDivElement>) {
     this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
   }
@@ -102,24 +94,105 @@ export class DatatableComplianceIndexComponent implements OnInit {
     });
     // 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
 		const data = [
-			{x: '1991', z: 'a', y: 1},
+      { data: '1月', label: '订单合格率', value: 5 },
-			{x: '1991', z: 'b', y: 2},
+      { data: '2月', label: '订单合格率', value: 10 },
-			{x: '1991', z: 'c', y: 3},
+      { 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 },
 
-			{x: '1992', z: 'a', y: 11},
+      { data: '1月', label: '付款及时率', value: 10 },
-			{x: '1992', z: 'b', y: 22},
+      { data: '2月', label: '付款及时率', value: 15 },
-			{x: '1992', z: 'c', y: 33},
+      { data: '3月', label: '付款及时率', value: 30 },
+      { data: '4月', label: '付款及时率', value: 8 },
+      { data: '5月', label: '付款及时率', value: 9 },
+      { data: '6月', label: '付款及时率', value: 5 },
+      { data: '7月', label: '付款及时率', value: 80 },
+      { data: '8月', label: '付款及时率', value: 55 },
 
-			{x: '1993', z: 'a', y: 1},
+      { data: '1月', label: '货源占比率', value: 90 },
-			{x: '1993', z: 'b', y: 2},
+      { data: '2月', label: '货源占比率', value: 30 },
-			{x: '1993', z: 'c', y: 3}
+      { data: '3月', label: '货源占比率', value: 45 },
-		];
+      { data: '4月', label: '货源占比率', value: 35 },
+      { data: '5月', label: '货源占比率', value: 95 },
+      { data: '6月', label: '货源占比率', value: 35 },
+      { data: '7月', label: '货源占比率', value: 65 },
+      { data: '8月', label: '货源占比率', value: 63 },
+
+      { data: '1月', label: '运费直付占比', value: 30 },
+      { data: '2月', label: '运费直付占比', value: 60 },
+      { data: '3月', label: '运费直付占比', value: 25 },
+      { data: '4月', label: '运费直付占比', value: 35 },
+      { data: '5月', label: '运费直付占比', value: 15 },
+      { data: '6月', label: '运费直付占比', value: 55 },
+      { data: '7月', label: '运费直付占比', value: 50 },
+      { data: '8月', label: '运费直付占比', value: 30 },
+    ];
 
     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'}
+          },
+        },
+        {
+          name: '付款及时率',
+          value: 'node_load2',
+          marker: {symbol: 'circle',style: {fill: '#58d3a2'}},
+        },
+        {
+          name: '货源占比率',
+          value: 'node_load13',
+          marker: {symbol: 'circle',style: {fill: '#5b6d8f'}},
+        },
+        {
+          name: '运费直付占比',
+          value: 'node_load13',
+          marker: {symbol: 'circle',style: {fill: '#f0b915'}},
+        },
+      ]
+    });
+    // 提示自定义
+    chart.tooltip({
+      showCrosshairs: true,
+      shared: true,
+    });
+    
+    //数据格式化
+    chart.axis('value', {
+      label: {
+        formatter: (val) => {
+          return val + ' %';
+        },
+      },
+    });
 		// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
-		chart.line().position('x*y').color('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('x*y').size(4).color('z').shape('circle');
+		chart.point().position('data*value').size(4).color('label').shape('circle');
 		chart.render();
   }
 }