feats

config/index.js

@@ -29,13 +29,18 @@ const config = {
   },
   copy: {
     patterns: [
-      // { from: 'src/native/', to: 'dist/native/' },
+      { from: 'src/native/', to: 'dist/native/' },
     ],
     options: {
     }
   },
   framework: 'react',
   mini: {
+    compile: {
+      exclude: [
+        path.resolve(__dirname, '..', 'src/native/')
+      ]
+    },
     postcss: {
       pxtransform: {
         enable: true,

src/pages/mine/customerAnalyse/index.config.js

@@ -1,6 +1,6 @@
 export default {
   navigationBarTitleText: '客户分析',
   usingComponents: {
-    'ec-canvas': '@/components/ec-canvas/ec-canvas'
+    'ec-canvas': '@/native/ec-canvas/ec-canvas'
   }
 }

src/pages/mine/customerAnalyse/index.jsx

@@ -5,7 +5,7 @@ import { ScrollView } from '@tarojs/components'
 import { useSelector } from 'react-redux'
 import { fetch } from '@/utils/request'
 import { API_SEX_INFO, API_ECHERTS_DAILY } from '@/constants/api'
-import echarts from '@/components/ec-canvas/echarts'
+import echarts from '@/native/ec-canvas/echarts'
 // import dayjs from 'dayjs'
 import './index.scss'
 

src/pages/mine/partnerChannel/components/LineChat.jsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState, useMemo } from 'react'
 import Taro from '@tarojs/taro'
-import * as echarts from '@/components/ec-canvas/echarts';
+import * as echarts from '@/native/ec-canvas/echarts';
 import { getChannelLineChat } from '@/services/agent'
 
 function initChart(canvas, width, height, dpr) {
@@ -11,87 +11,99 @@ function initChart(canvas, width, height, dpr) {
   });
   canvas.setChart(chart);
 
-  var option = {
-    title: {
-      text: '测试下面legend的红色区域不应被裁剪',
-      left: 'center'
-    },
-    legend: {
-      data: ['A', 'B', 'C'],
-      top: 50,
-      left: 'center',
-      backgroundColor: 'red',
-      z: 100
-    },
-    grid: {
-      containLabel: true
-    },
-    tooltip: {
-      show: true,
-      trigger: 'axis'
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-      // show: false
-    },
-    yAxis: {
-      x: 'center',
-      type: 'value',
-      splitLine: {
-        lineStyle: {
-          type: 'dashed'
-        }
-      }
-      // show: false
-    },
-    series: [{
-      name: 'A',
-      type: 'line',
-      smooth: true,
-      data: [18, 36, 65, 30, 78, 40, 33]
-    }, {
-      name: 'B',
-      type: 'line',
-      smooth: true,
-      data: [12, 50, 51, 35, 70, 30, 20]
-    }, {
-      name: 'C',
-      type: 'line',
-      smooth: true,
-      data: [10, 30, 31, 50, 40, 20, 10]
-    }]
-  };
+  // var option = {
+  //   xAxis: {
+  //     type: 'category',
+  //     boundaryGap: false,
+  //     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+  //     // show: false
+  //   },
+  //   yAxis: {
+  //     x: 'center',
+  //     type: 'value',
+  //     splitLine: {
+  //       lineStyle: {
+  //         type: 'dashed'
+  //       }
+  //     }
+  //     // show: false
+  //   },
+  //   series: [{
+  //     name: 'A',
+  //     type: 'line',
+  //     smooth: true,
+  //     data: [18, 36, 65, 30, 78, 40, 33]
+  //   }, {
+  //     name: 'B',
+  //     type: 'line',
+  //     smooth: true,
+  //     data: [12, 50, 51, 35, 70, 30, 20]
+  //   }, {
+  //     name: 'C',
+  //     type: 'line',
+  //     smooth: true,
+  //     data: [10, 30, 31, 50, 40, 20, 10]
+  //   }]
+  // };
 
-  chart.setOption(option);
+  // chart.setOption(option);
   return chart;
 }
 
 export default (props) => {
   const { buildingId, xType, dateRange } = props
 
-  const [ec, setEc] = useState()
+  const [options, setOptions] = useState()
+  const chartRef = useRef()
+  const ec = useMemo(() => {
+    const onInit = (...args) => {
+      const chart = initChart(...args)
+      chartRef.current = chart
+      return chart
+    }
 
-  useEffect(() => {
-    Taro.nextTick(() => {
-      setEc({
-        onInit: initChart
-      })
-    })
+    return { onInit }
   }, [])
 
   useEffect(() => {
-    if (ec) {
+    if (buildingId) {
       const [startDate, endDate] = dateRange
       getChannelLineChat({
         buildingId,
         type: xType,
         startDate: `${startDate}T00:00:00.000Z`,
         endDate: `${endDate}T23:59:59.999Z`,
-      }).then((res) => {})
+      }).then((res) => {
+        const { newCustomerDetail } = res
+        const data = [[],[]];
+        (newCustomerDetail || []).forEach((it) => {
+          data[0].push(it.coordinate.substring(5))
+          data[1].push(it.customerNum)
+        })
+        setOptions({
+          xAxis: {
+            type: 'category',
+            data: data[0],
+          },
+          yAxis: {
+            type: 'value',
+          },
+          series: [{
+            type: 'line',
+            smooth: true,
+            data: data[1],
+          }],
+          color: ['#5470c6'],
+        })
+      })
+    }
+  }, [buildingId, dateRange, xType])
+
+  useEffect(() => {
+    if (options) {
+      chartRef.current.setOption(options);
     }
-  }, [ec, buildingId, dateRange, xType])
+  }, [options])
 
   return (
     <ec-canvas ec={ec} />

src/pages/mine/partnerChannel/index.config.js

@@ -1,6 +1,6 @@
 export default {
   navigationBarTitleText: '合作渠道',
   usingComponents: {
-    'ec-canvas': '@/components/ec-canvas/ec-canvas'
+    'ec-canvas': '@/native/ec-canvas/ec-canvas'
   }
 }