diff --git a/src/charts/Bullet.jsx b/src/charts/Bullet.jsx new file mode 100644 index 0000000..985093c --- /dev/null +++ b/src/charts/Bullet.jsx @@ -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 ( + <> + + + ); +});