Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wangshiming
2022-03-30 11:04:21 +08:00
parent b817782b9b 2324e5d7a9
commit 19e6a1929b
1 changed files with 94 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/app/routes/datatable/components/compliance/index/index.component.ts
View File

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