feat: 子弹图

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 (
+    <>
+      <Bullet {...config} {...extProps} data={parseData} />
+    </>
+  );
+});