feats

src/pages/mine/customerAnalyse/components/LineChart.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react'
+import Chart from '@/components/Chart'
+
+export default (props) => {
+  const { dimensions, source } = props
+
+  const [options, setOptions] = useState()
+
+  useEffect(() => {
+    if (dimensions && source) {
+      setOptions({
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            rotate: 45, // 旋转 45 度
+          }
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [{
+          type: 'line',
+          smooth: true,
+        }],
+        color: ['#5470c6'],
+        dataset: {
+          dimensions,
+          source,
+        }
+      });
+    }
+  }, [dimensions, source])
+
+  return (
+    <Chart options={options} />
+  )
+}

src/pages/mine/customerAnalyse/index.jsx

@@ -81,81 +81,81 @@ export default withLayout(() => {
     }
   }
 
-  const createLineOptions = (source = []) => {
-    const colorWithOpacity = op => `rgba(187,156,121, ${op})`
-
-    const defaultOpt = {
-      color: [colorWithOpacity(1)],
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        axisLabel: {
-          textStyle: {
-            color: '#666'
-          }
-        }
-
-      },
-      yAxis: {
-        type: 'value',
-        axisLabel: {
-          textStyle: {
-            color: '#666'
-          }
-        }
-      },
-      grid: {
-        left: '10%',
-        right: '8%',
-        bottom: '12%',
-        top: '15%',
-      },
-      series: [],
-    }
-    // 数据展示只展示 5 个
-    const endValue = source.length - 1 > 0 ? source.length - 1 : 0
-    const startValue = endValue - 5 > 0 ? endValue - 5 : 0
-
-    return {
-      ...defaultOpt,
-      dataset: { source },
-      dataZoom: [{
-        type: 'inside',
-        startValue, endValue,
-        show: true,
-      }],
-      series: [{
-        type: 'line',
-        dimensions: ['name', 'value'],
-        symbolSize: 6,
-        smooth: true,
-        label: {
-          show: true,
-          formatter: '{@value}人'
-        },
-        lineStyle: {
-          shadowColor: colorWithOpacity(0.5),
-          shadowBlur: 5,
-          shadowOffsetY: 7
-        },
-        areaStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [{
-              offset: 0, color: colorWithOpacity(0.2) // 0% 处的颜色
-            }, {
-              offset: 1, color: colorWithOpacity(0) // 100% 处的颜色
-            }],
-            global: false,
-          }
-        },
-      }],
-    }
-  }
+  // const createLineOptions = (source = []) => {
+  //   const colorWithOpacity = op => `rgba(187,156,121, ${op})`
+
+  //   const defaultOpt = {
+  //     color: [colorWithOpacity(1)],
+  //     xAxis: {
+  //       type: 'category',
+  //       boundaryGap: false,
+  //       axisLabel: {
+  //         textStyle: {
+  //           color: '#666'
+  //         }
+  //       }
+
+  //     },
+  //     yAxis: {
+  //       type: 'value',
+  //       axisLabel: {
+  //         textStyle: {
+  //           color: '#666'
+  //         }
+  //       }
+  //     },
+  //     grid: {
+  //       left: '10%',
+  //       right: '8%',
+  //       bottom: '12%',
+  //       top: '15%',
+  //     },
+  //     series: [],
+  //   }
+  //   // 数据展示只展示 5 个
+  //   const endValue = source.length - 1 > 0 ? source.length - 1 : 0
+  //   const startValue = endValue - 5 > 0 ? endValue - 5 : 0
+
+  //   return {
+  //     ...defaultOpt,
+  //     dataset: { source },
+  //     dataZoom: [{
+  //       type: 'inside',
+  //       startValue, endValue,
+  //       show: true,
+  //     }],
+  //     series: [{
+  //       type: 'line',
+  //       dimensions: ['name', 'value'],
+  //       symbolSize: 6,
+  //       smooth: true,
+  //       label: {
+  //         show: true,
+  //         formatter: '{@value}人'
+  //       },
+  //       lineStyle: {
+  //         shadowColor: colorWithOpacity(0.5),
+  //         shadowBlur: 5,
+  //         shadowOffsetY: 7
+  //       },
+  //       areaStyle: {
+  //         color: {
+  //           type: 'linear',
+  //           x: 0,
+  //           y: 0,
+  //           x2: 0,
+  //           y2: 1,
+  //           colorStops: [{
+  //             offset: 0, color: colorWithOpacity(0.2) // 0% 处的颜色
+  //           }, {
+  //             offset: 1, color: colorWithOpacity(0) // 100% 处的颜色
+  //           }],
+  //           global: false,
+  //         }
+  //       },
+  //     }],
+  //   }
+  // }
 
   return (
     <view className='Page customerAnalyse flex-v'>