feat: 子弹图
parent
b797a2d93a
commit
81ec67d1c3
@ -0,0 +1,100 @@
|
|||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { Bullet } from '@ant-design/plots';
|
||||||
|
|
||||||
|
export default observer((props) => {
|
||||||
|
const { dataSource, ...extProps } = props;
|
||||||
|
// todo: 处理进度图的数据格式, number -> array
|
||||||
|
const parseData = dataSource?.map(ele => ({...ele, CJCountRange: [0,1000], [extProps.measureField]: [ele[extProps.measureField]]}));
|
||||||
|
const config = {
|
||||||
|
// data,
|
||||||
|
// measureField: 'measures',
|
||||||
|
// rangeField: 'ranges',
|
||||||
|
// targetField: 'target',
|
||||||
|
// xField: 'title',
|
||||||
|
color: {
|
||||||
|
range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
|
||||||
|
measure: '#5B8FF9',
|
||||||
|
target: '#39a3f4',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
// target: true,
|
||||||
|
// measure: {
|
||||||
|
// position: 'middle',
|
||||||
|
// style: {
|
||||||
|
// fill: '#fff',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
line: null,
|
||||||
|
},
|
||||||
|
yAxis: false,
|
||||||
|
// 自定义 legend
|
||||||
|
legend: {
|
||||||
|
custom: true,
|
||||||
|
position: 'bottom',
|
||||||
|
items: [
|
||||||
|
// {
|
||||||
|
// value: '差',
|
||||||
|
// name: '差',
|
||||||
|
// marker: {
|
||||||
|
// symbol: 'square',
|
||||||
|
// style: {
|
||||||
|
// fill: '#FFbcb8',
|
||||||
|
// r: 5,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// value: '良',
|
||||||
|
// name: '良',
|
||||||
|
// marker: {
|
||||||
|
// symbol: 'square',
|
||||||
|
// style: {
|
||||||
|
// fill: '#FFe0b0',
|
||||||
|
// r: 5,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// value: '优',
|
||||||
|
// name: '优',
|
||||||
|
// marker: {
|
||||||
|
// symbol: 'square',
|
||||||
|
// style: {
|
||||||
|
// fill: '#bfeec8',
|
||||||
|
// r: 5,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
value: '实际',
|
||||||
|
name: '实际',
|
||||||
|
marker: {
|
||||||
|
symbol: 'square',
|
||||||
|
style: {
|
||||||
|
fill: '#5B8FF9',
|
||||||
|
r: 5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '目标',
|
||||||
|
name: '目标',
|
||||||
|
marker: {
|
||||||
|
symbol: 'line',
|
||||||
|
style: {
|
||||||
|
stroke: '#39a3f4',
|
||||||
|
r: 5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Bullet {...config} {...extProps} data={parseData} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
Loading…
Reference in New Issue