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 b50e7764..162d6391 100644 --- a/src/app/routes/datatable/components/compliance/index/index.component.ts +++ b/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) { 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}, - {x: '1991', z: 'b', y: 2}, - {x: '1991', z: 'c', y: 3}, + { 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 }, - {x: '1992', z: 'a', y: 11}, - {x: '1992', z: 'b', y: 22}, - {x: '1992', z: 'c', y: 33}, - - {x: '1993', z: 'a', y: 1}, - {x: '1993', z: 'b', y: 2}, - {x: '1993', z: 'c', y: 3} - ]; + { data: '1月', label: '付款及时率', value: 10 }, + { data: '2月', label: '付款及时率', value: 15 }, + { 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 }, + + { data: '1月', label: '货源占比率', value: 90 }, + { data: '2月', label: '货源占比率', value: 30 }, + { 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(); } }