feat: 统计-发票收款趋势图表

src/components/Table/src/hooks/useTableScroll.ts

@@ -147,7 +147,7 @@ export function useTableScroll(
     const tableEl = tableElRef.current
 
     const tableWidth = tableEl && tableEl?.offsetWidth
-    console.log(tableWidth - 48, width)
+    // console.log(tableWidth - 48, width)
 
     return tableWidth - 48 > width ? '100%' : width
   }, [selectKeysRef, columnsRef, tableElRef?.current])

src/pages/Statistic/Product/InvoiceTrends/index.jsx

@@ -43,6 +43,11 @@ const InvoiceTrends = () => {
       align: 'center'
     },
     {
+      dataIndex: 'month_1',
+      title: '1月',
+      align: 'center'
+    },
+    {
       dataIndex: 'month_2',
       title: '2月',
       align: 'center'
@@ -104,17 +109,61 @@ const InvoiceTrends = () => {
 
   const dualAxesOptions = {
     data: [state.chart, state.chart],
-    xField: 'month',
+    xField: 'monthName',
     yField: ['price', 'ring'],
+    // appendPadding: [0, 32, 24, 32],
+    meta: {
+      price: {
+        alias: '当月开票金额(元)'
+      },
+      ring: {
+        alias: '环比增长(%)'
+      }
+      // month: {
+      //   formatter: v => `${v}月`
+      // }
+    },
+    yAxis: {
+      price: {
+        label: {
+          formatter: v => {
+            return `${v}元`
+          }
+        }
+      },
+      ring: {
+        label: {
+          formatter: v => {
+            return `${v}%`
+          }
+        }
+      }
+    },
+    legend: {
+      position: 'top',
+      itemName: {
+        formatter: (_, item) => {
+          return item.value === 'price' ? '当月开票金额(元)' : '环比增长(%)'
+        }
+      }
+    },
     geometryOptions: [
       {
-        geometry: 'column'
+        geometry: 'column',
+        color: '#A7D2F9'
       },
       {
         geometry: 'line',
-        lineStyle: {
-          lineWidth: 2
-        }
+        smooth: true,
+        color: '#C4E9C1'
+      }
+    ],
+    interactions: [
+      {
+        type: 'element-highlight'
+      },
+      {
+        type: 'active-region'
       }
     ]
   }
@@ -138,7 +187,7 @@ const InvoiceTrends = () => {
         toolbar={{
           title: [
             <OptionSelect onChange={optionChange} type="InvoiceTrends" key="op" multiple={false} />,
-            <div className="ml-1" key="pp">
+            <div className="ml-2" key="pp">
               <Select
                 options={[
                   { label: '发票', value: 'invoice' },
@@ -171,7 +220,7 @@ const InvoiceTrends = () => {
             ...sort,
             ...filter
           })
-
+          console.log(chart)
           setState({ ...state, chart })
           return {
             data: list,

src/pages/Statistic/components/OptionSelect.tsx

@@ -113,8 +113,6 @@ const OptionSelect: React.FC<OptionSelectProps> = ({ multiple = true, type, onCh
     return base
   }, [state.optionType, state.department, state.staff])
 
-  console.log('options', options)
-
   return (
     <div>
       <span className="mr-2">